// ————– THEME SWITCHER ————– // @mixin dark-appearance {
filter: invert(1); img { filter: invert(1); &.ioda { filter: invert(0); } }
}
body { @include dark-appearance; }
@media (prefers-color-scheme: dark) {
body[a="auto"] { @include dark-appearance; }
} // ——————————————– //
// bg color is also needed in html in order to // block body's background propagation // see: stackoverflow.com/a/61265706 html, body { background: white; }
html { height: 100%; }
body {
color: black; font-family: monospace; font-size: 16px; line-height: 1.4; margin: 0; min-height: 100%; overflow-wrap: break-word;
}
.post-meta { text-align: right; }
h2, h3, h4, h5, h6 { margin-top: 3rem; }
hr { margin: 2rem 0; }
p { margin: 1rem 0; }
li { margin: 0.4rem 0; }
*:target { background: yellow; }
.w {
max-width: 640px; margin: 0 auto; padding: 4rem 2rem;
}
hr {
text-align: center; border: 0; &:before { content: '/////' } &:after { content: attr(data-content) '/////' }
}
table { width: 100%; }
table, th, td {
border: thin solid black; border-collapse: collapse; padding: 0.4rem;
}
code {
color: white; background: black;
}
div.highlighter-rouge code {
display: block; overflow-x: auto; white-space: pre-wrap; padding: 1rem;
}
blockquote {
font-style: italic; border: thin solid black; padding: 1rem; p { margin: 0; }
}
img {
max-width: 100%; display: block; margin: 0 auto;
}