Adopt repository-configured chronicle theme

.theme/assets/styles/theme.css

@@ -1,502 +1,137 @@
-:root {
-  color-scheme: dark;
-  --bg: #111314;
-  --surface: #191c1d;
-  --surface-raised: #202425;
-  --text: #f1eee6;
-  --muted: #aaa99f;
-  --line: #34393a;
-  --accent: #d9a75c;
-  --accent-strong: #f2c57d;
-  --focus: #8fd3ff;
-  --max-width: 72rem;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-synthesis: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  margin: 0;
-  background:
-    radial-gradient(circle at 10% 0%, rgb(217 167 92 / 10%), transparent 28rem),
-    var(--bg);
-  color: var(--text);
-  font-size: 1rem;
-  line-height: 1.65;
-}
-
-a {
-  color: var(--accent-strong);
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: 0.08em;
-}
-
-a:hover {
-  color: #ffe1ad;
-}
-
-:focus-visible {
-  outline: 0.2rem solid var(--focus);
-  outline-offset: 0.2rem;
-}
-
-.shell {
-  width: min(calc(100% - 2rem), var(--max-width));
-  margin-inline: auto;
-}
-
-.skip-link {
-  position: fixed;
-  z-index: 10;
-  top: 0.75rem;
-  left: 0.75rem;
-  padding: 0.65rem 0.9rem;
-  transform: translateY(-160%);
-  border-radius: 0.35rem;
-  background: var(--text);
-  color: var(--bg);
-}
-
-.skip-link:focus {
-  transform: translateY(0);
-}
-
-.site-header {
-  border-bottom: 1px solid var(--line);
-  background: rgb(17 19 20 / 88%);
-}
-
-.header-inner {
-  min-height: 4.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.5rem;
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.7rem;
-  color: var(--text);
-  font-weight: 750;
-  letter-spacing: -0.02em;
-  text-decoration: none;
-}
-
-.brand-mark {
-  width: 2rem;
-  height: 2rem;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--accent);
-  border-radius: 50%;
-  color: var(--accent-strong);
-  font-family: Georgia, "Times New Roman", serif;
-  font-style: italic;
-}
-
-.site-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.site-nav a {
-  padding: 0.45rem 0.7rem;
-  border-radius: 0.35rem;
-  color: var(--muted);
-  font-size: 0.9rem;
-  font-weight: 650;
-  text-decoration: none;
-}
-
-.site-nav a:hover,
-.site-nav a[aria-current="page"] {
-  background: var(--surface-raised);
-  color: var(--text);
-}
-
-main.shell {
-  min-height: 68vh;
-  padding-block: clamp(3.5rem, 8vw, 7rem);
-}
-
-h1,
-h2,
-h3 {
-  margin-top: 0;
-  font-family: Georgia, "Times New Roman", serif;
-  font-weight: 500;
-  line-height: 1.08;
-  letter-spacing: -0.035em;
-}
-
-h1 {
-  max-width: 13ch;
-  margin-bottom: 1.25rem;
-  font-size: clamp(3rem, 9vw, 6.5rem);
-}
-
-h2 {
-  font-size: clamp(2rem, 5vw, 3.25rem);
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-.eyebrow,
-.card-kind,
-.content-meta,
-.footer-meta {
-  color: var(--accent);
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.hero {
-  max-width: 62rem;
-}
-
-.hero h1 {
-  max-width: 11ch;
-}
-
-.hero-summary,
-.lede {
-  max-width: 48rem;
-  color: #d2d0c8;
-  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
-  line-height: 1.5;
-}
-
-.hero-copy {
-  margin-top: 3rem;
-}
-
-.section-block,
-.listing {
-  margin-top: clamp(4rem, 9vw, 7rem);
-  padding-top: 2rem;
-  border-top: 1px solid var(--line);
-}
-
-.section-heading {
-  margin-bottom: 2rem;
-}
-
-.section-heading h2 {
-  margin-bottom: 0;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.card {
-  min-height: 18rem;
-  display: flex;
-  flex-direction: column;
-  padding: clamp(1.35rem, 3vw, 2rem);
-  border: 1px solid var(--line);
-  border-radius: 0.75rem;
-  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
-}
-
-.card h2,
-.card h3 {
-  margin-bottom: 0.8rem;
-}
-
-.card h2 a,
-.card h3 a,
-.listing-item h2 a {
-  color: var(--text);
-  text-decoration: none;
-}
-
-.card p:not(.card-kind) {
-  color: var(--muted);
-}
-
-.card .text-link {
-  margin-top: auto;
-  padding-top: 1.5rem;
-}
-
-.text-link {
-  width: fit-content;
-  font-weight: 750;
-  text-decoration: none;
-}
-
-.page-intro,
-.content-header {
-  margin-bottom: clamp(3rem, 8vw, 5.5rem);
-}
-
-.page-intro h1,
-.content-header h1 {
-  font-size: clamp(3rem, 8vw, 5.5rem);
-}
-
-.listing {
-  display: grid;
-}
-
-.listing-item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: end;
-  gap: 2rem;
-  padding-block: 2rem;
-  border-bottom: 1px solid var(--line);
-}
-
-.listing-item h2 {
-  margin-bottom: 0.6rem;
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-}
-
-.listing-item p {
-  max-width: 46rem;
-  margin-bottom: 0;
-  color: var(--muted);
-}
-
-.content-page {
-  max-width: 56rem;
-}
-
-.prose {
-  max-width: 46rem;
-  color: #d5d3cb;
-  font-size: 1.05rem;
-}
-
-.prose > * + * {
-  margin-top: 1.35em;
-}
-
-.prose h2,
-.prose h3 {
-  margin-top: 2em;
-  color: var(--text);
-}
-
-.prose h2 {
-  font-size: 2rem;
-}
-
-.prose h3 {
-  font-size: 1.4rem;
-}
-
-.prose code {
-  padding: 0.12em 0.32em;
-  border: 1px solid var(--line);
-  border-radius: 0.25rem;
-  background: var(--surface);
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
-  font-size: 0.9em;
-}
-
-.prose pre {
-  overflow-x: auto;
-  padding: 1.25rem;
-  border: 1px solid var(--line);
-  border-radius: 0.5rem;
-  background: #0b0d0e;
-}
-
-.prose pre code {
-  padding: 0;
-  border: 0;
-  background: none;
-}
-
-.prose blockquote {
-  margin-inline: 0;
-  padding-left: 1.25rem;
-  border-left: 0.2rem solid var(--accent);
-  color: var(--muted);
-}
-
-.project-facts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.project-facts div {
-  min-width: 9rem;
-  padding: 0.8rem 1rem;
-  border: 1px solid var(--line);
-  border-radius: 0.5rem;
-  background: var(--surface);
-}
-
-.project-facts dt {
-  color: var(--muted);
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.project-facts dd {
-  margin: 0.2rem 0 0;
-}
-
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 1.5rem 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tag-list li {
-  padding: 0.32rem 0.6rem;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  color: var(--muted);
-  font-size: 0.82rem;
-}
-
-.content-tags {
-  margin-top: 3rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--line);
-}
-
-.button-link {
-  display: inline-block;
-  margin-top: 1.5rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--accent);
-  border-radius: 0.4rem;
-  text-decoration: none;
-}
-
-.error-page {
-  max-width: 48rem;
-}
-
-.error-page p:not(.eyebrow) {
-  color: var(--muted);
-  font-size: 1.2rem;
-}
-
-.empty-state {
-  color: var(--muted);
-}
-
-.site-footer {
-  padding-block: 2.5rem;
-  border-top: 1px solid var(--line);
-  color: var(--muted);
-}
-
-.footer-inner {
-  display: flex;
-  justify-content: space-between;
-  gap: 2rem;
-}
-
-.footer-inner p {
-  margin: 0;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@media (max-width: 44rem) {
-  .header-inner,
-  .footer-inner {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .header-inner {
-    padding-block: 1rem;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .listing-item {
-    grid-template-columns: 1fr;
-    align-items: start;
-    gap: 1rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color-scheme: light;
-    --bg: #f4f0e7;
-    --surface: #ebe5da;
-    --surface-raised: #fffaf0;
-    --text: #202323;
-    --muted: #5f625f;
-    --line: #cbc4b7;
-    --accent: #87591b;
-    --accent-strong: #704713;
-    --focus: #075b9b;
-  }
-
-  body {
-    background:
-      radial-gradient(circle at 10% 0%, rgb(135 89 27 / 11%), transparent 28rem),
-      var(--bg);
-  }
-
-  a:hover {
-    color: #4e2d04;
-  }
-
-  .site-header {
-    background: rgb(244 240 231 / 90%);
-  }
-
-  .hero-summary,
-  .lede,
-  .prose {
-    color: #3d413f;
-  }
-
-  .prose pre {
-    background: #242728;
-    color: #f7f3eb;
-  }
-}
+@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.ttf") format("truetype")}
+@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.ttf") format("truetype")}
+@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.ttf") format("truetype")}
+@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.ttf") format("truetype")}
+@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500 600;font-display:swap;src:url("../fonts/playfair-display-italic-500.ttf") format("truetype")}
+@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/playfair-display-600.ttf") format("truetype")}
+@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/playfair-display-700.ttf") format("truetype")}
+
+:root{
+  color-scheme:dark;
+  --ink:#0e1116;
+  --ink-raised:#12161c;
+  --paper:#edeae2;
+  --paper-dim:#a9a69c;
+  --teal:#3fa9a0;
+  --violet:#8073c9;
+  --rose:#c75b7a;
+  --hairline:#2a2f38;
+  --hairline-soft:#1b1f26;
+  --font-brand:"Playfair Display",Georgia,serif;
+  --font-mono:"IBM Plex Mono",Consolas,monospace;
+  --font-body:"Inter",system-ui,sans-serif;
+  font-synthesis:none;
+}
+
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
+a{color:inherit;text-decoration:none}
+a:focus-visible{outline:1.5px solid var(--rose);outline-offset:3px}
+.wrap{width:min(100% - 64px,816px);margin-inline:auto}
+.skip-link{position:fixed;z-index:10;top:12px;left:12px;padding:8px 12px;transform:translateY(-180%);background:var(--paper);color:var(--ink);font-family:var(--font-mono);font-size:12px}
+.skip-link:focus{transform:translateY(0)}
+
+.site-header{padding-top:28px;border-bottom:1px solid var(--hairline)}
+.header-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:22px}
+.brand-lockup{display:flex;flex-direction:column;gap:4px}
+.brand-mark{font-family:var(--font-brand);font-size:30px;font-weight:700;letter-spacing:.5px}
+.brand-tag{color:var(--teal);font-family:var(--font-mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase}
+.registry{display:flex;flex-wrap:wrap;gap:22px;color:var(--paper-dim);font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase}
+.registry a{position:relative;padding-bottom:3px;transition:color .15s ease}
+.registry a::after{position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--teal);content:"";transition:width .2s ease}
+.registry a:hover,.registry a[aria-current="page"]{color:var(--paper)}
+.registry a:hover::after,.registry a[aria-current="page"]::after{width:100%}
+.header-links{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.5px}
+.file-number{color:var(--hairline)}
+.external-links{display:flex;flex-wrap:wrap;gap:16px}
+.external-links a{transition:color .15s ease}
+.external-links a:hover{color:var(--violet)}
+
+.hero{padding:46px 0 40px;border-bottom:1px solid var(--hairline)}
+.hero-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--rose);font-family:var(--font-mono);font-size:11.5px;font-weight:400;letter-spacing:3px;text-transform:uppercase}
+.hero-eyebrow::before{width:18px;height:1px;background:var(--rose);content:""}
+.hero h1{max-width:610px;margin:0;color:var(--paper);font-family:var(--font-brand);font-size:clamp(28px,4vw,36px);font-style:italic;font-weight:600;line-height:1.35;letter-spacing:-.012em}
+.hero-copy,.detail-summary{max-width:560px;margin:16px 0 0;color:var(--paper-dim);font-size:14.5px;line-height:1.55}
+.hero-copy p{margin:0}
+.hero-copy p+p{margin-top:12px}
+.page-hero h1{font-size:clamp(36px,6vw,54px);font-style:normal;line-height:1.12}
+.detail-hero h1{max-width:700px;font-size:clamp(38px,6.5vw,62px);font-style:normal;line-height:1.1}
+.detail-summary{max-width:620px;font-size:16px}
+.detail-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px;color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.7px;text-transform:uppercase}
+
+.chronicle{padding:48px 0 20px}
+.section-label{display:flex;justify-content:space-between;gap:20px;margin-bottom:6px;padding-bottom:22px;border-bottom:1px solid var(--hairline-soft);color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase}
+.section-label h2{margin:0;font:inherit}
+.ledger{position:relative;padding-left:28px}
+.ledger::before{position:absolute;top:10px;bottom:10px;left:5px;width:1px;background:var(--hairline);content:""}
+.entry{--node-color:var(--violet);position:relative;padding:26px 0;border-bottom:1px solid var(--hairline-soft)}
+.entry:last-child{border-bottom:0}
+.entry::before{position:absolute;top:32px;left:-28px;width:9px;height:9px;border:1.5px solid var(--node-color);border-radius:50%;background:var(--ink);content:""}
+.entry.type-project{--node-color:var(--teal)}
+.entry-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px;color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.5px}
+.tag{padding:2px 7px;border:1px solid var(--node-color);color:var(--node-color);font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:capitalize}
+.entry-title{margin:0 0 8px;color:var(--paper);font-family:var(--font-brand);font-size:20px;font-weight:600;line-height:1.3}
+.entry-title a,.compact-title a{transition:color .15s ease}
+.entry-title a:hover,.compact-title a:hover{color:var(--teal)}
+.entry-snippet{max-width:620px;margin:0;color:var(--paper-dim);font-size:14px;line-height:1.6}
+.entry-more{display:inline-block;margin-top:12px;padding-bottom:2px;border-bottom:1px solid transparent;color:var(--rose);font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase}
+.entry-more:hover{border-bottom-color:var(--rose)}
+.entry.type-project:not(.project-entry){display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;padding:16px 0}
+.entry.type-project:not(.project-entry) .entry-meta{margin-bottom:0}
+.compact-title{margin:0;font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.4}
+.empty-state{padding:32px 0;color:var(--paper-dim);font-family:var(--font-mono);font-size:12px}
+
+.detail-body{padding-top:48px;padding-bottom:32px}
+.markdown-body{max-width:680px;color:var(--paper-dim);font-size:15px;line-height:1.75}
+.markdown-body>*:first-child{margin-top:0}
+.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{margin:2rem 0 1rem;color:var(--paper);font-family:var(--font-brand);font-weight:600;line-height:1.25}
+.markdown-body h1{padding-bottom:10px;border-bottom:1px solid var(--hairline);font-size:28px;font-style:italic}
+.markdown-body h2{padding-bottom:8px;border-bottom:1px solid var(--hairline-soft);font-size:22px;font-style:italic}
+.markdown-body h3{font-size:18px}
+.markdown-body p{margin:0 0 1.2rem}
+.markdown-body ul,.markdown-body ol{margin:0 0 1.2rem 1.5rem;padding:0}
+.markdown-body li{margin-bottom:.4rem}
+.markdown-body a{color:var(--teal);border-bottom:1px dashed var(--teal)}
+.markdown-body a:hover{border-bottom-style:solid}
+.markdown-body code{padding:2px 6px;border:1px solid var(--hairline-soft);border-radius:3px;background:var(--ink-raised);color:var(--teal);font-family:var(--font-mono);font-size:.9em}
+.markdown-body pre{overflow-x:auto;margin:0 0 1.5rem;padding:1.2rem;border:1px solid var(--hairline-soft);border-radius:6px;background:var(--ink-raised)}
+.markdown-body pre code{padding:0;border:0;background:none;color:inherit}
+.markdown-body blockquote{margin:0 0 1.5rem;padding-left:1rem;border-left:3px solid var(--teal);font-style:italic}
+.markdown-body img{max-width:100%;height:auto}
+.project-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;max-width:700px;margin:28px 0 0;background:var(--hairline-soft)}
+.project-facts div{padding:14px;background:var(--ink)}
+.project-facts dt,.section-kicker{color:var(--paper-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
+.project-facts dd{margin:5px 0 0;color:var(--paper);font-size:13px}
+.content-tags{max-width:680px;margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline-soft)}
+.section-kicker{margin:0 0 12px}
+.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
+.tag-list li{padding:3px 8px;border:1px solid var(--hairline);color:var(--paper-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.7px}
+
+.site-footer{margin-top:30px;padding:30px 0 50px;border-top:1px solid var(--hairline)}
+.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
+.footer-brand{margin:0;color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.5px}
+.footer-links{display:flex;flex-wrap:wrap;gap:18px;color:var(--paper-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
+.footer-links a:hover{color:var(--teal)}
+.error-page{min-height:62vh;padding-top:80px}
+.error-page .entry-more{margin-top:28px}
+
+@media(max-width:640px){
+  .wrap{width:calc(100% - 40px)}
+  .site-header{padding-top:32px}
+  .header-top{align-items:flex-start;flex-direction:column;gap:14px}
+  .registry{gap:14px}
+  .header-links{align-items:flex-start;flex-direction:column;gap:8px}
+  .external-links{gap:12px}
+  .hero{padding:46px 0 38px}
+  .hero h1{font-size:28px}
+  .page-hero h1,.detail-hero h1{font-size:38px}
+  .chronicle{padding-top:46px}
+  .section-label{font-size:10px;letter-spacing:2px}
+  .entry.type-project:not(.project-entry){align-items:flex-start;flex-direction:column;gap:6px}
+  .project-facts{grid-template-columns:1fr}
+  .footer-row{align-items:flex-start;flex-direction:column}
+  .footer-brand{max-width:320px}
+}
+
+@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.theme/templates/404.liquid

@@ -1,6 +1 @@
-<section class="error-page">
-  <p class="eyebrow">Error 404</p>
-  <h1>That route does not exist.</h1>
-  <p>The page may have moved, or the address may be incomplete.</p>
-  <a class="button-link" href="/">Return home</a>
-</section>
+<section class="hero error-page"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.notFound.eyebrow }}</p><h1>{{ site.presentation.notFound.title }}</h1><p class="detail-summary">{{ site.presentation.notFound.summary }}</p><a class="entry-more" href="/">{{ site.presentation.notFound.action }} <span aria-hidden="true">→</span></a></div></section>

.theme/templates/content/article.liquid

@@ -1,25 +1 @@
-<article class="content-page">
-  <header class="content-header">
-    <p class="eyebrow">Article</p>
-    <h1>{{ page.title }}</h1>
-    {% if page.summary %}
-      <p class="lede">{{ page.summary }}</p>
-    {% endif %}
-    {% if page.published %}
-      <p class="content-meta">Published {{ page.published }}</p>
-    {% endif %}
-  </header>
-  <div class="prose">
-    {{ page.renderedContent | safe_content }}
-  </div>
-  {% if page.tags.size > 0 %}
-    <footer class="content-tags">
-      <p class="visually-hidden">Topics</p>
-      <ul class="tag-list">
-        {% for tag in page.tags %}
-          <li>{{ tag }}</li>
-        {% endfor %}
-      </ul>
-    </footer>
-  {% endif %}
-</article>
+<article class="detail-page"><header class="hero detail-hero"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.content.articleEyebrow }}</p><h1>{{ page.title }}</h1>{% if page.summary %}<p class="detail-summary">{{ page.summary }}</p>{% endif %}<div class="detail-meta"><span>{{ site.presentation.content.publishedLabel }} {{ page.published }}</span><span>{{ site.presentation.content.articleMeta }}</span></div></div></header><div class="wrap detail-body"><div class="markdown-body">{{ page.renderedContent | safe_content }}</div>{% if page.tags.size > 0 %}<footer class="content-tags"><p class="section-kicker">{{ site.presentation.content.articleTags }}</p><ul class="tag-list">{% for tag in page.tags %}<li>{{ tag }}</li>{% endfor %}</ul></footer>{% endif %}</div></article>

