@import "../markdown.css"; @media (prefers-color-scheme: light) { :root { --tag-bg-color: #d2e0f0; } } @media (prefers-color-scheme: dark) { :root { --tag-bg-color: #242e38; } } :root { --max-width: 750px; } body { max-width: var(--max-width); margin: auto; } /* Post title */ header h1 { font-size: calc(var(--font-size) * 2); } /* Post date */ header span { font-style: italic; } /* Post tags */ header > ul:last-of-type { display: inline; margin-left: 1em; padding: 0; } header > ul:last-of-type li::before { content: "#"; } header > ul:last-of-type li { display: inline; background: var(--tag-bg-color); border-radius: 5px; padding: 2px 8px; font-size: calc(var(--font-size) * 0.9); } /* Post */ main { margin: 0; padding-block: 0; max-width: 100%; } /* Images */ img, svg { max-width: var(--max-width); } /* Code */ kbd, code { font-family: monospace; } /* Table of content */ nav#toc { position: fixed; top: 0; left: 25px; margin-left: 50px; } /* breakpoint */ @media only screen and (max-width: 1500px) { /* Visible only on large screens */ nav#toc { visibility: hidden; } }