diff options
Diffstat (limited to 'crates/recluse/src/assets/base.css')
| -rw-r--r-- | crates/recluse/src/assets/base.css | 128 | +128 −0 |
1 files changed, 128 insertions, 0 deletions
diff --git a/crates/recluse/src/assets/base.css b/crates/recluse/src/assets/base.css new file mode 100644 --- /dev/null +++ b/crates/recluse/src/assets/base.css @@ -0,0 +1,128 @@ +/* SPDX-FileCopyrightText: 2026 Nikolay Govorov <me@govorov.online> */ +/* SPDX-License-Identifier: AGPL-3.0-or-later */ + +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 100 700; + font-stretch: 100%; + font-display: swap; + src: url(./jetbrainsmono/JetBrainsMono[wght].woff2) format('woff2'); +} + +@font-face { + font-family: 'JetBrains Mono'; + font-style: italic; + font-weight: 100 700; + font-stretch: 100%; + font-display: swap; + src: url(./jetbrainsmono/JetBrainsMono-Italic[wght].woff2) format('woff2'); +} + +*, *::before, *::after { + box-sizing: border-box; +} + +:root { + line-height: 1.4; + font-family: 'JetBrains Mono', monospace; + color-scheme: light dark; + + --color-text: #222; + --color-bg: #fff; + --color-border: #222; + --color-code-bg: #818b981f; + --color-license-bg: antiquewhite; + --color-link: #0969da; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-text: #e0e0e0; + --color-bg: #1a1a1a; + --color-border: #555; + --color-code-bg: #ffffff12; + --color-license-bg: #2a2a2a; + --color-link: #58a6ff; + } +} + +html { + margin: 0; + padding: 0; +} + +body { + margin: 0 auto; + max-width: 80ch; + padding: 1.5em 2em; + color: var(--color-text); + background-color: var(--color-bg); +} + +code { + margin: 0; + padding: .2em .4em; + white-space: break-spaces; + background-color: var(--color-code-bg); +} + +h1, h2, h3, h4 { + margin: 1.5rem 0 0.5rem; + font-weight: 700; + line-height: 1.2; + text-wrap: balance; +} + +h1 { font-size: 2.25rem; line-height: 1.1; } +h2 { font-size: 1.5rem; } +h3 { font-size: 1.15rem; } +h4 { font-size: 1rem; } + +h1:first-child { margin-top: 0; } + +p, details { + margin: 1em 0; + text-wrap: pretty; +} + +table { + border-collapse: collapse; +} + +th, td { + padding: 7px 8px; + border: 2px solid var(--color-border); + text-align: start; + vertical-align: top; +} + +a { + color: var(--color-link); +} + +h3 a { + color: inherit; + text-decoration: none; +} + +h3 a:hover { + text-decoration: underline; +} + +.license { + margin: 1rem 0; +} + +.license-used-by { + margin-top: -10px; +} + +.license-text { + max-height: 280px; + overflow-y: scroll; + white-space: pre-wrap; + background-color: var(--color-license-bg); + border-left: 4px solid var(--color-border); + padding: 0.8em 1em; +} |