.theme/templates/content/page.liquid

@@ -1,12 +1 @@
-<article class="content-page">
-  <header class="content-header">
-    <p class="eyebrow">Page</p>
-    <h1>{{ page.title }}</h1>
-    {% if page.summary %}
-      <p class="lede">{{ page.summary }}</p>
-    {% endif %}
-  </header>
-  <div class="prose">
-    {{ page.renderedContent | safe_content }}
-  </div>
-</article>
+<article class="detail-page"><header class="hero detail-hero"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.content.pageEyebrow }}</p><h1>{{ page.title }}</h1>{% if page.summary %}<p class="detail-summary">{{ page.summary }}</p>{% endif %}</div></header><div class="wrap detail-body"><div class="markdown-body">{{ page.renderedContent | safe_content }}</div></div></article>

.theme/templates/content/project.liquid

@@ -1,33 +1 @@
-<article class="content-page project-page">
-  <header class="content-header">
-    <p class="eyebrow">Project</p>
-    <h1>{{ page.title }}</h1>
-    {% if page.summary %}
-      <p class="lede">{{ page.summary }}</p>
-    {% endif %}
-    <dl class="project-facts">
-      {% if page.metadata.version %}
-        <div><dt>Version</dt><dd>{{ page.metadata.version }}</dd></div>
-      {% endif %}
-      {% if page.metadata.license %}
-        <div><dt>License</dt><dd>{{ page.metadata.license }}</dd></div>
-      {% endif %}
-      {% if page.metadata.stack.size > 0 %}
-        <div><dt>Stack</dt><dd>{{ page.metadata.stack | join: ", " }}</dd></div>
-      {% endif %}
-    </dl>
-  </header>
-  <div class="prose">
-    {{ page.renderedContent | safe_content }}
-  </div>
-  {% if page.tags.size > 0 %}
-    <footer class="content-tags">
-      <p class="visually-hidden">Topics</p>
-      <ul class="tag-list">
-        {% for tag in page.tags %}
-          <li>{{ tag }}</li>
-        {% endfor %}
-      </ul>
-    </footer>
-  {% endif %}
-</article>
+<article class="detail-page project-detail"><header class="hero detail-hero"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.content.projectEyebrow }}</p><h1>{{ page.title }}</h1>{% if page.summary %}<p class="detail-summary">{{ page.summary }}</p>{% endif %}<dl class="project-facts">{% if page.metadata.version %}<div><dt>{{ site.presentation.content.versionLabel }}</dt><dd>{{ page.metadata.version }}</dd></div>{% endif %}{% if page.metadata.license %}<div><dt>{{ site.presentation.content.licenseLabel }}</dt><dd>{{ page.metadata.license }}</dd></div>{% endif %}{% if page.metadata.stack.size > 0 %}<div><dt>{{ site.presentation.content.stackLabel }}</dt><dd>{{ page.metadata.stack | join: ", " }}</dd></div>{% endif %}</dl></div></header><div class="wrap detail-body"><div class="markdown-body">{{ page.renderedContent | safe_content }}</div>{% if page.tags.size > 0 %}<footer class="content-tags"><p class="section-kicker">{{ site.presentation.content.projectTags }}</p><ul class="tag-list">{% for tag in page.tags %}<li>{{ tag }}</li>{% endfor %}</ul></footer>{% endif %}</div></article>

