diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 366 |
1 files changed, 366 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..e88b7a4 --- /dev/null +++ b/style.css @@ -0,0 +1,366 @@ +/* + * sophies.rocks + * + * Copyright (C) 2026 Zofia Szweda + * + * This file is part of sophies.rocks. + * + * sophies.rocks is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of + * the License, or (at your option) any later version. + * + * sophies.rocks is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with sophies.rocks. If not, see <https://www.gnu.org/licenses/>. + */ + +:root { + --bg: #f8efdf; + --text: #33281c; + --accent: #b8783e; + --border: #e4e0d8; + --muted: #7a6a54 +} + +* { + box-sizing: border-box; +} + +p { + margin: 0.4rem 0; +} + +body { + font-family: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", sans-serif; + background: var(--bg); + color: var(--text); + max-width: 680px; + margin: 0 auto; + padding: 4rem 1.5rem; + line-height: 1.65; + font-size: 1.05rem; +} + +h1, +h2, +h3 { + font-family: "IBM Plex Serif", Georgia, serif; + font-weight: 600; + line-height: 1.25; + margin-top: 3rem; +} + + +h1 { + font-size: 2.1rem; + margin-top: 0; + letter-spacing: -0.02em; +} + +h2 { + font-size: 1.4rem; +} + +a { + color: var(--accent); + text-decoration: underline; + text-decoration-color: rgba(181, 83, 60, 0.3); + text-underline-offset: 3px; +} + +nav { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + gap: 1.5rem; + margin-bottom: 3rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); + font-size: 1rem; + color: var(--muted); +} + +code, +pre { + font-family: "IBM Plex Mono", "Courier New", monospace; + margin: 0.4rem 0; +} + +code { + background: #f0ede6; + padding: 0.15em 0.4em; + border-radius: 4px; + font-size: 0.9em; +} + +.buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 3rem; +} + +#recent { + margin-top: 3rem; +} + +#recent h2 { + margin-top: 0; +} + +#recent-now p { + margin: 0; +} + +.recent-grid { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 1.5rem; + margin-top: 1.5rem; + align-items: stretch; +} + +.recent-column { + display: flex; + flex-direction: column; + gap: 1.5rem; + min-height: 0; +} + +.recent-box { + border: 1px solid #ddd; + padding: 1.25rem 1.5rem; +} + +.recent-box h3 { + margin-top: 0; + font-size: 1.1rem; +} + +.recent-box ul { + list-style: none; + padding-left: 0; + margin: 1rem 0 0; +} + + +.recent-box li+li { + margin-top: 1.2rem; +} + +.recent-box li a { + font-weight: 600; +} + + +#recent-now { + flex: 1; + min-height: 0; + max-height: 180px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--accent) var(--bg); +} + +#recent-now::-webkit-scrollbar { + width: 8px; +} + +#recent-now::-webkit-scrollbar-track { + background: var(--bg); +} + +#recent-now::-webkit-scrollbar-thumb { + background: var(--accent); + border-radius: 4px; +} + +#recent-now::-webkit-scrollbar-thumb:hover { + background: var(--text); +} + +#recent-now ul { + list-style: none; + padding-left: 0; + margin: 1rem 0 0; +} + +#recent-now li { + margin: 0 0 1rem; +} + +#recent-now li:last-child { + margin-bottom: 0; +} + +#recent-now time { + display: block; + font-size: 0.8em; + color: var(--muted); + font-family: "IBM Plex Mono", monospace; +} + +@media (max-width: 550px) { + + .recent-grid, + .terminology-grid { + grid-template-columns: 1fr; + } +} + +@font-face { + font-family: "IBM Plex Serif"; + src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2"); + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Serif"; + src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2"); + font-weight: 700; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); + font-weight: 400; + font-display: swap; +} + + +@font-face { + font-family: "Atkinson Hyperlegible Next"; + src: url("fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf") format("truetype-variations"); + font-weight: 400 700; + font-display: swap; +} + +.pgp-label { + margin: 0; + margin-bottom: 0; +} + +.pgp-key { + all: revert; + white-space: pre-wrap; + font-family: "Atkinson Hyperlegible Next"; + margin: 0; +} + + +.tag { + font-size: 0.7em; + padding: 0.1em 0.5em; + border-radius: 4px; + font-family: "IBM Plex Mono", monospace; + text-transform: uppercase; + margin-left: 0.4em; +} + +.tag.done { + background: #dcead9; + color: #2e5c31; +} + +.tag.todo { + background: #f0ede6; + color: var(--muted); +} + +.tag.kill { + background: #f2dcd8; + color: #8a3b32; +} + +.tag.maybe { + background: #f3e6c8; + color: #7a5a1c; +} + +dl.slashlist dt { + font-weight: 600; + margin-top: 1.2em; +} + +dl.slashlist dd { + margin-left: 0; + color: var(--muted); + font-size: 0.95em; +} + +.terminology { + margin-top: 3rem; +} + +.terminology-intro { + color: var(--muted); +} + +.terminology-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + margin-top: 2rem; +} + +.terminology-grid>div { + border: 1px solid var(--border); + padding: 1rem 1.25rem; + border-radius: 6px; +} + +.terminology-grid h3 { + margin-top: 0; + margin-bottom: 0.75rem; +} + +.terminology-grid ul { + list-style: none; + padding-left: 0; + margin: 0; +} + +.terminology-grid li { + margin: 0.35rem 0; +} + +.terminology-grid .icon { + width: 16px; + height: 16px; + object-fit: contain; + vertical-align: -3px; + margin-right: 0.35rem; +} + +.rating-love { + color: var(--accent); + font-weight: 700; +} + +.rating-like { + color: var(--text); +} + +.rating-okay { + color: #628c58; +} + +.rating-maybe { + color: #a66b3d; +} + +.rating-no { + color: #a34f45; +} + +.rating-never { + color: #a34f45; + font-weight: 700; +}
\ No newline at end of file |