to opt in. + ===================================================================== */ +.prose { font-size: 19.5px; line-height: 1.68; color: var(--ink); } +.prose > :first-child { margin-top: 0; } +.prose p { margin: 0 0 1.3em; text-wrap: pretty; } +.prose h1 { + font-family: var(--serif); + font-size: 32px; line-height: 1.16; font-weight: 600; + letter-spacing: -0.018em; color: var(--ink); + margin: 0 0 0.5em; text-wrap: pretty; +} +.prose h2 { + font-family: var(--serif); + font-size: 25px; font-weight: 600; line-height: 1.25; + letter-spacing: -0.01em; + margin: 2em 0 0.6em; +} +.prose h3 { + font-family: var(--serif); + font-size: 21px; font-weight: 600; + margin: 1.7em 0 0.5em; +} +.prose a { + color: var(--ink); + text-decoration: underline; + text-decoration-color: var(--rule-2); + text-underline-offset: 2px; + text-decoration-thickness: 1px; +} +.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); } +.prose strong { font-weight: 600; } +.prose em { font-style: italic; } + +.prose blockquote { + margin: 1.6em 0; + padding-left: 22px; + border-left: 2px solid var(--rule-2); + color: var(--muted); + font-style: italic; +} +.prose blockquote p:last-child { margin-bottom: 0; } + +.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; } +.prose li { margin: 0.3em 0; padding-left: 0.2em; } +.prose li::marker { color: var(--faint); } + +.prose hr { + border: none; height: 0; + border-top: 1px solid var(--rule); + margin: 2.4em auto; + width: 40%; +} + +.prose code { + font-family: var(--mono); + font-size: 0.82em; + background: var(--field); + padding: 0.12em 0.4em; + border-radius: 4px; +} +.prose pre { + font-family: var(--mono); + font-size: 14px; line-height: 1.55; + background: var(--field); + padding: 18px 20px; + border-radius: 8px; + overflow-x: auto; + margin: 1.5em 0; +} +.prose pre code { background: none; padding: 0; font-size: inherit; } + +.prose figure { margin: 2em 0; } +.prose figure img { display: block; width: 100%; height: auto; border-radius: 3px; } +.prose figcaption { + font-family: var(--sans); + font-size: 12.5px; color: var(--faint); + margin-top: 10px; text-align: left; +} +.prose img { max-width: 100%; height: auto; } + +/* ===================================================================== + Mobile + ===================================================================== */ +@media (max-width: 640px) { + :root { --pad: 22px; --gutter: 74px; } + body { font-size: 17px; } + + .nav-links { display: none; } + .hamburger { display: inline-flex; } + + .mobile-menu { + display: none; + font-family: var(--sans); + } + .mobile-menu.open { + display: flex; flex-direction: column; + gap: 2px; + padding: 8px 0 14px; + border-bottom: 1px solid var(--rule); + } + .mobile-menu a, .mobile-menu button { + font-family: var(--sans); + text-align: left; + background: none; border: none; cursor: pointer; + color: var(--ink); + font-size: 16px; + padding: 12px 4px; + text-decoration: none; + border-radius: 6px; + } + .mobile-menu a:hover, .mobile-menu button:hover { color: var(--accent); } + .mobile-menu .row { display: flex; align-items: center; gap: 10px; } + + .prose { font-size: 18.5px; } + .prose h1 { font-size: 30px; } +} + +/* ===================================================================== + Icon swaps (theme toggle + hamburger), driven by [data-theme] / .is-open + ===================================================================== */ +.theme-toggle .ico-sun { display: none; } +.theme-toggle .ico-moon { display: block; } +:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } +:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; } + :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; } +} + +.hamburger .ico-close { display: none; } +.hamburger.is-open .ico-bars { display: none; } +.hamburger.is-open .ico-close { display: block; } + +/* reduce motion */ +@media (prefers-reduced-motion: reduce) { + * { transition: none !important; } +} diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..c3883d4 --- /dev/null +++ b/footer.html @@ -0,0 +1,9 @@ +{%- comment -%} + static-design-system — footer.html + Shared footer (chrome). Place inside a .shell. + Uses site.author, optional site.author_url (links the name), and optional + site.footer_years (e.g. "2025–2026"). +{%- endcomment -%} + diff --git a/head.html b/head.html new file mode 100644 index 0000000..ee9cf6d --- /dev/null +++ b/head.html @@ -0,0 +1,39 @@ +{%- comment -%} + static-design-system — head.html + Shared contents of . The consuming site wraps it: + {% include ds/head.html %} ...site-specific tags... + Expects site.title, site.description, site.author, site.url. + Loads the fonts, the shared CSS (/assets/ds.css), then the site's color + overrides (/assets/colors.css) — order matters — and inlines the pre-paint + theme script to avoid a flash. +{%- endcomment -%} + + + +{{ page.title | default: site.title }} + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nav.html b/nav.html new file mode 100644 index 0000000..03e02d8 --- /dev/null +++ b/nav.html @@ -0,0 +1,60 @@ +{%- comment -%} + static-design-system — nav.html + Data-driven top navigation + mobile menu (chrome). Place inside a .shell. + Links come from site.data.nav (a list of { title, url }). An RSS link is + shown only if site.rss_url is set. The theme toggle and hamburger are always + present; behavior is wired by /assets/ds.js (ds/theme-toggle.js). +{%- endcomment -%} + + + diff --git a/theme-init.js b/theme-init.js new file mode 100644 index 0000000..0305a6a --- /dev/null +++ b/theme-init.js @@ -0,0 +1,14 @@ +/* static-design-system — theme-init.js + Pre-paint: apply the stored [data-theme] before first paint so there is no + flash. This file is inlined into by ds/head.html (see head.html); it + must run before the stylesheet paints, so keep it tiny and synchronous. + NOTE: no Liquid delimiters allowed here (this content is passed through the + Jekyll include tag). Storage key must match theme-toggle.js. */ +(function () { + try { + var t = localStorage.getItem("bchen-theme"); + if (t === "light" || t === "dark") { + document.documentElement.setAttribute("data-theme", t); + } + } catch (e) {} +})(); diff --git a/theme-toggle.js b/theme-toggle.js new file mode 100644 index 0000000..90c2338 --- /dev/null +++ b/theme-toggle.js @@ -0,0 +1,36 @@ +/* static-design-system — theme-toggle.js + Shared chrome behavior: color-theme toggle + mobile (hamburger) menu. + Served to each site via a wrapper (assets/ds.js) and loaded at end of body. + Storage key must match ds/theme-init.js. */ +(function () { + "use strict"; + + var THEME_KEY = "bchen-theme"; + + function effectiveTheme() { + var set = document.documentElement.getAttribute("data-theme"); + if (set) return set; + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + } + + /* ---- theme toggle ---- */ + var toggleBtn = document.querySelector(".theme-toggle"); + if (toggleBtn) { + toggleBtn.addEventListener("click", function () { + var next = effectiveTheme() === "dark" ? "light" : "dark"; + document.documentElement.setAttribute("data-theme", next); + try { localStorage.setItem(THEME_KEY, next); } catch (e) {} + }); + } + + /* ---- mobile menu ---- */ + var hamburger = document.querySelector(".hamburger"); + var mobileMenu = document.querySelector(".mobile-menu"); + if (hamburger && mobileMenu) { + hamburger.addEventListener("click", function () { + var open = mobileMenu.classList.toggle("open"); + hamburger.classList.toggle("is-open", open); + hamburger.setAttribute("aria-expanded", open ? "true" : "false"); + }); + } +})();