.theme/templates/home.liquid

@@ -1,29 +1,22 @@
 <section class="hero">
-  <p class="eyebrow">Configuration-first publishing</p>
-  <h1>{{ page.title }}</h1>
-  {% if page.summary %}
-    <p class="hero-summary">{{ page.summary }}</p>
-  {% endif %}
-  <div class="prose hero-copy">
-    {{ page.renderedContent | safe_content }}
+  <div class="wrap">
+    <p class="hero-eyebrow">{{ site.presentation.home.eyebrow }}</p>
+    <h1>{{ page.summary }}</h1>
+    <div class="hero-copy">{{ page.renderedContent | safe_content }}</div>
   </div>
 </section>
-
-{% if collection.items.size > 0 %}
-  <section class="section-block" aria-labelledby="latest-heading">
-    <div class="section-heading">
-      <p class="eyebrow">From the repository</p>
-      <h2 id="latest-heading">Latest work</h2>
-    </div>
-    <div class="card-grid">
+<section class="chronicle" aria-labelledby="recent-activity">
+  <div class="wrap">
+    <div class="section-label"><h2 id="recent-activity">{{ site.presentation.home.activityLabel }}</h2><span>{{ site.presentation.home.orderLabel }}</span></div>
+    <div class="ledger">
       {% for item in collection.items %}
