diff options
| -rw-r--r-- | layout.html | 228 | ||||
| -rw-r--r-- | themes/modern-light.css | 421 |
2 files changed, 552 insertions, 97 deletions
diff --git a/layout.html b/layout.html index 5825099..68772ef 100644 --- a/layout.html +++ b/layout.html @@ -5,7 +5,6 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="{{ .Title }}" /> <title>{{ .Title }}</title> - <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link @@ -14,11 +13,232 @@ /> <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js"></script> + <link rel="stylesheet" href="../style.css" /> + <style> + .toc { + position: static !important; + width: auto !important; + right: auto !important; + top: auto !important; + background: var(--bg-subtle) !important; + border: 1px solid var(--border) !important; + padding: 1.2rem 1.4rem !important; + margin: 0 0 3rem !important; + } - <link rel="stylesheet" href="../themes/tufte.css" /> - </head> + .toc-title { + margin: 0 0 0.8rem !important; + font-size: 0.65rem !important; + line-height: 1 !important; + display: block; + } + + .toc ul { + display: block; + margin: 0; + padding: 0; + } + + .toc li { + display: block; + padding-left: 0 !important; + margin: 0.25rem 0 !important; + } + + .toc li::before { + display: none !important; + } + + .toc a.active { + color: var(--text); + font-weight: 500; + } + + .toc-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + background: none; + border: none; + padding: 0; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 0.8rem; + width: 100%; + text-align: left; + } + + .toc-toggle svg { + transition: transform 140ms ease; + flex-shrink: 0; + } + + .toc-toggle[aria-expanded="false"] svg { + transform: rotate(-90deg); + } + + .toc-body { + overflow: hidden; + transition: + max-height 240ms ease, + opacity 200ms ease; + max-height: 800px; + opacity: 1; + } + + .toc-body.collapsed { + max-height: 0; + opacity: 0; + } + + @media (max-width: 699px) { + .toc-title { + display: none; + } + .toc-toggle { + display: flex; + } + .toc-body { + } + } + + @media (min-width: 700px) { + .toc-toggle { + display: none; + } + .toc-title { + display: block; + } + .toc-body { + max-height: none !important; + opacity: 1 !important; + } + } + + @media (min-width: 1100px) { + .toc { + position: fixed !important; + top: 6rem !important; + left: max(2rem, calc((100vw - 680px) / 2 - 220px)) !important; + width: 200px !important; + background: transparent !important; + border: none !important; + padding: 0 !important; + margin: 0 !important; + } + .toc-toggle { + display: none; + } + .toc-title { + display: block; + } + .toc-body { + max-height: none !important; + opacity: 1 !important; + } + + .toc-level-2 { + margin-left: 0.8rem !important; + } + .toc-level-3 { + margin-left: 1.4rem !important; + } + .toc-level-4 { + margin-left: 2rem !important; + } + } + </style> + </head> <body> - <main class="article">{{ .Content }}</main> + <main class="article"> + <nav class="toc" aria-label="Table of contents"> + <button + class="toc-toggle" + aria-expanded="false" + aria-controls="toc-body" + > + <svg + width="10" + height="10" + viewBox="0 0 10 10" + fill="none" + aria-hidden="true" + > + <path + d="M2 3.5L5 6.5L8 3.5" + stroke="currentColor" + stroke-width="1.4" + stroke-linecap="round" + stroke-linejoin="round" + /> + </svg> + Contents + </button> + + <p class="toc-title" aria-hidden="true">Contents</p> + + <div class="toc-body collapsed" id="toc-body"> + <ul> + {{ range .TOC }} + <li class="toc-level-{{ .Level }}"> + <a href="#{{ .ID }}">{{ .Text }}</a> + </li> + {{ end }} + </ul> + </div> + </nav> + + <h1>{{ .Title }}</h1> + {{ .Content }} + </main> + + <script> + const toggle = document.querySelector(".toc-toggle"); + const body = document.getElementById("toc-body"); + + if (toggle && body) { + toggle.addEventListener("click", () => { + const expanded = toggle.getAttribute("aria-expanded") === "true"; + toggle.setAttribute("aria-expanded", String(!expanded)); + body.classList.toggle("collapsed", expanded); + }); + } + + const tocLinks = document.querySelectorAll(".toc a"); + + if (tocLinks.length > 0) { + const headingIDs = Array.from(tocLinks).map((a) => + decodeURIComponent(a.getAttribute("href").slice(1)), + ); + const headings = headingIDs + .map((id) => document.getElementById(id)) + .filter(Boolean); + + let current = null; + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + current = entry.target.id; + } + }); + + tocLinks.forEach((a) => { + const id = decodeURIComponent(a.getAttribute("href").slice(1)); + a.classList.toggle("active", id === current); + }); + }, + { rootMargin: "0px 0px -70% 0px", threshold: 0 }, + ); + + headings.forEach((h) => observer.observe(h)); + } + </script> </body> </html> diff --git a/themes/modern-light.css b/themes/modern-light.css index 7752929..73e6d44 100644 --- a/themes/modern-light.css +++ b/themes/modern-light.css @@ -1,6 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Epilogue:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap"); -/* ─── Design Tokens ─────────────────────────────────────── */ :root { --bg: #fafaf8; --bg-subtle: #f4f4f1; @@ -10,30 +9,30 @@ --text: #1a1a18; --text-dim: #6b6b66; --text-muted: #b0b0aa; - --accent: #1a1a18; /* ink — no color accent, just weight */ - --accent-warm: #c85a2a; /* terracotta for single-use sparingly */ + --accent: #1a1a18; + --accent-warm: #c85a2a; --serif: "Lora", Georgia, serif; --sans: "Epilogue", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 3px; - --max-w: 740px; + --max-w: 680px; --transition: 140ms ease; } -/* ─── Reset & Base ──────────────────────────────────────── */ +/* ─── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } - html { scroll-behavior: smooth; } +/* ─── Body ───────────────────────────────────────────────── */ body { margin: 0; - padding: 3.5rem 2rem 6rem; + padding: 0; background: var(--bg); color: var(--text); font-family: var(--serif); @@ -43,13 +42,153 @@ body { text-rendering: optimizeLegibility; } +/* ─── Layout containers ──────────────────────────────────── */ +/* Direct body children (blog-style layout) */ body > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; +} + +/* main.article: self-contained page wrapper */ +main.article { + max-width: var(--max-w); + margin-left: auto; + margin-right: auto; + padding: 3.5rem 2rem 6rem; +} + +/* Progress bar must span full width */ +.progress-bar { + position: fixed; + top: 0; + left: 0; + height: 1px; + background: var(--text); + z-index: 999; + width: 0%; + transition: width 0.1s linear; + /* override the body > * rule */ + max-width: 100vw !important; + padding: 0 !important; +} + +/* ─── Navigation ─────────────────────────────────────────── */ +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 1.4rem; + padding-bottom: 1.4rem; + border-bottom: 1px solid var(--border); + margin-bottom: 3.5rem; + flex-wrap: wrap; + gap: 0.8rem; +} + +/* nav inside main.article: remove inherited x-padding */ +main.article nav { + padding-left: 0; + padding-right: 0; + max-width: none; + margin-left: 0; + margin-right: 0; +} + +nav .logo { + font-family: var(--sans); + font-weight: 800; + font-size: 1rem; + letter-spacing: -0.02em; + color: var(--text); + text-decoration: none; +} + +nav ul { + display: flex; + gap: 2rem; + margin: 0; + padding: 0; + list-style: none; +} + +nav ul li { + padding: 0; + margin: 0; +} +nav ul li::before { + display: none; +} + +nav a { + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-muted); + text-decoration: none; + transition: color var(--transition); +} + +nav a:hover { + color: var(--text); +} + +/* ─── Page header (name + tagline) ──────────────────────── */ +.site-header { + padding-bottom: 2.5rem; + border-bottom: 1px solid var(--border); + margin-bottom: 3rem; +} + +.site-header h1 { + font-size: clamp(2rem, 5vw, 2.6rem); + font-weight: 800; + margin: 0 0 0.35rem; + letter-spacing: -0.03em; + line-height: 1.08; +} + +.site-header .role { + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.09em; + text-transform: uppercase; + color: var(--text-muted); + margin: 0 0 1.1rem; +} + +.site-header .intro { + font-size: 1.02rem; + color: var(--text-dim); + line-height: 1.78; + margin: 0; + max-width: 500px; } -/* ─── Headings ──────────────────────────────────────────── */ +/* ─── Section label ──────────────────────────────────────── */ +.section-label { + font-family: var(--mono); + font-size: 0.67rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); + margin: 0 0 1.4rem; + display: flex; + align-items: center; + gap: 0.7rem; +} + +.section-label::after { + content: ""; + flex: 1; + height: 1px; + background: var(--border); +} + +/* ─── Headings ───────────────────────────────────────────── */ h1, h2, h3, @@ -70,33 +209,35 @@ h1 { } h2 { - font-size: 1.35rem; + font-size: 1.1rem; font-weight: 700; - margin-top: 3.5rem; - margin-bottom: 0.5rem; + margin-top: 2.8rem; + margin-bottom: 0.35rem; } h3 { - font-size: 1.1rem; + font-size: 0.95rem; font-weight: 600; - margin-top: 2.2rem; + margin-top: 1.8rem; + margin-bottom: 0.2rem; } -/* ─── Paragraphs ────────────────────────────────────────── */ +/* ─── Paragraphs ─────────────────────────────────────────── */ p { - margin: 1.3rem 0; + margin: 1rem 0; color: #2c2c28; + font-size: 0.96rem; + line-height: 1.82; } -/* First paragraph after h1 — slightly larger lead */ h1 + p, header + article > p:first-child { - font-size: 1.08rem; + font-size: 1.05rem; color: #3a3a36; line-height: 1.85; } -/* ─── Article Meta ──────────────────────────────────────── */ +/* ─── Article Meta ───────────────────────────────────────── */ .meta, time, .byline { @@ -109,7 +250,7 @@ time, margin-bottom: 2.8rem; } -/* ─── Links ─────────────────────────────────────────────── */ +/* ─── Links ──────────────────────────────────────────────── */ a { color: inherit; text-decoration-line: underline; @@ -125,10 +266,77 @@ a:hover { text-decoration-color: var(--text); } -/* ─── Lists ─────────────────────────────────────────────── */ +/* ─── Project cards ──────────────────────────────────────── */ +.project { + padding: 1.1rem 0; + border-bottom: 1px solid var(--border); +} + +.project:last-of-type { + border-bottom: none; +} + +.project h3 { + margin: 0 0 0.25rem; + font-size: 0.93rem; + font-weight: 600; +} + +.project p { + margin: 0 0 0.5rem; + color: var(--text-dim); + font-size: 0.87rem; + line-height: 1.65; +} + +.project-meta { + display: flex; + gap: 0.45rem; + flex-wrap: wrap; + align-items: center; + margin-top: 0.5rem; +} + +.pill { + display: inline-block; + font-family: var(--mono); + font-size: 0.61rem; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 0.16rem 0.5rem; + background: var(--bg-subtle); + border: 1px solid var(--border); + border-radius: 100px; + color: var(--text-muted); + text-decoration: none; +} + +.project-link { + font-family: var(--mono); + font-size: 0.67rem; + letter-spacing: 0.05em; + color: var(--text-dim); + text-decoration: none; + border-bottom: 1px solid var(--border); + padding-bottom: 1px; + transition: + color var(--transition), + border-color var(--transition); + margin-left: auto; + white-space: nowrap; +} + +.project-link:hover { + color: var(--accent-warm); + border-color: var(--accent-warm); + text-decoration: none; + text-decoration-color: transparent; +} + +/* ─── Lists ──────────────────────────────────────────────── */ ul, ol { - margin: 1.3rem 0; + margin: 1rem 0; padding-left: 0; list-style: none; } @@ -137,8 +345,9 @@ ul li, ol li { position: relative; padding-left: 1.4rem; - margin: 0.5rem 0; + margin: 0.4rem 0; color: #2c2c28; + font-size: 0.96rem; } ul li::before { @@ -153,7 +362,6 @@ ul li::before { ol { counter-reset: ol-counter; } - ol li { counter-increment: ol-counter; } @@ -168,22 +376,21 @@ ol li::before { top: 0.3em; } -/* ─── Horizontal Rule ───────────────────────────────────── */ +/* ─── Horizontal Rule ────────────────────────────────────── */ hr { border: none; - margin: 3.5rem auto; + margin: 2.8rem auto; width: 3rem; height: 1px; background: var(--text); - opacity: 0.2; + opacity: 0.15; } -/* ─── Blockquote ────────────────────────────────────────── */ +/* ─── Blockquote ─────────────────────────────────────────── */ blockquote { margin: 2.5rem 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--text); - position: relative; } blockquote p { @@ -204,7 +411,7 @@ blockquote cite { font-style: normal; } -/* ─── Tables ────────────────────────────────────────────── */ +/* ─── Tables ─────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; @@ -238,7 +445,7 @@ tr:last-child td { border-bottom: none; } -/* ─── Inline Code ───────────────────────────────────────── */ +/* ─── Inline Code ────────────────────────────────────────── */ code { font-family: var(--mono); font-size: 0.82rem; @@ -250,14 +457,14 @@ code { word-break: break-word; } -/* ─── Code Blocks ───────────────────────────────────────── */ +/* ─── Code Blocks ────────────────────────────────────────── */ pre { background: var(--bg-subtle); border: 1px solid var(--border); padding: 1.3rem 1.5rem; overflow-x: auto; border-radius: var(--radius); - margin: 2rem 0; + margin: 1.8rem 0; position: relative; } @@ -282,7 +489,60 @@ pre code { line-height: 1.7; } -/* ─── Images ────────────────────────────────────────────── */ +/* ─── Prism.js overrides ─────────────────────────────────── */ +pre[class*="language-"], +code[class*="language-"] { + font-family: var(--mono) !important; + font-size: 0.85rem !important; + background: var(--bg-subtle) !important; + color: #2c2c28 !important; + text-shadow: none !important; +} + +pre[class*="language-"] { + border: 1px solid var(--border) !important; + border-radius: var(--radius) !important; + padding: 1.3rem 1.5rem !important; + margin: 1.8rem 0 !important; + box-shadow: none !important; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--text-muted); + font-style: italic; +} +.token.keyword { + color: var(--text); + font-weight: 600; +} +.token.string { + color: var(--accent-warm); +} +.token.function { + color: #2c2c28; + font-style: italic; +} +.token.number, +.token.boolean { + color: var(--text-dim); +} +.token.operator, +.token.punctuation { + color: var(--text-muted); +} +.token.class-name, +.token.builtin { + color: var(--text); + font-weight: 600; +} +.token.property { + color: var(--text-dim); +} + +/* ─── Images ─────────────────────────────────────────────── */ img { max-width: 100%; height: auto; @@ -304,7 +564,7 @@ figcaption { letter-spacing: 0.04em; } -/* ─── Aside / Callout ───────────────────────────────────── */ +/* ─── Aside / Callout ────────────────────────────────────── */ aside, .note, .callout { @@ -312,7 +572,7 @@ aside, border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; - margin: 2rem 0; + margin: 1.8rem 0; font-size: 0.9rem; color: var(--text-dim); } @@ -328,54 +588,26 @@ aside strong, margin-bottom: 0.35rem; } -/* ─── Navigation ─────────────────────────────────────────── */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 0 3rem; - border-bottom: 1px solid var(--border); - margin-bottom: 3.5rem; -} - -nav .logo { - font-family: var(--sans); - font-weight: 800; - font-size: 1rem; - letter-spacing: -0.02em; - color: var(--text); - text-decoration: none; -} - -nav ul { - display: flex; - gap: 2rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} - -nav ul li::before { - display: none; -} - -nav a { +/* ─── Tags ───────────────────────────────────────────────── */ +.tag { + display: inline-block; font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.07em; + font-size: 0.65rem; + letter-spacing: 0.08em; text-transform: uppercase; - color: var(--text-muted); + padding: 0.22rem 0.55rem; + border: 1px solid var(--border); + border-radius: 2px; + color: var(--text-dim); + margin-right: 0.35rem; text-decoration: none; - transition: color var(--transition); + transition: all var(--transition); } -nav a:hover { - color: var(--text); +.tag:hover { + background: var(--text); + color: var(--bg); + border-color: var(--text); } /* ─── Footer ─────────────────────────────────────────────── */ @@ -394,16 +626,10 @@ footer { gap: 1rem; } -/* ─── Reading Progress ───────────────────────────────────── */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 1px; - background: var(--text); - z-index: 999; - width: 0%; - transition: width 0.1s linear; +main.article footer { + padding-left: 0; + padding-right: 0; + max-width: none; } /* ─── Selection ──────────────────────────────────────────── */ @@ -437,18 +663,20 @@ abbr[title] { /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 700px) { - body { + main.article { padding: 2rem 1.3rem 4rem; font-size: 17px; } - + body > * { + padding-left: 1.3rem; + padding-right: 1.3rem; + } h1 { font-size: 1.85rem; } h2 { - font-size: 1.2rem; + font-size: 1rem; } - nav ul { gap: 1.2rem; } @@ -460,9 +688,16 @@ abbr[title] { flex-direction: column; text-align: center; } + .project-meta { + flex-direction: column; + align-items: flex-start; + } + .project-link { + margin-left: 0; + } } -/* ─── Focus Accessibility ─────────────────────────────────── */ +/* ─── Focus Accessibility ────────────────────────────────── */ :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; |