diff options
Diffstat (limited to 'theme/static/styles.css')
| -rw-r--r-- | theme/static/styles.css | 607 |
1 files changed, 11 insertions, 596 deletions
diff --git a/theme/static/styles.css b/theme/static/styles.css index d6ffd0e..120f733 100644 --- a/theme/static/styles.css +++ b/theme/static/styles.css @@ -1,597 +1,12 @@ -@import url('tokens.css'); - -/* ============================================================ - HOMEPAGE INTRO - ============================================================ */ -.homepage-intro { - max-width: var(--prose-w); - margin: 3rem 0; - margin-top: 1rem; - font-family: var(--font-serif); - font-size: var(--text-body); - line-height: var(--lh-body); -} -.homepage-intro p { margin-bottom: 1.1rem; } -.homepage-intro p:first-child { - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.1em; - font-family: var(--font-sans); - color: var(--meta); - margin-bottom: 0.5rem; -} -.homepage-intro p:nth-child(2) { - font-size: 1.3rem; - font-weight: 700; - letter-spacing: -0.01em; - color: var(--fg); - margin-bottom: 1.5rem; -} - -/* ============================================================ - RESET & BASE - ============================================================ */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } - -body { - background: var(--bg); - color: var(--fg); - font-family: var(--font-sans); - font-size: var(--text-body); - line-height: var(--lh-body); - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -/* Full-bleed header — border and nav span 100vw */ -header { - width: 100%; -} - -/* Centered content column */ -main, -footer, -header { - max-width: var(--outer-w); - margin: 0 auto; - padding-left: var(--pad); - padding-right: var(--pad); -} -footer { padding-bottom: 3rem; } - -/* Prose constraint — applied to article/page body text only */ -.prose { - max-width: var(--prose-w); -} - -/* ============================================================ - MASTHEAD - ============================================================ */ -.masthead { - border-top: 2px solid var(--fg); - padding-top: 1.5rem; - padding-bottom: 0; - padding-left: var(--pad); - padding-right: var(--pad); -} - -.masthead-title { - display: block; - font-family: var(--font-serif); - font-size: var(--text-display); - font-weight: 700; - line-height: var(--lh-display); - letter-spacing: -0.03em; - text-decoration: none; - color: var(--fg); - margin-bottom: 1.25rem; -} -.masthead-title:hover { color: var(--accent); background: none; } - -.masthead-subtitle { - font-family: var(--font-sans); - font-size: var(--text-xs); - letter-spacing: 0.12em; - color: var(--meta); - text-transform: lowercase; - margin-bottom: 1rem; -} - -/* ============================================================ - NAV STRIP — full outer width, equal cells - ============================================================ */ -.masthead nav ul { - list-style: none; - display: flex; -} -.masthead nav li { flex: 1; } -.masthead nav a { - display: block; - text-align: center; - padding: 0.55rem 0; - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.16em; - text-decoration: none; - color: var(--meta); - border: 1px solid var(--border-soft); - transition: color 0.1s, background 0.1s; -} -.masthead nav a:hover { color: var(--bg); background: var(--fg); } - -/* ============================================================ - MAIN CONTENT AREA - ============================================================ */ -main { padding-top: 2rem; } - -/* ============================================================ - KOI HR - ============================================================ */ -hr { - border: none; - height: 2.5rem; - position: relative; - display: flex; - align-items: center; - justify-content: center; - background-image: url('koi-hr.svg'); - background-repeat: no-repeat; - background-position: center; - background-size: auto 100%; - margin: 3rem 0; -} -hr::before, hr::after { - content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - width: calc(50% - 2rem); - height: 1px; - background: var(--border-soft); -} -hr::before { left: 0; } -hr::after { right: 0; } - -/* ============================================================ - FOOTER - ============================================================ */ -footer { - font-size: var(--text-xs); - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--meta); - display: flex; - flex-direction: column; - gap: 0.4rem; -} -footer a { color: var(--meta); text-decoration: none; transition: color 0.1s; } -footer a:hover { color: var(--fg); background: none; } - -/* ============================================================ - TYPOGRAPHY - ============================================================ */ -h1, h2, h3, h4 { - font-family: var(--font-serif); - font-weight: 700; - letter-spacing: -0.02em; - line-height: 1.1; -} - -/* Page-level h1 (blog list, garden, guides) */ -h1 { - font-size: var(--text-h1); - margin-bottom: 0.5rem; -} - -/* Article display title — larger, tighter */ -.article-title { - font-family: var(--font-serif); - font-size: clamp(2.4rem, 5vw, 3.6rem); - font-weight: 700; - line-height: 1.05; - letter-spacing: -0.03em; - margin: 0.4rem 0 0; -} - -h2 { - font-size: var(--text-h2); - border-left: 1px solid var(--accent); - padding-left: 0.75rem; - margin-top: 2.5rem; - margin-bottom: 0.4rem; -} -h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.3rem; } - -p { margin-bottom: 1.2rem; } - -/* Accent ONLY on links and h2 bar — nowhere else */ -a { - color: var(--accent); - text-decoration: underline; - text-underline-offset: 3px; - transition: background 0.1s, color 0.1s; -} -a:hover { background: var(--accent); color: var(--bg); text-decoration: none; } - -/* ============================================================ - SECTION LABEL — uppercase eyebrow text - ============================================================ */ -.label { - display: block; - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.16em; - color: var(--meta); - border-bottom: 1px solid var(--fg); - padding-bottom: 0.5rem; - margin-bottom: 0; -} - -/* ============================================================ - INFO STRIP — homepage identity block - ============================================================ */ - - -/* ============================================================ - POST LIST — numbered, full outer width - ============================================================ */ -.post-list { - list-style: none; - counter-reset: posts; -} -.post-list-item { - counter-increment: posts; - display: grid; - grid-template-columns: 2.5rem 1fr 7rem; - align-items: baseline; - gap: 0 1rem; - padding: 0.75rem 0; - border-bottom: 1px solid var(--border-soft); -} -.post-list-item:first-child { border-top: 1px solid var(--border-soft); } -.post-list-item::before { - content: counter(posts, decimal-leading-zero); - font-family: var(--font-mono); - font-size: var(--text-xs); - color: var(--meta); - letter-spacing: 0.04em; - grid-column: 1; -} -.post-list-item a { - font-size: var(--text-sm); - justify-self: start; -} -.post-list-item time { - font-size: var(--text-xs); - font-family: var(--font-mono); - color: var(--meta); - text-align: right; - white-space: nowrap; - letter-spacing: 0.04em; -} - -/* Year separator — full-width label, resets counter display */ -.post-list-year { - display: block; - font-family: var(--font-sans); - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--meta); - padding: 1.5rem 0 0.4rem; - counter-increment: none; -} - -.all-posts-link { - display: inline-block; - margin-top: 1.5rem; - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.12em; -} - -/* ============================================================ - ARTICLE — post page - ============================================================ */ -.article-dateline { - font-family: var(--font-mono); - font-size: var(--text-xs); - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--meta); - margin-bottom: 0.35rem; -} - -.article-standfirst { - font-family: var(--font-serif); - font-size: 1.15rem; - line-height: 1.55; - color: var(--fg-soft); - padding: 1.25rem 0; - border-top: 1px solid var(--border-soft); - border-bottom: 1px solid var(--fg); - margin-top: 1rem; - max-width: var(--prose-w); -} - -.article-body { - font-family: var(--font-serif); - font-size: var(--text-body); - line-height: var(--lh-body); - max-width: var(--prose-w); - margin-top: 2.5rem; -} -.article-body p { margin-bottom: 1.3rem; } - -.reply-link { - max-width: var(--prose-w); - margin-top: 4rem; - padding-top: 1.5rem; - border-top: 1px solid var(--border-soft); - font-size: var(--text-xs); - font-family: var(--font-sans); - text-transform: uppercase; - letter-spacing: 0.12em; -} - -/* ============================================================ - GENERIC PAGE (about, uses, etc.) - ============================================================ */ -.page-body { - font-family: var(--font-serif); - font-size: var(--text-body); - line-height: var(--lh-body); - max-width: var(--prose-w); - margin-top: 2rem; -} -.page-body p { margin-bottom: 1.3rem; } - -/* ============================================================ - BLOG ARCHIVE - ============================================================ */ -.blog-meta { - font-size: var(--text-sm); - color: var(--meta); - margin: 0.75rem 0 2rem; -} -.blog-meta code { - font-size: var(--text-xs); - background: var(--code-bg); - padding: 0.1rem 0.35rem; - font-family: var(--font-mono); -} - -/* Year separators in post list */ -.post-list-year { - font-family: var(--font-serif); - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--meta); - padding: 1.25rem 0 0.5rem; - list-style: none; - grid-column: 1 / -1; -} - -/* Restore list styling inside content areas */ -.article-body ul, -.article-body ol, -.page-body ul, -.page-body ol { - padding-left: 1.5rem; - margin-bottom: 1.2rem; -} -.article-body li, -.page-body li { - margin-bottom: 0.3rem; -} -.article-body ul ul, -.article-body ol ol, -.page-body ul ul, -.page-body ol ol { - margin-bottom: 0; -} - -/* ============================================================ - GARDEN - ============================================================ */ -.garden-index { list-style: none; } -.garden-index li { - display: flex; - flex-direction: column; - gap: 0.15rem; - padding: 0.8rem 0; - border-bottom: 1px solid var(--border-soft); -} -.garden-index li:first-child { border-top: 1px solid var(--border-soft); } -.garden-index a { font-size: var(--text-sm); } -.garden-desc { font-size: var(--text-xs); color: var(--meta); } - -/* ============================================================ - APP CARDS - ============================================================ */ -.app-card { - display: flex; - gap: 1.25rem; - align-items: flex-start; - padding: 1.25rem 0; - border-bottom: 1px solid var(--border-soft); -} -.app-card:first-of-type { border-top: 1px solid var(--border-soft); } -.app-icon { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; filter: none !important; margin: 0; display: block; } -.app-card a:has(.app-icon):hover { background: none; } -.app-info { display: flex; flex-direction: column; gap: 0.2rem; } -.app-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); } -.app-subtitle { font-size: var(--text-xs); color: var(--meta); } -.app-links { font-size: var(--text-xs); margin-top: 0.3rem; } - -/* ============================================================ - CODE & PRE - ============================================================ */ -pre { - padding: 1.25rem; - border-left: 1px solid var(--border-soft); - background: var(--code-bg); - overflow-x: auto; - font-size: var(--text-sm); - margin: 1.75rem 0; - line-height: 1.6; -} -code { - font-family: var(--font-mono); - background: var(--code-bg); - padding: 0.15rem 0.4rem; - font-size: 0.875em; -} -pre code { background: none; padding: 0; font-size: inherit; } - -/* ============================================================ - BLOCKQUOTE — intentional Org-mode delimiters - ============================================================ */ -blockquote { - font-style: italic; - margin: 1.75rem 0; - padding: 0.75rem 1rem; - border-left: 1px solid var(--border-soft); - background: var(--code-bg); -} -blockquote p:last-child { margin-bottom: 0; } +body { max-width: 800px; margin: 0 auto; } +nav ul { list-style: none; padding: 0; display: flex; flex-direction: row; } +nav ul li { padding-right: 0.5rem;} +img { max-width: 100%; } +.post-list-item { display: flexbox; list-style: none; } +.post-list-item time { padding-right: 0.5rem; } +.post-list-year { list-style: none; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: bold; } +.skip-link { display: none; } +footer { margin: 2rem 0;} +pre, blockquote { margin: 1rem 0; padding: 0.5rem; background-color: lightgrey; } blockquote p { margin: 0; } -blockquote::before { - content: "#+begin_quote"; - display: block; - color: var(--meta); - font-style: normal; - font-size: var(--text-xs); - font-family: var(--font-mono); - letter-spacing: 0.04em; - margin-bottom: 0.5rem; -} -blockquote::after { - content: "#+end_quote"; - display: block; - color: var(--meta); - font-style: normal; - font-size: var(--text-xs); - font-family: var(--font-mono); - letter-spacing: 0.04em; - margin-top: 0.5rem; -} - -/* ============================================================ - TABLES - ============================================================ */ -table { - display: block; - width: 100%; - max-width: 100%; - overflow-x: auto; - border: none; - border-collapse: collapse; - margin: 2rem 0; -} - -table td, table th { - white-space: nowrap; - padding: 0.5rem 1rem; -} -th, td { - border-bottom: 1px solid var(--border-soft); - padding: 0.65rem 0.75rem; - text-align: left; - font-size: var(--text-sm); -} -th { - border-bottom: 1px solid var(--fg); - font-size: var(--text-xs); - text-transform: uppercase; - letter-spacing: 0.1em; - font-weight: 700; -} -tr:last-child td { border-bottom: none; } - -/* ============================================================ - IMAGES - ============================================================ */ -img { - max-width: 100%; - height: auto; - filter: grayscale(1); - transition: filter 0.25s; - display: block; - margin: 2rem 0; -} -img:hover { filter: grayscale(0); } - -/* ============================================================ - FOOTNOTES - ============================================================ */ -.footdef { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; } -.footpara { margin: 0; flex: 1; font-size: var(--text-sm); } -.footnum { - font-weight: 700; - min-width: 1.5rem; - text-align: right; - text-decoration: none; - font-size: var(--text-xs); - color: var(--meta); - font-family: var(--font-mono); -} - -/* ============================================================ - SKIP LINK - ============================================================ */ -.skip-link { - position: absolute; - top: -100px; - left: 50%; - transform: translateX(-50%); - background: var(--fg); - color: var(--bg); - padding: 0.75rem 1.5rem; - z-index: 999; - font-weight: 700; - font-size: var(--text-xs); - text-transform: uppercase; - letter-spacing: 0.12em; - text-decoration: none; - transition: top 0.2s; -} -.skip-link:focus { top: 0; outline: none; } -#main-content:focus { outline: none; } - -/* ============================================================ - RESPONSIVE - ============================================================ */ -@media (max-width: 700px) { - .masthead-title { font-size: clamp(3rem, 14vw, 5rem); } - .masthead nav ul { flex-wrap: wrap; } - .masthead nav li { flex: none; width: 50%; } - .masthead nav a { border-bottom: 1px solid var(--border-soft); } - .post-list-item { grid-template-columns: 2.25rem 1fr; } - .post-list-item time { display: none; } - .article-title { font-size: clamp(2rem, 9vw, 2.8rem); } -} - -@media (max-width: 480px) { - .masthead nav li { width: 33.333%; } -} - -/* Tags page */ -.tag-toc { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1.5rem; - list-style: none; - padding: 0; - margin: 0 0 3rem; -} -.tag-count { - color: var(--meta); - font-size: var(--text-xs); -} +code { color: darkred; }
\ No newline at end of file |