-        <article class="card">
-          <p class="card-kind">{{ item.contentModel }}</p>
-          <h3><a href="{{ item.route }}">{{ item.title }}</a></h3>
-          <p>{{ item.summary }}</p>
-          <a class="text-link" href="{{ item.route }}">Read more <span aria-hidden="true">→</span></a>
+        <article class="entry type-{{ item.templateKey }}">
+          <div class="entry-meta"><span class="tag">{{ item.contentModel }}</span><span>{{ item.published }}</span></div>
+          <h3 class="entry-title"><a href="{{ item.route }}">{{ item.title }}</a></h3>
+          {% if item.summary %}<p class="entry-snippet">{{ item.summary }}</p>{% endif %}
+          <a class="entry-more" href="{{ item.route }}">{{ site.presentation.home.entryAction }} <span aria-hidden="true">→</span></a>
         </article>
       {% endfor %}
     </div>
-  </section>
-{% endif %}
+  </div>
+</section>

.theme/templates/layout.liquid

@@ -4,40 +4,34 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="{{ page.summary }}">
-    <meta name="color-scheme" content="dark light">
-    {% if page.type == "home" %}
-      <title>{{ site.title }}</title>
-    {% else %}
-      <title>{{ page.title }} · {{ site.title }}</title>
-    {% endif %}
-    {% for stylesheet in theme.styles %}
-      <link rel="stylesheet" href="{{ stylesheet }}">
-    {% endfor %}
+    <meta name="color-scheme" content="dark">
+    {% if page.type == "home" %}<title>Home — {{ site.title }}</title>{% else %}<title>{{ page.title }} — {{ site.title }}</title>{% endif %}
+    {% for stylesheet in theme.styles %}<link rel="stylesheet" href="{{ stylesheet }}">{% endfor %}
   </head>
   <body>
     <a class="skip-link" href="#main-content">Skip to content</a>
     <header class="site-header">
