wallabag/assets/_global/share.scss
2024-02-24 23:54:36 +01:00

427 lines
4.5 KiB
SCSS

/* -------------------------- Reset ------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------- General properties ------------------- */
body {
background-color: white;
color: #444;
font-family: Georgia;
line-height: 1.7;
-ms-content-zooming: none;
margin-bottom: 64px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
margin: 0.2em 0;
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
text-align: left;
line-height: 1.3;
}
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.3em;
}
h3,
h4 {
font-size: 1.2em;
}
h5,
h6 {
font-size: 1.1em;
}
p {
margin-bottom: 0.75em;
}
b,
strong {
font-weight: bold;
}
i,
em {
font-style: italic;
}
a {
color: #444;
text-decoration: underline;
}
a:active,
a:hover {
outline: 0;
}
p,
ul,
ol,
dl {
margin: 0 0 1.75em;
}
ul,
ol {
padding-left: 1.25em;
}
li {
padding-bottom: 0.2em;
line-height: 1.6;
}
li p:last-child,
li li:last-child {
margin-bottom: -0.2em;
}
ul li:last-child,
ol li:last-child {
padding-bottom: 0;
}
iframe,
video {
max-width: 100%;
height: auto;
}
mark {
padding: 0 0.2em;
}
mark a {
text-decoration: none;
}
blockquote {
font-style: italic;
border-left: 0.25em solid black;
margin-left: -20px;
padding-left: 17px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
blockquote cite {
text-transform: uppercase;
font-size: 0.8em;
font-style: normal;
}
blockquote cite::before {
content: "";
margin-right: 0.5em;
}
img {
display: block;
height: auto;
margin-bottom: 0.5em;
max-width: 100%;
}
figure {
margin: 0;
}
figure figcaption {
display: block;
margin-top: 0.3em;
font-style: italic;
font-size: 0.8em;
}
button {
display: none !important;
}
hr {
display: block;
height: 1px;
border: solid #666;
border-width: 1px 0 0;
margin: 1.6em 0;
padding: 0;
}
small {
font-size: 0.7em;
}
dl {
margin: 1.6em 0;
}
dl dt {
float: left;
width: 11.25em;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
margin-bottom: 1em;
}
dl dd {
margin-left: 12.5em;
margin-bottom: 1em;
}
pre {
box-sizing: border-box;
margin: 4em 0;
border: 0.0625em solid #efefef;
width: 100%;
padding: 1em;
font-family: Consolas, monospace;
white-space: pre;
overflow: auto;
}
pre code {
font-size: 0.8em;
line-height: 1.6em;
white-space: pre-wrap;
background: transparent;
border: none;
padding: 0;
vertical-align: inherit;
}
code {
padding: 0.125em 0.375em;
margin: 0 0.2em;
font-family: Consolas, monospace;
font-size: 0.8em;
white-space: pre;
border: 1px solid lightgray;
overflow: auto;
}
audio,
video {
max-width: 43.75em;
}
::selection,
mark {
background: #666;
color: white;
}
table {
border-collapse: collapse;
margin-bottom: 2em;
width: 100%;
}
th,
td {
padding: 0.25em;
text-align: left;
}
thead tr {
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 1px;
font-family: "Segoe UI", sans-serif;
font-weight: 600;
}
tbody tr:nth-child(2n+1) {
background: rgb(0 0 0 / 10%);
}
tbody {
border: solid #999;
border-width: 1px 0;
}
figure {
text-align: center;
}
figure > * {
margin: 0 auto;
}
header {
text-align: center;
}
.shared-by {
margin-bottom: 1em;
}
/* --------------------- Responsive design ------------------------- */
@media (max-width: 719px) {
header > *:not(.preview),
article {
padding: 0 1em;
}
}
@media (min-width: 720px) {
blockquote {
margin-left: -1.4375em;
padding-left: 1.25em;
}
header {
margin-top: 32px;
}
.block {
margin-left: auto;
margin-right: auto;
max-width: 43.75em;
padding: 0 1.25em;
}
}