diff options
Diffstat (limited to 'output')
| -rw-r--r-- | output/1/index.html | 283 | ||||
| -rw-r--r-- | output/2/index.html | 239 | ||||
| -rw-r--r-- | output/index.html | 364 | ||||
| -rw-r--r-- | output/style.css | 705 |
4 files changed, 1591 insertions, 0 deletions
diff --git a/output/1/index.html b/output/1/index.html new file mode 100644 index 0000000..0d04be8 --- /dev/null +++ b/output/1/index.html @@ -0,0 +1,283 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="description" content="Writing a static site generator for fun and profit" /> + <title>Writing a static site generator for fun and profit</title> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" + rel="stylesheet" + /> + <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; + } + + .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"> + <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> + + <div class="toc-body collapsed" id="toc-body"> + <ul> + + <li class="toc-level-2"> + <a href="#how-an-ssg-works">How an SSG works</a> + </li> + + <li class="toc-level-2"> + <a href="#parsing-frontmatter">Parsing Frontmatter</a> + </li> + + </ul> + </div> + </nav> + + <h1>Writing a static site generator for fun and profit</h1> + <p>Tired of bloated Next.js projects taking up 100MBs of RAM on my VPS, I decided +to shift my personal site to a more minimal framework. Remembering <a href="https://www.youtube.com/@LukeSmithxyz">Luke +Smith</a>’s old video about Hugo, I decided +to give it a try. I was thinking of writing my own Hugo Theme when I had the +“bright” idea of writing my very own static site generator instead.</p> + +<blockquote> +<p>Enter <strong>Kite</strong></p> +</blockquote> + +<h2 id="how-an-ssg-works">How an SSG works</h2> + +<p>A static site generator takes in a directory full of markdown files and +converts them plain-old HTML files while maintaining a theme. For my use-case, +since I mainly wanted a blog, the most important page would be the <strong>post</strong> +page.</p> + +<p>The Page struct can therefore be defined as:</p> + +<pre><code class="language-go">type Page struct { + Title string + Content template.HTML + TOC []TOCItem +} +</code></pre> + +<h2 id="parsing-frontmatter">Parsing Frontmatter</h2> + +<p>Frontmatter is the small YAML-like block at the top of each markdown file +containing info such as the post title, it’s date, tags etc.</p> + +<pre><code class="language-go">type Frontmatter struct { + Title string `yaml:"title"` + Date string `yaml:"date"` + Tags []string `yaml:"tags"` +} +</code></pre> + + </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/output/2/index.html b/output/2/index.html new file mode 100644 index 0000000..67af3ba --- /dev/null +++ b/output/2/index.html @@ -0,0 +1,239 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="description" content="Kite Devlog Adding Live Reload" /> + <title>Kite Devlog Adding Live Reload</title> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" + rel="stylesheet" + /> + <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; + } + + .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"> + <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> + + <div class="toc-body collapsed" id="toc-body"> + <ul> + + </ul> + </div> + </nav> + + <h1>Kite Devlog Adding Live Reload</h1> + <p>I decided to write my own Live Reload to work with <a href="https://github.com/HimanshuSardana/kite">Kite</a>.</p> + + </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/output/index.html b/output/index.html new file mode 100644 index 0000000..218b7bb --- /dev/null +++ b/output/index.html @@ -0,0 +1,364 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>himanshu.co</title> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500&family=Geist+Mono:wght@400;500&display=swap" + rel="stylesheet" + /> + <style> + :root { + --bg: #f9f8f6; + --surface: #ffffff; + --border: #e4e3df; + --text: #111110; + --text-2: #5c5b57; + --text-3: #a8a7a2; + --warm: #b85c38; + --serif: "Instrument Serif", Georgia, serif; + --sans: "Geist", system-ui, sans-serif; + --mono: "Geist Mono", ui-monospace, monospace; + --ease: cubic-bezier(0.16, 1, 0.3, 1); + } + + *, + *::before, + *::after { + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + margin: 0; + background: var(--bg); + color: var(--text); + font-family: var(--sans); + -webkit-font-smoothing: antialiased; + min-height: 100vh; + } + + + .page { + max-width: 640px; + margin: 0 auto; + padding: 0 2rem; + } + + + nav { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 2rem 0 0; + gap: 2rem; + } + + nav a { + font-family: var(--mono); + font-size: 0.68rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-3); + text-decoration: none; + transition: color 120ms ease; + } + + nav a:hover { + color: var(--text); + } + + + .hero { + padding: 5rem 0 4rem; + border-bottom: 1px solid var(--border); + } + + .hero-name { + font-family: var(--serif); + font-size: clamp(2.8rem, 8vw, 4.5rem); + font-weight: 400; + line-height: 1.05; + letter-spacing: -0.01em; + margin: 0 0 1.2rem; + color: var(--text); + animation: fadeUp 0.7s var(--ease) both; + } + + .hero-name em { + font-style: italic; + color: var(--text-2); + } + + .hero-role { + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-3); + margin: 0 0 1.4rem; + animation: fadeUp 0.7s 0.08s var(--ease) both; + } + + .hero-bio { + font-size: 0.975rem; + line-height: 1.8; + color: var(--text-2); + margin: 0; + max-width: 420px; + animation: fadeUp 0.7s 0.15s var(--ease) both; + } + + + .writing-header { + display: flex; + align-items: center; + gap: 1rem; + padding: 2.8rem 0 1.6rem; + } + + .writing-label { + font-family: var(--mono); + font-size: 0.64rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--text-3); + white-space: nowrap; + } + + .writing-rule { + flex: 1; + height: 1px; + background: var(--border); + } + + + .post-list { + margin: 0; + padding: 0; + list-style: none; + } + + .post-list li { + padding: 0; + margin: 0; + } + + .post-list li::before { + display: none; + } + + .post-item { + display: flex; + align-items: baseline; + gap: 1.5rem; + padding: 1rem 0; + text-decoration: none; + color: inherit; + border-bottom: 1px solid var(--border); + transition: opacity 140ms ease; + animation: fadeUp 0.5s var(--ease) both; + } + + .post-item:hover { + opacity: 0.55; + } + + .post-date { + font-family: var(--mono); + font-size: 0.63rem; + letter-spacing: 0.05em; + color: var(--text-3); + white-space: nowrap; + flex-shrink: 0; + padding-top: 0.1em; + min-width: 5.5rem; + } + + .post-right { + flex: 1; + min-width: 0; + } + + .post-title { + font-family: var(--serif); + font-size: 1.05rem; + font-weight: 400; + color: var(--text); + line-height: 1.45; + display: block; + } + + .post-tags { + display: flex; + gap: 0.3rem; + margin-top: 0.4rem; + flex-wrap: wrap; + } + + .pill { + display: inline-block; + font-family: var(--mono); + font-size: 0.58rem; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 0.15rem 0.45rem; + background: transparent; + border: 1px solid var(--border); + border-radius: 100px; + color: var(--text-3); + } + + + .empty { + font-family: var(--mono); + font-size: 0.72rem; + color: var(--text-3); + letter-spacing: 0.06em; + padding: 2.5rem 0; + } + + + footer { + padding: 2.5rem 0 3rem; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 0.8rem; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.05em; + color: var(--text-3); + } + + footer a { + color: inherit; + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: var(--border); + transition: color 120ms ease; + } + + footer a:hover { + color: var(--text); + } + + + @keyframes fadeUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + + .post-item:nth-child(1) { + animation-delay: 0.2s; + } + .post-item:nth-child(2) { + animation-delay: 0.27s; + } + .post-item:nth-child(3) { + animation-delay: 0.34s; + } + .post-item:nth-child(4) { + animation-delay: 0.41s; + } + .post-item:nth-child(5) { + animation-delay: 0.48s; + } + .post-item:nth-child(6) { + animation-delay: 0.55s; + } + + + @media (max-width: 500px) { + .page { + padding: 0 1.4rem; + } + .hero { + padding: 3.5rem 0 3rem; + } + .post-item { + flex-direction: column; + gap: 0.2rem; + } + .post-date { + min-width: unset; + } + footer { + flex-direction: column; + } + } + + :focus-visible { + outline: 2px solid var(--text); + outline-offset: 3px; + border-radius: 2px; + } + </style> + </head> + <body> + <div class="page"> + <nav> + <a href="/about">About</a> + <a href="/feed.xml">RSS</a> + </nav> + + <header class="hero"> + <h1 class="hero-name">Himanshu Sardana</h1> + <p class="hero-role">Linux Enthusiast</p> + <p class="hero-bio">i use arch btw</p> + </header> + + <main> + <div class="writing-header"> + <span class="writing-label">Writing</span> + <span class="writing-rule"></span> + </div> + + + <ul class="post-list"> + + <li> + <a class="post-item" href="/2/"> + <span class="post-right"> + <span class="post-title">Kite Devlog Adding Live Reload</span> + + </span> + <span class="post-date">26/3/26</span> + </a> + </li> + + <li> + <a class="post-item" href="/1/"> + <span class="post-right"> + <span class="post-title">Writing a static site generator for fun and profit</span> + + </span> + <span class="post-date">24/3/26</span> + </a> + </li> + + </ul> + + </main> + + <footer> + <span>© 2026 Himanshu Sardana</span> + <span>Built with <a href="#">kite</a></span> + </footer> + </div> + </body> +</html> diff --git a/output/style.css b/output/style.css new file mode 100644 index 0000000..73e6d44 --- /dev/null +++ b/output/style.css @@ -0,0 +1,705 @@ +@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"); + +:root { + --bg: #fafaf8; + --bg-subtle: #f4f4f1; + --surface: #ffffff; + --border: #e8e8e3; + --border-soft: rgba(0, 0, 0, 0.06); + --text: #1a1a18; + --text-dim: #6b6b66; + --text-muted: #b0b0aa; + --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: 680px; + --transition: 140ms ease; +} + +/* ─── Reset ──────────────────────────────────────────────── */ +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + scroll-behavior: smooth; +} + +/* ─── Body ───────────────────────────────────────────────── */ +body { + margin: 0; + padding: 0; + background: var(--bg); + color: var(--text); + font-family: var(--serif); + line-height: 1.82; + font-size: 19px; + -webkit-font-smoothing: antialiased; + 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; +} + +/* ─── 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, +h4 { + font-family: var(--sans); + font-weight: 700; + line-height: 1.18; + letter-spacing: -0.025em; + scroll-margin-top: 1.5rem; + color: var(--text); +} + +h1 { + font-size: clamp(2rem, 5vw, 2.75rem); + font-weight: 800; + margin-top: 0; + margin-bottom: 0.6rem; +} + +h2 { + font-size: 1.1rem; + font-weight: 700; + margin-top: 2.8rem; + margin-bottom: 0.35rem; +} + +h3 { + font-size: 0.95rem; + font-weight: 600; + margin-top: 1.8rem; + margin-bottom: 0.2rem; +} + +/* ─── Paragraphs ─────────────────────────────────────────── */ +p { + margin: 1rem 0; + color: #2c2c28; + font-size: 0.96rem; + line-height: 1.82; +} + +h1 + p, +header + article > p:first-child { + font-size: 1.05rem; + color: #3a3a36; + line-height: 1.85; +} + +/* ─── Article Meta ───────────────────────────────────────── */ +.meta, +time, +.byline { + display: block; + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 2.8rem; +} + +/* ─── Links ──────────────────────────────────────────────── */ +a { + color: inherit; + text-decoration-line: underline; + text-decoration-color: var(--border); + text-underline-offset: 3px; + text-decoration-thickness: 1px; + transition: + text-decoration-color var(--transition), + color var(--transition); +} + +a:hover { + text-decoration-color: var(--text); +} + +/* ─── 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: 1rem 0; + padding-left: 0; + list-style: none; +} + +ul li, +ol li { + position: relative; + padding-left: 1.4rem; + margin: 0.4rem 0; + color: #2c2c28; + font-size: 0.96rem; +} + +ul li::before { + content: "—"; + position: absolute; + left: 0; + color: var(--text-muted); + font-family: var(--sans); + font-weight: 400; +} + +ol { + counter-reset: ol-counter; +} +ol li { + counter-increment: ol-counter; +} + +ol li::before { + content: counter(ol-counter); + position: absolute; + left: 0; + font-family: var(--mono); + font-size: 0.7rem; + color: var(--text-muted); + top: 0.3em; +} + +/* ─── Horizontal Rule ────────────────────────────────────── */ +hr { + border: none; + margin: 2.8rem auto; + width: 3rem; + height: 1px; + background: var(--text); + opacity: 0.15; +} + +/* ─── Blockquote ─────────────────────────────────────────── */ +blockquote { + margin: 2.5rem 0; + padding: 0 0 0 1.6rem; + border-left: 2px solid var(--text); +} + +blockquote p { + margin: 0; + font-style: italic; + font-size: 1.05rem; + line-height: 1.72; + color: #3a3a36; +} + +blockquote cite { + display: block; + margin-top: 0.8rem; + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.05em; + color: var(--text-muted); + font-style: normal; +} + +/* ─── Tables ─────────────────────────────────────────────── */ +table { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; + font-size: 0.88rem; + font-family: var(--mono); +} + +thead tr { + border-bottom: 2px solid var(--text); +} + +th { + text-align: left; + padding: 0.5rem 0.8rem 0.6rem 0; + font-size: 0.68rem; + letter-spacing: 0.09em; + text-transform: uppercase; + color: var(--text-dim); + font-weight: 500; +} + +td { + padding: 0.55rem 0.8rem 0.55rem 0; + border-bottom: 1px solid var(--border); + color: #2c2c28; + vertical-align: top; +} + +tr:last-child td { + border-bottom: none; +} + +/* ─── Inline Code ────────────────────────────────────────── */ +code { + font-family: var(--mono); + font-size: 0.82rem; + background: var(--bg-subtle); + padding: 0.18rem 0.38rem; + border-radius: var(--radius); + border: 1px solid var(--border); + color: var(--accent-warm); + word-break: break-word; +} + +/* ─── 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: 1.8rem 0; + position: relative; +} + +pre::before { + content: attr(data-lang); + position: absolute; + top: 0.6rem; + right: 0.8rem; + font-family: var(--mono); + font-size: 0.62rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); +} + +pre code { + background: none; + border: none; + padding: 0; + color: #2c2c28; + font-size: 0.85rem; + line-height: 1.7; +} + +/* ─── 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; + display: block; + margin: 2.5rem auto; + border-radius: var(--radius); +} + +figure { + margin: 2.5rem 0; +} + +figcaption { + font-family: var(--mono); + font-size: 0.7rem; + color: var(--text-muted); + text-align: center; + margin-top: 0.65rem; + letter-spacing: 0.04em; +} + +/* ─── Aside / Callout ────────────────────────────────────── */ +aside, +.note, +.callout { + background: var(--bg-subtle); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1rem 1.2rem; + margin: 1.8rem 0; + font-size: 0.9rem; + color: var(--text-dim); +} + +aside strong, +.callout strong { + font-family: var(--mono); + font-size: 0.67rem; + letter-spacing: 0.09em; + text-transform: uppercase; + color: var(--text); + display: block; + margin-bottom: 0.35rem; +} + +/* ─── Tags ───────────────────────────────────────────────── */ +.tag { + display: inline-block; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.08em; + text-transform: uppercase; + 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: all var(--transition); +} + +.tag:hover { + background: var(--text); + color: var(--bg); + border-color: var(--text); +} + +/* ─── Footer ─────────────────────────────────────────────── */ +footer { + margin-top: 5rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.04em; + color: var(--text-muted); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +main.article footer { + padding-left: 0; + padding-right: 0; + max-width: none; +} + +/* ─── Selection ──────────────────────────────────────────── */ +::selection { + background: #e8e8c8; + color: var(--text); +} + +/* ─── Scrollbar ──────────────────────────────────────────── */ +::-webkit-scrollbar { + width: 5px; + height: 5px; +} +::-webkit-scrollbar-track { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} + +/* ─── Abbr ───────────────────────────────────────────────── */ +abbr[title] { + border-bottom: 1px dotted var(--text-muted); + cursor: help; + text-decoration: none; +} + +/* ─── Responsive ─────────────────────────────────────────── */ +@media (max-width: 700px) { + 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: 1rem; + } + nav ul { + gap: 1.2rem; + } + nav { + flex-wrap: wrap; + gap: 0.8rem; + } + footer { + flex-direction: column; + text-align: center; + } + .project-meta { + flex-direction: column; + align-items: flex-start; + } + .project-link { + margin-left: 0; + } +} + +/* ─── Focus Accessibility ────────────────────────────────── */ +:focus-visible { + outline: 2px solid var(--text); + outline-offset: 3px; + border-radius: var(--radius); +} |