-      <div class="shell header-inner">
-        <a class="brand" href="/" aria-label="{{ site.title }} home">
-          <span class="brand-mark" aria-hidden="true">L</span>
-          <span>{{ site.title }}</span>
-        </a>
-        <nav class="site-nav" aria-label="Primary navigation">
-          {% for item in navigation %}
-            <a href="{{ item.route }}"{% if item.route == page.route %} aria-current="page"{% endif %}>{{ item.label }}</a>
-          {% endfor %}
-        </nav>
+      <div class="wrap">
+        <div class="header-top">
+          <div class="brand-lockup">
+            <a class="brand-mark" href="/">{{ site.title }}</a>
+            <span class="brand-tag">{{ site.presentation.tagline }}</span>
+          </div>
+          <nav class="registry" aria-label="Primary navigation">
+            {% for item in navigation %}{% if item.route != "/" %}<a href="{{ item.route }}"{% if item.route == page.route %} aria-current="page"{% endif %}>{{ item.label }}</a>{% endif %}{% endfor %}
+          </nav>
+        </div>
+        <div class="header-links">
+          <span class="file-number">{{ site.presentation.registryLabel }}</span>
+          <div class="external-links">{% for link in site.presentation.headerLinks %}<a href="{{ link.url }}">{{ link.label }}</a>{% endfor %}</div>
+        </div>
       </div>
     </header>
