@import "normalize.css"; @import "@fontsource/lato"; @import "@fontsource/jetbrains-mono"; @import "highlight.js/styles/atom-one-dark.css"; :root { --color-primary: #000; --color-secondary: #777; --color-tertiary: #999; --color-highlight: #f4f4f4; --color-primary-highlight: #fff; --color-secondary-highlight: #999; } body { font-family: "Lato", sans-serif; font-size: 15pt; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { margin-top: 0.6em; margin-bottom: 0; } h3 { color: var(--color-secondary); } h4, h5, h6 { color: var(--color-tertiary); } a { color: var(--color-secondary); } p, ul { margin-top: 0.5em; margin-bottom: 0.5em; } pre { padding: 1em 0; } code { font-family: "JetBrains Mono", monospace; font-size: 14pt; background-color: var(--color-highlight); } a, a > code { text-decoration: dotted; border-color: var(--color-secondary); border-bottom-style: dotted; border-bottom-width: 1px; } a, a > code { transition: all ease 0.5s; } a:hover, a:hover > code, a > code:hover { color: var(--color-primary-highlight); background-color: var(--color-secondary-highlight); border-bottom: none; } .gridOffset { display: grid; grid-template-columns: [full-start] minmax(1em, 2fr) [main-start] minmax(0, 42em) [main-end] minmax(0, 5fr) [full-end]; } .gridOffset > * { grid-column: main; } .gridOffset hr { display: inherit; grid-column: main; grid-template-columns: inherit; border-style: solid; border-color: var(--color-secondary); } .gridOffset > pre { display: inherit; grid-column: full; grid-template-columns: inherit; } .gridOffset > pre > code { grid-column: main; } .navbar { text-align: right; margin-top: 0.5em; margin-bottom: 0.5em; } .navbar :not(.icon) { padding-left: 0.25em; padding-right: 0.25em; text-decoration: none; border-bottom-style: none; } .icon { vertical-align: middle; margin-right: 0.3em; } .icon-post { vertical-align: text-top; }