html {
background-color: $background-color; color: $text-color; @media (prefers-color-scheme: dark) { background-color: $background-color-dark; color: $text-color-dark; } font-family: "Inter", -apple-system, sans-serif; font-size: 100%; line-height: 1.42; @media (min-width: 1024px) { font-size: 137.5%; // 22 px }
}
main {
max-width: 42em; hyphens: auto; .post-header { margin-bottom: 2rem; } .post-meta { color: $text-color-subdued; @media (prefers-color-scheme: dark) { color: $text-color-subdued-dark; } } p { margin: 0 auto; } .post-content { p + p { text-indent: 1em; } blockquote { margin: 0; padding: 0 1em; border-left: 4px solid $accent-color; p:last-child { text-indent: 0; } } } p ~ div, img, video { padding: 1em 0; } blockquote p { hanging-punctuation: first; } li > ul { padding-left: 2rem; } @media (min-width: 1024px) { ul, ol { padding-left: 0; list-style-position: outside; } }
}
h1, h2, h3, .post-list-item > .post-link {
font-weight: 700; letter-spacing: -0.02em;
}
h1 {
font-size: 1.8rem; margin-top: 0; margin-bottom: 0; // No margin-top since this is the top of the page and we want only 1 per page. // No margin-bottom as metadata should follow.
}
h2 {
font-size: 150%; margin-top: 1em; margin-bottom: 0.5em;
}
h3, .post-list-item > .post-link {
font-size: 125%;
}
h3 {
margin-top: 1em; margin-bottom: 0.5em;
}
footer {
font-size: 68.75%;
}