-
-    <main id="main-content" class="shell">
-      {{ page.body | safe_page_body }}
-    </main>
-
+    <main id="main-content">{{ page.body | safe_page_body }}</main>
     <footer class="site-footer">
-      <div class="shell footer-inner">
-        <p><strong>{{ site.title }}</strong> turns Git-owned configuration and content into a dependable website.</p>
-        <p class="footer-meta">Built from immutable sources.</p>
+      <div class="wrap footer-row">
+        <p class="footer-brand">{{ site.presentation.footerNotice }}</p>
+        <div class="footer-links">{% for link in site.presentation.footerLinks %}<a href="{{ link.url }}">{{ link.label }}</a>{% endfor %}</div>
       </div>
     </footer>
   </body>

.theme/templates/sections/articles.liquid

@@ -1,22 +1,4 @@
-<section class="page-intro">
-  <p class="eyebrow">Writing</p>
-  <h1>{{ page.title }}</h1>
-  {% if page.summary %}
-    <p class="lede">{{ page.summary }}</p>
-  {% endif %}
-</section>
-
-<section class="listing" aria-label="{{ page.title }}">
-  {% for item in collection.items %}
-    <article class="listing-item">
-      <div>
-        <p class="card-kind">{{ item.contentModel }}</p>
-        <h2><a href="{{ item.route }}">{{ item.title }}</a></h2>
-        <p>{{ item.summary }}</p>
-      </div>
-      <a class="text-link" href="{{ item.route }}" aria-label="Read {{ item.title }}">Read <span aria-hidden="true">→</span></a>
-    </article>
-  {% else %}
-    <p class="empty-state">No articles have been published yet.</p>
-  {% endfor %}
-</section>
+<section class="hero page-hero"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.articles.eyebrow }}</p><h1>{{ page.title }}</h1><p class="hero-copy">{{ site.presentation.articles.intro }}</p></div></section>
+<section class="chronicle" aria-label="{{ page.title }}"><div class="wrap"><div class="section-label"><span>{{ site.presentation.articles.listLabel }}</span><span>{{ site.presentation.articles.orderLabel }}</span></div><div class="ledger">
+{% for item in collection.items %}<article class="entry type-{{ item.templateKey }}"><div class="entry-meta"><span class="tag">{{ item.contentModel }}</span><span>{{ item.published }}</span></div><h2 class="entry-title"><a href="{{ item.route }}">{{ item.title }}</a></h2>{% if item.summary %}<p class="entry-snippet">{{ item.summary }}</p>{% endif %}<a class="entry-more" href="{{ item.route }}">{{ site.presentation.articles.entryAction }} <span aria-hidden="true">→</span></a></article>{% else %}<p class="empty-state">{{ site.presentation.articles.emptyState }}</p>{% endfor %}
+</div></div></section>

