From 82813556f20270eae1d0e9a87d9cedf9e76d5834 Mon Sep 17 00:00:00 2001 From: Zaine Date: Thu, 7 May 2026 10:25:48 +0100 Subject: [PATCH] cleanup --- assets/styles/media.css | 65 ++++++++++----- assets/styles/misc.css | 117 ++++++++++++++------------- assets/styles/style.css | 172 +++++++++++++++++++++++++++++++++++++--- assets/styles/zhd.css | 0 build-site.el | 26 +++--- posts/posts-list.org | 2 +- 6 files changed, 283 insertions(+), 99 deletions(-) mode change 100644 => 100755 assets/styles/zhd.css diff --git a/assets/styles/media.css b/assets/styles/media.css index ac30e08..fbf652d 100755 --- a/assets/styles/media.css +++ b/assets/styles/media.css @@ -1,25 +1,40 @@ @media (max-width: 600px){ - .banner-header{ flex-direction: column; align-items: center; text-align: center; } - .banner-logo{ margin: 0 0 .5rem 0; } - nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; } - - - .theme-toggle { - position: static; - order: 2; - margin-left: .5rem; - padding: .3rem .6rem; - background: transparent; - } - .banner-header { - flex-wrap: wrap; + align-items: stretch; + gap: 0.7rem; + margin-top: 0.75rem; + } + + .site-brand { justify-content: center; } - .banner-header nav { + + .site-nav { display: flex; align-items: center; flex-wrap: wrap; + justify-content: center; + width: 100%; + gap: 0.2rem; + font-size: 0.92rem; + } + + .site-nav a { + padding: 0.42rem 0.55rem; + } + + .site-actions { + width: 100%; + flex: 1 1 100%; + justify-content: center; + } + + .site-search { + display: none; + } + + #updated { + text-align: center; } body.no-sidenotes { @@ -42,12 +57,15 @@ --note-color: #c2c7cf; --note-bg: transparent; - - --border: #2a2f3a; - --chip-bg: #1f2330; - --chip-fg: #cfd3da; - --muted: #a9b0bb; - } + + --border: #2a2f3a; + --chip-bg: #1f2330; + --chip-fg: #cfd3da; + --muted: #a9b0bb; + --surface: #151820; + --surface-soft: #1b202a; + --accent: #8ab4ff; + } .countdown-wrap { color: var(--fg, #ddd); } @@ -62,6 +80,11 @@ } @media (max-width: 1250px){ + :root { + --content-min: 0px; + --content: min(var(--content-max), calc(100vi - 2 * var(--body-pad))); + } + #preamble.status{ padding-right: var(--body-pad); } diff --git a/assets/styles/misc.css b/assets/styles/misc.css index c499337..4d1e050 100755 --- a/assets/styles/misc.css +++ b/assets/styles/misc.css @@ -1,7 +1,9 @@ #updated{ - font-size: .8rem; color: var(--fg); - margin: .5rem 0 1rem; font-style: italic; + font-size: .76rem; + color: var(--muted); + margin: .45rem 0 0; + text-align: right; } .sidenote, @@ -85,17 +87,23 @@ body{ counter-reset: sidenote-counter; } } -.post-date{ color: pink; font-size: .9em; margin-left: 8px; } +.post-date{ + color: var(--muted); + font-size: .86em; + margin-left: 8px; +} .post-tag{ float: right; display: inline-block; - background-color: #f0f0f0; - color: #444; - border-radius: 5px; - padding: 2px 6px; + background-color: var(--chip-bg); + color: var(--chip-fg); + border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); + border-radius: 999px; + padding: 0.08rem 0.5rem; margin-left: 6px; font-size: 0.8em; + line-height: 1.7; } .filetags { @@ -109,46 +117,49 @@ body{ counter-reset: sidenote-counter; } .filetags .tag { display: inline-block; padding: .1rem .45rem; - border-radius: .5rem; - background: #f0f0f0; + border-radius: 999px; + background: var(--chip-bg); + color: var(--chip-fg); + border: 1px solid color-mix(in oklab, var(--border) 78%, transparent); line-height: 1.6; } .figure figcaption{ color: var(--muted); } -.post-tag{ - background-color: var(--chip-bg); - color: var(--chip-fg); -} - .org-src-container{ border: 1px solid var(--border); - box-shadow: 3px 3px 3px rgba(0,0,0,.15); + border-radius: 8px; + box-shadow: none; + overflow: hidden; + background: var(--code-bg); } :not(pre) > code{ border: 1px solid var(--border); background-color: var(--code-bg); color: var(--fg); + border-radius: 5px; + padding: 0.05rem 0.28rem; } .theme-toggle { - position: fixed; - top: 0.75rem; - right: 1rem; - z-index: 1000; - border: 1px solid var(--border, #ccc); - background: transparent; + border: 1px solid var(--border); + background: color-mix(in oklab, var(--surface-soft) 82%, transparent); color: var(--fg); - padding: .35rem .7rem; - border-radius: 6px; + min-height: 2.25rem; + padding: 0 0.75rem; + border-radius: 7px; cursor: pointer; font: inherit; - transition: background-color 0.3s, color 0.3s, border-color 0.3s; + font-size: 0.9rem; + font-weight: 750; + transition: background-color 0.2s, color 0.2s, border-color 0.2s; } -.theme-toggle:hover { - background-color: rgba(0,0,0,0.05); +.theme-toggle:hover, +.theme-toggle:focus-visible { + background-color: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--heading); - border-color: var(--heading); + border-color: color-mix(in oklab, var(--accent) 42%, var(--border)); + outline: 0; } .web-logo { @@ -225,44 +236,42 @@ time.countdown.expired { text-decoration: line-through; } -/* Make nav a flex container */ -nav { - display: flex; - align-items: center; - gap: 0.5rem; -} - /* SEARCH */ -#search-input, -#search-btn { - margin-left: auto; -} - #search-input { - width: 12rem; - padding: 0.3rem 0.5rem; + width: 100%; + min-height: 2.25rem; + padding: 0.35rem 0.7rem; font-size: 0.9rem; - border: 1px solid var(--border-color, #ccc); - border-radius: 4px; + border: 1px solid var(--border); + border-radius: 7px; font-family: var(--font-body); - font-weight: 300; - background-color: var(--kb-card-bg); + font-weight: 450; + background-color: var(--surface); color: var(--fg); - } /* Button styling */ #search-btn { - margin-left: 0; - background: none; - border: none; + display: inline-grid; + place-items: center; + flex: 0 0 2.25rem; + width: 2.25rem; + height: 2.25rem; + background: color-mix(in oklab, var(--surface-soft) 82%, transparent); + border: 1px solid var(--border); + border-radius: 7px; + color: var(--fg); cursor: pointer; - font-size: 1.1rem; + font-size: 0.95rem; + line-height: 1; } /* Focus state */ -#search-input:focus { - outline: 2px solid var(--accent-color, #5b8cff); +#search-input:focus, +#search-btn:focus-visible { + outline: 0; + border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); + box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent); } @media (max-width: 700px) { #search-input { @@ -270,8 +279,7 @@ nav { } #search-btn { - font-size: 1.4rem; - padding: 0.2rem; + font-size: 1rem; } } #search-results { @@ -419,4 +427,3 @@ h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; } background-color: var(--active-toc); /* border: 1px solid var(--border, #ccc); */ } - diff --git a/assets/styles/style.css b/assets/styles/style.css index 2f33213..3131913 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -15,6 +15,9 @@ --fg: #000000; --link: #1a0dab; --heading: #004c99; + --surface: #ffffff; + --surface-soft: #f3f1eb; + --accent: #2563eb; --code-bg: #f0f0f0; --active-toc: #cacaca; --note-color: #555; @@ -41,6 +44,9 @@ --fg: #e6e6e6; --link: #8ab4ff; --heading: #9ecbff; + --surface: #151820; + --surface-soft: #1b202a; + --accent: #8ab4ff; --code-bg: #1a1d24; --note-color: #c2c7cf; @@ -75,13 +81,43 @@ html, body{ transition: background-color .3s, color .3s; margin: 0; font-family: 'Noto', system-ui, sans-serif; + line-height: 1.65; } -h1, h2, h3{ color: var(--heading); } +body { + min-height: 100vh; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +::selection { + background: color-mix(in oklab, var(--accent) 24%, transparent); +} + +h1, h2, h3{ + color: var(--heading); + line-height: 1.18; + letter-spacing: 0; +} + +h1 { + margin-top: 2.25rem; + margin-bottom: 1rem; + font-size: clamp(2rem, 4vw, 3.4rem); +} + +h2 { + margin-top: 2.2rem; +} + +p { + margin: 0 0 1.15rem; +} a { color: var(--link); text-decoration: none; + text-underline-offset: 0.18em; } a:hover { @@ -91,20 +127,91 @@ a:hover { .banner-header{ display: flex; align-items: center; - justify-content: flex-start; + justify-content: space-between; flex-wrap: wrap; - padding: .5rem 1rem; - border-radius: 6px; + gap: 0.85rem; + padding: 0.7rem; + margin-top: 1rem; + border: 1px solid var(--border); + border-radius: 8px; + background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%); + box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent); +} + +.site-brand { + display: inline-flex; + align-items: center; + gap: 0.7rem; + color: var(--fg); + font-weight: 800; + white-space: nowrap; +} + +.site-brand:hover { + text-decoration: none; + color: var(--heading); +} + +.site-brand__text { + font-size: 0.98rem; } .banner-logo{ - height: 80px; width: auto; - margin-right: 1.5rem; border-radius: 50%; + height: 42px; + width: 42px; + object-fit: cover; + border-radius: 50%; + border: 1px solid color-mix(in oklab, var(--border) 80%, transparent); } -nav{ - display: flex; gap: 1rem; - font-weight: 600; font-size: 1.1rem; +.site-nav { + display: flex; + align-items: center; + justify-content: center; + flex: 1 1 auto; + gap: 0.25rem; + font-weight: 700; + font-size: 0.95rem; +} + +.site-nav a { + color: var(--muted); + padding: 0.45rem 0.65rem; + border-radius: 7px; +} + +.site-nav a:hover, +.site-nav a:focus-visible { + color: var(--fg); + background: color-mix(in oklab, var(--fg) 7%, transparent); + text-decoration: none; + outline: 0; +} + +.site-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.4rem; + flex: 0 1 23rem; +} + +.site-search { + display: block; + flex: 1 1 13rem; + min-width: 10rem; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } #preamble.status{ @@ -113,6 +220,7 @@ nav{ margin-right: auto; padding-left: var(--body-pad); padding-right: var(--body-pad); + padding-top: 0.25rem; box-sizing: content-box; } @@ -124,10 +232,12 @@ nav{ footer{ - color: var(--fg); - padding: 1rem; margin-top: 2rem; - border-radius: 6px; text-align: center; - font-size: .9rem; font-style: italic; + color: var(--muted); + padding: 1.25rem; + margin-top: 3rem; + border-top: 1px solid var(--border); + text-align: center; + font-size: .9rem; } #content.content{ @@ -138,6 +248,7 @@ footer{ padding-right: var(--body-pad); box-sizing: content-box; position: relative; + padding-top: 1.5rem; } @@ -145,6 +256,41 @@ footer{ #content img:not(.fullwidth){ max-width: 100%; height: auto; + border-radius: 8px; +} + +hr { + border: 0; + border-top: 1px solid var(--border); + margin: 2rem 0; +} + +table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; + overflow: hidden; +} + +th, +td { + border-bottom: 1px solid var(--border); + padding: 0.65rem 0.75rem; + text-align: left; +} + +th { + color: var(--heading); + background: color-mix(in oklab, var(--surface-soft) 80%, transparent); +} + +blockquote { + margin: 1.5rem 0; + padding: 0.9rem 1.1rem; + border-left: 4px solid var(--heading); + background: color-mix(in oklab, var(--surface-soft) 72%, transparent); + border-radius: 0 8px 8px 0; + color: color-mix(in oklab, var(--fg) 84%, var(--muted) 16%); } diff --git a/assets/styles/zhd.css b/assets/styles/zhd.css old mode 100644 new mode 100755 diff --git a/build-site.el b/build-site.el index 02a021c..473bf4e 100644 --- a/build-site.el +++ b/build-site.el @@ -239,17 +239,25 @@ FMT / ARGS are passed to `format'." ;; ───────────────────────────────────────────────────────────────────────────── (defvar z/preamble - "
- \"Site -