.theme/templates/sections/projects.liquid

@@ -1,27 +1,4 @@
-<section class="page-intro">
-  <p class="eyebrow">Projects</p>
-  <h1>{{ page.title }}</h1>
-  {% if page.summary %}
-    <p class="lede">{{ page.summary }}</p>
-  {% endif %}
-</section>
-
-<section class="card-grid" aria-label="{{ page.title }}">
-  {% for item in collection.items %}
-    <article class="card project-card">
-      <p class="card-kind">{{ item.contentModel }}</p>
-      <h2><a href="{{ item.route }}">{{ item.title }}</a></h2>
-      <p>{{ item.summary }}</p>
-      {% if item.tags.size > 0 %}
-        <ul class="tag-list" aria-label="Technologies and topics">
-          {% for tag in item.tags %}
-            <li>{{ tag }}</li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-      <a class="text-link" href="{{ item.route }}">View project <span aria-hidden="true">→</span></a>
-    </article>
-  {% else %}
-    <p class="empty-state">No projects have been published yet.</p>
-  {% endfor %}
-</section>
+<section class="hero page-hero"><div class="wrap"><p class="hero-eyebrow">{{ site.presentation.projects.eyebrow }}</p><h1>{{ page.title }}</h1><p class="hero-copy">{{ site.presentation.projects.intro }}</p></div></section>
+<section class="chronicle" aria-label="{{ page.title }}"><div class="wrap"><div class="section-label"><span>{{ site.presentation.projects.listLabel }}</span><span>{{ site.presentation.projects.orderLabel }}</span></div><div class="ledger">
+{% for item in collection.items %}<article class="entry type-{{ item.templateKey }} project-entry"><div class="entry-meta"><span class="tag">{{ item.contentModel }}</span><span>{{ item.published }}</span></div><h2 class="entry-title"><a href="{{ item.route }}">{{ item.title }}</a></h2>{% if item.summary %}<p class="entry-snippet">{{ item.summary }}</p>{% endif %}{% if item.tags.size > 0 %}<ul class="tag-list" aria-label="Technologies and topics">{% for tag in item.tags %}<li>{{ tag }}</li>{% endfor %}</ul>{% endif %}<a class="entry-more" href="{{ item.route }}">{{ site.presentation.projects.entryAction }} <span aria-hidden="true">→</span></a></article>{% else %}<p class="empty-state">{{ site.presentation.projects.emptyState }}</p>{% endfor %}
+</div></div></section>

.theme/theme.yml

@@ -1,6 +1,6 @@
 protocol: labyricorn-theme/v1
-id: labyricorn-default
-version: 1.0.0
+id: labyricorn-chronicle
+version: 2.0.0
 engine: liquid
 
 templates:
@@ -19,7 +19,14 @@ assets:
   styles:
     - assets/styles/theme.css
   scripts: []
-  files: []
+  files:
+    - assets/fonts/inter-400.ttf
+    - assets/fonts/inter-500.ttf
+    - assets/fonts/ibm-plex-mono-400.ttf
+    - assets/fonts/ibm-plex-mono-500.ttf
+    - assets/fonts/playfair-display-600.ttf
+    - assets/fonts/playfair-display-700.ttf
+    - assets/fonts/playfair-display-italic-500.ttf
   fonts: []
 
 security: