feat: migrate from using tailwind

content/docs/how-it-looks.md

@@ -9,12 +9,20 @@ Use this page as a glance test for the Markdown pieces that show up most often.
 
 # heading 1
 
+heading 1 text
+
 ## heading 2
 
+heading 2 text
+
 ### heading 3
 
+heading 3 text
+
 #### heading 4
 
+heading 4 text
+
 ## Text
 
 Plain text can include **bold**, _italic_, `inline code`, and [links](https://gohugo.io/).

themes/starless/assets/css/starless.css

@@ -0,0 +1,683 @@
+@layer tokens {
+  :root {
+    --color-surface-rgb: 22 20 19;
+    --color-surface-container-lowest-rgb: 12 11 10;
+    --color-surface-container-low-rgb: 29 26 25;
+    --color-on-surface-rgb: 234 228 226;
+    --color-on-surface-variant-rgb: 210 199 197;
+    --color-primary-rgb: 209 140 129;
+    --color-primary-container-rgb: 91 44 35;
+    --color-on-primary-container-rgb: 255 218 207;
+    --color-outline-rgb: 150 141 138;
+
+    --surface: rgb(var(--color-surface-rgb));
+    --surface-lowest: rgb(var(--color-surface-container-lowest-rgb));
+    --surface-low: rgb(var(--color-surface-container-low-rgb));
+    --on-surface: rgb(var(--color-on-surface-rgb));
+    --on-surface-muted: rgb(var(--color-on-surface-rgb) / 0.9);
+    --on-surface-variant: rgb(var(--color-on-surface-variant-rgb));
+    --primary: rgb(var(--color-primary-rgb));
+    --primary-container: rgb(var(--color-primary-container-rgb));
+    --on-primary-container: rgb(var(--color-on-primary-container-rgb));
+    --hairline: rgb(var(--color-on-surface-rgb) / 0.1);
+    --outline-soft: rgb(var(--color-outline-rgb) / 0.3);
+
+    --font-body: "JetBrains Mono", monospace;
+    --font-display: "Cormorant Garamond", serif;
+    --text-body: 400 14px / 24px var(--font-body);
+    --text-display: 400 42px / 1.2 var(--font-display);
+    --text-headline: 400 24px / 32px var(--font-display);
+
+    --radius-sm: 0.25rem;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    --space-32: 8rem;
+
+    --checkbox-checkmark: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23d18c81'/%3e%3c/svg%3e");
+  }
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    background: var(--surface);
+  }
+
+  body {
+    min-height: 100vh;
+    margin: 0;
+    display: flex;
+    background: var(--surface);
+    color: var(--on-surface);
+    font: var(--text-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  button,
+  input {
+    font: inherit;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .material-symbols-outlined {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+    line-height: 1;
+  }
+
+  .highlight pre {
+    padding: var(--space-2) var(--space-4);
+  }
+}
+
+@layer layout {
+  .site-shell {
+    width: 100%;
+    max-width: 80rem;
+    margin-inline: auto;
+    padding: var(--space-16) var(--space-8);
+    display: flex;
+    gap: var(--space-16);
+  }
+
+  .site-main {
+    flex: 1;
+    min-width: 0;
+    max-width: 48rem;
+    padding-top: var(--space-2);
+  }
+
+  .site-sidebar {
+    width: 18rem;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    padding-right: var(--space-8);
+    border-right: 1px solid var(--hairline);
+    color: var(--on-surface-variant);
+  }
+
+  .site-title {
+    display: block;
+    color: var(--on-surface);
+    font: var(--text-display);
+  }
+
+  .site-nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    font-size: 14px;
+  }
+}
+
+@layer components {
+  .content {
+    max-width: none;
+    color: var(--on-surface-muted);
+    overflow-wrap: break-word;
+  }
+
+  .content > * + * {
+    margin-top: var(--space-6);
+  }
+
+  .page-actions {
+    margin-top: var(--space-12);
+  }
+
+  .page-link {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: var(--space-4);
+    color: var(--on-surface-variant);
+    font-style: italic;
+    transition: color 150ms ease;
+  }
+
+  .page-link:hover {
+    color: var(--primary);
+  }
+
+  .page-link .material-symbols-outlined {
+    margin-left: var(--space-1);
+    font-size: 18px;
+  }
+
+  .rule {
+    border: 0;
+    border-top: 1px solid var(--hairline);
+  }
+
+  .page-list {
+    margin-top: var(--space-8);
+  }
+
+  .page-list article {
+    padding-block: var(--space-5);
+  }
+
+  .page-list article + article {
+    border-top: 1px solid var(--hairline);
+  }
+
+  .entry-title {
+    margin: 0 0 var(--space-3);
+  }
+
+  .entry-title a,
+  .entry-summary a {
+    transition: color 150ms ease;
+  }
+
+  .entry-title a:hover,
+  .entry-summary a:hover {
+    color: var(--primary);
+  }
+
+  .entry-summary {
+    margin: 0;
+    color: var(--on-surface-muted);
+  }
+
+  .footer-note {
+    color: var(--on-surface-variant);
+    font: 400 18px / 28px var(--font-display);
+    font-style: italic;
+  }
+
+  .site-sidebar .footer-note {
+    margin-top: auto;
+    padding-top: var(--space-8);
+  }
+
+  .page-footer {
+    padding-block: var(--space-32) var(--space-8);
+  }
+
+  .search-trigger {
+    position: relative;
+    width: 100%;
+    padding: 0.375rem var(--space-3) 0.375rem var(--space-8);
+    border: 1px solid var(--outline-soft);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--on-surface);
+    text-align: left;
+    font-size: 13px;
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  .search-trigger:focus,
+  .search-input:focus,
+  .search-close:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 1px var(--primary);
+  }
+
+  .search-trigger .material-symbols-outlined {
+    position: absolute;
+    left: var(--space-2);
+    top: 0.375rem;
+    color: var(--on-surface-variant);
+    font-size: 18px;
+  }
+
+  .search-trigger-label {
+    color: rgb(var(--color-on-surface-variant-rgb) / 0.7);
+  }
+
+  .tree-node {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tree-link {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-block: var(--space-1);
+    color: var(--on-surface-variant);
+    text-align: left;
+    transition: color 150ms ease;
+  }
+
+  .tree-link:hover,
+  .tree-link:hover .tree-icon {
+    color: var(--primary);
+  }
+
+  .tree-link--section {
+    color: var(--on-surface);
+  }
+
+  .tree-link--nested {
+    padding-block: 0.125rem;
+  }
+
+  .tree-link--nested:hover {
+    color: var(--on-surface);
+  }
+
+  .tree-link--leaf {
+    display: block;
+    padding-block: 0.125rem;
+    font-style: italic;
+  }
+
+  .tree-link--leaf:hover {
+    color: var(--on-surface);
+  }
+
+  .tree-link--current {
+    color: var(--primary);
+  }
+
+  .tree-icon {
+    margin-right: var(--space-1);
+    color: var(--on-surface-variant);
+    font-size: 16px;
+    transition: color 150ms ease;
+  }
+
+  .tree-icon--small {
+    font-size: 14px;
+  }
+
+  .tree-children {
+    position: relative;
+    margin: var(--space-1) 0 var(--space-2) var(--space-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    color: var(--on-surface-variant);
+    font-size: 13px;
+  }
+
+  .tree-children--nested {
+    margin-left: var(--space-5);
+    margin-bottom: 0;
+    font-style: italic;
+  }
+
+  .tree-children::before {
+    content: "";
+    position: absolute;
+    left: -12px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--hairline);
+  }
+
+  .search-dialog {
+    width: min(78rem, calc(100vw - 2rem));
+    max-width: none;
+    margin: 6rem auto auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--on-surface);
+  }
+
+  .search-dialog::backdrop {
+    background: rgb(var(--color-surface-container-lowest-rgb) / 0.86);
+  }
+
+  .search-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .search-field {
+    position: relative;
+  }
+
+  .search-field-icon {
+    position: absolute;
+    left: var(--space-3);
+    top: 0.625rem;
+    color: var(--on-surface-variant);
+    font-size: 20px;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.625rem var(--space-12) 0.625rem 2.5rem;
+    border: 1px solid var(--outline-soft);
+    border-radius: var(--radius-sm);
+    background: rgb(var(--color-surface-container-lowest-rgb) / 0.95);
+    color: var(--on-surface);
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  .search-input::placeholder {
+    color: rgb(var(--color-on-surface-variant-rgb) / 0.6);
+  }
+
+  .search-close {
+    position: absolute;
+    right: var(--space-2);
+    top: var(--space-2);
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--on-surface-variant);
+  }
+
+  .search-close:hover {
+    color: var(--on-surface);
+  }
+
+  .search-close .material-symbols-outlined {
+    font-size: 18px;
+  }
+
+  .search-panel {
+    display: grid;
+    min-height: 28rem;
+    max-height: 70vh;
+    overflow: hidden;
+    border: 1px solid var(--outline-soft);
+    border-radius: var(--radius-sm);
+    background: rgb(var(--color-surface-container-lowest-rgb) / 0.95);
+  }
+
+  .search-results {
+    overflow-y: auto;
+    border-bottom: 1px solid var(--outline-soft);
+  }
+
+  .search-preview {
+    overflow-y: auto;
+    padding: var(--space-6);
+  }
+
+  .search-message {
+    min-height: 28rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-6);
+    color: var(--on-surface-variant);
+    text-align: center;
+  }
+
+  .search-placeholder {
+    margin: 0;
+    color: var(--on-surface-variant);
+  }
+
+  .search-mark {
+    border-radius: var(--radius-sm);
+    background: var(--primary-container);
+    color: var(--on-primary-container);
+    padding-inline: 0.125rem;
+  }
+
+  .search-preview-title {
+    display: block;
+    color: var(--on-surface);
+    font: var(--text-headline);
+    transition: color 150ms ease;
+  }
+
+  .search-preview-title:hover {
+    color: var(--primary);
+  }
+
+  .search-preview-summary {
+    margin: var(--space-4) 0 0;
+    color: var(--on-surface-muted);
+  }
+
+  .search-preview-body {
+    margin: var(--space-6) 0 0;
+    color: var(--on-surface-variant);
+    white-space: pre-wrap;
+  }
+
+  .search-result {
+    display: block;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--outline-soft);
+    color: var(--on-surface);
+  }
+
+  .search-result:hover,
+  .search-result:focus {
+    outline: none;
+    background: var(--surface-low);
+  }
+}
+
+@layer prose {
+  .content :where(h1, h2, h3, h4) {
+    color: var(--on-surface);
+    font-family: var(--font-display);
+    font-weight: 400;
+  }
+
+  .content :where(h1, h2) {
+    text-decoration: underline;
+    text-decoration-color: rgb(var(--color-on-surface-rgb) / 0.35);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+  }
+
+  .content h1 {
+    margin: 0 0 var(--space-3);
+    font-size: 2.25rem;
+    line-height: 1.1111;
+  }
+
+  .content h2 {
+    margin: var(--space-6) 0 var(--space-2);
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .content h3 {
+    margin: var(--space-6) 0 var(--space-2);
+    font-size: 1.40625rem;
+    line-height: 1.90625rem;
+    font-weight: 500;
+  }
+
+  .content h4 {
+    margin: var(--space-5) 0 var(--space-2);
+    font-size: 1.1875rem;
+    line-height: 1.6875rem;
+    font-weight: 500;
+  }
+
+  .content p,
+  .content ul,
+  .content ol,
+  .content blockquote,
+  .content pre,
+  .content table {
+    margin-block: var(--space-5);
+  }
+
+  .content :where(h1, h2, h3, h4) + p {
+    margin-top: var(--space-3);
+  }
+
+  .content :where(ul, ol) {
+    padding-left: 1.625rem;
+  }
+
+  .content li {
+    margin-block: 0.5rem;
+    padding-left: 0.375rem;
+  }
+
+  .content li::marker {
+    color: var(--on-surface-muted);
+  }
+
+  .content li > p {
+    margin-block: 0;
+  }
+
+  .content li > :where(ul, ol) {
+    margin-block: 0.5rem 0;
+  }
+
+  .content strong {
+    color: var(--on-surface);
+    font-weight: 700;
+  }
+
+  .content a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  .content blockquote {
+    margin-inline: 2ch 0;
+    padding-left: 2ch;
+    border-left: 2px solid rgb(var(--color-primary-rgb) / 0.65);
+    color: var(--on-surface-variant);
+    font-style: italic;
+  }
+
+  .content :not(pre) > code {
+    color: var(--primary);
+    font-size: inherit;
+    font-weight: 400;
+  }
+
+  .content pre {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .content table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .content th,
+  .content td {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid rgb(var(--color-on-surface-rgb) / 0.12);
+    text-align: left;
+  }
+
+  .content th {
+    border-color: rgb(var(--color-on-surface-rgb) / 0.18);
+    color: var(--on-surface);
+    font-weight: 700;
+  }
+
+  .content hr {
+    border: 0;
+    border-top: 1px solid var(--hairline);
+  }
+
+  .content input[type="checkbox"] {
+    appearance: none;
+    width: 0.875rem;
+    height: 0.875rem;
+    margin: 0 0.5rem 0 0;
+    display: inline-grid;
+    place-content: center;
+    vertical-align: -0.125rem;
+    accent-color: var(--primary);
+    background-color: var(--surface);
+    border: 1px solid rgb(var(--color-on-surface-rgb) / 0.45);
+    border-radius: 0.125rem;
+    border-color: rgb(var(--color-on-surface-rgb) / 0.45);
+    color: var(--primary);
+  }
+
+  .content input[type="checkbox"]:checked {
+    background-color: var(--surface);
+    background-image: var(--checkbox-checkmark);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-color: var(--primary);
+  }
+}
+
+@layer responsive {
+  @media (min-width: 768px) {
+    .search-panel {
+      grid-template-columns: minmax(14rem, 24rem) 1fr;
+    }
+
+    .search-results {
+      border-right: 1px solid var(--outline-soft);
+      border-bottom: 0;
+    }
+
+    .search-preview {
+      padding: var(--space-8);
+    }
+
+    .search-message {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .site-shell {
+      flex-direction: column;
+      gap: var(--space-8);
+      padding: var(--space-8) var(--space-4);
+    }
+
+    .site-sidebar {
+      width: auto;
+      padding-right: 0;
+      padding-bottom: var(--space-8);
+      border-right: 0;
+      border-bottom: 1px solid var(--hairline);
+    }
+
+    .site-main {
+      max-width: none;
+    }
+
+    .search-dialog {
+      margin-top: var(--space-4);
+    }
+  }
+}

themes/starless/layouts/_default/baseof.html

@@ -7,270 +7,38 @@
     <meta name="color-scheme" content="dark">
     <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ .Title }} | {{ site.Title }}{{ end }}</title>
     <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ site.Params.description }}{{ end }}">
-    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
     <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=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+    {{ $style := resources.Get "css/starless.css" | minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
     {{ if .Params.math }}
       <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
     {{ end }}
-    {{- $palette := dict
-      "surface" "22 20 19"
-      "surface-container-lowest" "12 11 10"
-      "surface-container-low" "29 26 25"
-      "on-surface" "234 228 226"
-      "on-surface-variant" "210 199 197"
-      "primary" "209 140 129"
-      "primary-container" "91 44 35"
-      "on-primary-container" "255 218 207"
-      "outline" "150 141 138"
-    -}}
-    {{- $primaryCheckmark := printf "rgb(%s)" (replace (index $palette "primary") " " "%20") -}}
-    <script>
-      const palette = {{ $palette | jsonify | safeJS }};
-
-      tailwind.config = {
-        darkMode: "class",
-        theme: {
-          extend: {
-            colors: Object.fromEntries(
-              Object.entries(palette).map(([name, value]) => [name, `rgb(${value} / <alpha-value>)`])
-            ),
-            borderRadius: {
-              DEFAULT: "0.25rem",
-              lg: "0.5rem",
-              xl: "0.75rem",
-              full: "9999px"
-            },
-            spacing: {
-              "container-max": "1120px",
-              "stack-lg": "32px",
-              "margin-mobile": "16px",
-              gutter: "24px",
-              "stack-sm": "4px",
-              "stack-md": "12px",
-              base: "8px"
-            },
-            fontFamily: {
-              "body-md": ["JetBrains Mono", "monospace"],
-              "body-lg": ["JetBrains Mono", "monospace"],
-              "display-lg": ["Cormorant Garamond", "serif"],
-              "headline-md": ["Cormorant Garamond", "serif"],
-              "label-sm": ["JetBrains Mono", "monospace"],
-              "display-lg-mobile": ["Cormorant Garamond", "serif"]
-            },
-            fontSize: {
-              "body-md": ["14px", { lineHeight: "24px", fontWeight: "400" }],
-              "body-lg": ["16px", { lineHeight: "28px", fontWeight: "400" }],
-              "display-lg": ["42px", { lineHeight: "1.2", fontWeight: "400" }],
-              "headline-md": ["24px", { lineHeight: "32px", fontWeight: "400" }],
-              "label-sm": ["12px", { lineHeight: "16px", fontWeight: "400" }],
-              "display-lg-mobile": ["32px", { lineHeight: "40px", fontWeight: "400" }]
-            }
-          }
-        }
-      }
-    </script>
-    <style>
-      :root {
-        {{- range $name, $value := $palette }}
-        --color-{{ $name }}-rgb: {{ $value }};
-        {{- end }}
-        --checkbox-checkmark: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='{{ $primaryCheckmark }}'/%3e%3c/svg%3e");
-      }
-
-      .material-symbols-outlined {
-        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-
-      body {
-        margin: 0;
-        background: rgb(var(--color-surface-rgb));
-        color: rgb(var(--color-on-surface-rgb));
-      }
-
-      aside {
-        color: rgb(var(--color-on-surface-variant-rgb));
-      }
-
-      /* ponytail: pin first-paint colors so Dark Reader cannot repaint default blue UI before Tailwind loads. */
-      aside > header a,
-      aside nav > div > a,
-      [data-search-open],
-      #search-dialog input,
-      #search-dialog [data-search-close] {
-        color: rgb(var(--color-on-surface-rgb));
-      }
-
-      [data-search-open] {
-        background: transparent;
-        border: 1px solid rgb(var(--color-outline-rgb) / 0.3);
-      }
-
-      #search-dialog input {
-        background: rgb(var(--color-surface-container-lowest-rgb) / 0.95);
-        border: 1px solid rgb(var(--color-outline-rgb) / 0.3);
-      }
-
-      .tree-item {
-        position: relative;
-      }
-
-      .tree-item::before {
-        content: '';
-        position: absolute;
-        left: -12px;
-        top: 0;
-        bottom: 0;
-        width: 1px;
-        background-color: rgb(var(--color-on-surface-rgb) / 0.1);
-      }
-
-      #search-dialog {
-        margin-top: 6rem;
-      }
-
-      #search-dialog::backdrop {
-        background: rgb(var(--color-surface-container-lowest-rgb) / 0.86);
-      }
-
-      .highlight pre {
-        padding: 0.5rem 1rem;
-      }
-
-      .prose.prose-invert {
-        --tw-prose-invert-body: rgb(var(--color-on-surface-rgb) / 0.9);
-        --tw-prose-invert-headings: rgb(var(--color-on-surface-rgb));
-        --tw-prose-invert-bold: rgb(var(--color-on-surface-rgb));
-        --tw-prose-invert-links: rgb(var(--color-primary-rgb));
-        --tw-prose-invert-quotes: rgb(var(--color-on-surface-variant-rgb));
-        --tw-prose-invert-quote-borders: rgb(var(--color-primary-rgb) / 0.65);
-        --tw-prose-invert-counters: rgb(var(--color-on-surface-variant-rgb));
-        --tw-prose-invert-bullets: rgb(var(--color-on-surface-variant-rgb));
-        --tw-prose-invert-hr: rgb(var(--color-on-surface-rgb) / 0.1);
-        --tw-prose-invert-th-borders: rgb(var(--color-on-surface-rgb) / 0.18);
-        --tw-prose-invert-td-borders: rgb(var(--color-on-surface-rgb) / 0.12);
-      }
-
-      .prose h1,
-      .prose h2,
-      .prose h3,
-      .prose h4 {
-        font-family: "Cormorant Garamond", serif;
-        font-weight: 400;
-      }
-
-      .prose h1,
-      .prose h2 {
-        text-decoration: underline;
-        text-decoration-color: rgb(var(--color-on-surface-rgb) / 0.35);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 0.18em;
-      }
-
-      .prose h2 {
-        font-size: 1.5rem;
-        line-height: 2rem;
-        margin-top: 2rem;
-        margin-bottom: 0.75rem;
-      }
-
-      .prose h3 {
-        font-size: 1.40625rem;
-        line-height: 1.90625rem;
-        font-weight: 500;
-      }
-
-      .prose h4 {
-        font-size: 1.1875rem;
-        line-height: 1.6875rem;
-        font-weight: 500;
-      }
-
-      .prose blockquote {
-        border-left-width: 2px;
-        padding-left: 1rem;
-      }
-
-      .prose blockquote p:first-of-type::before,
-      .prose blockquote p:last-of-type::after,
-      .prose code::before,
-      .prose code::after {
-        content: none;
-      }
-
-      .prose :not(pre) > code {
-        color: rgb(var(--color-primary-rgb));
-        font-size: inherit;
-        font-weight: 400;
-      }
-
-      .prose table {
-        border-collapse: collapse;
-        width: 100%;
-      }
-
-      .prose th,
-      .prose td {
-        border: 1px solid rgb(var(--color-on-surface-rgb) / 0.12);
-        padding: 0.5rem 0.75rem;
-      }
-
-      .prose th {
-        border-color: rgb(var(--color-on-surface-rgb) / 0.18);
-      }
-
-      .prose hr {
-        border-color: rgb(var(--color-on-surface-rgb) / 0.1);
-      }
-
-      .prose input[type="checkbox"] {
-        accent-color: rgb(var(--color-primary-rgb));
-        background-color: rgb(var(--color-surface-rgb));
-        border-color: rgb(var(--color-on-surface-rgb) / 0.45);
-        color: rgb(var(--color-primary-rgb));
-      }
-
-      .prose input[type="checkbox"]:checked {
-        background-color: rgb(var(--color-surface-rgb));
-        background-image: var(--checkbox-checkmark);
-        border-color: rgb(var(--color-primary-rgb));
-      }
-
-      @media (max-width: 768px) {
-        #search-dialog {
-          margin-top: 1rem;
-        }
-      }
-    </style>
   </head>
-  <body class="bg-surface text-on-surface font-body-md min-h-screen flex antialiased">
+  <body>
-    <div class="flex w-full max-w-7xl mx-auto px-8 py-16 gap-16">
+    <div class="site-shell">
       {{ partial "sidebar.html" . }}
-      <main class="flex-1 max-w-3xl pt-2">
+      <main class="site-main">
         {{ block "main" . }}{{ end }}
       </main>
     </div>
-    <dialog id="search-dialog" class="w-[min(78rem,calc(100vw-2rem))] max-w-none bg-transparent p-0 text-on-surface backdrop:bg-surface/90">
+    <dialog id="search-dialog" class="search-dialog">
-      <div class="flex flex-col gap-4">
+      <div class="search-stack">
-        <div class="relative">
+        <div class="search-field">
-          <span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[20px]" aria-hidden="true">search</span>
+          <span class="material-symbols-outlined search-field-icon" aria-hidden="true">search</span>
-          <input id="search-input" class="w-full bg-surface-container-lowest/95 text-on-surface border border-outline/30 rounded py-2.5 pl-10 pr-12 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors placeholder-on-surface-variant/60 text-body-md" type="text" placeholder="Search" autocomplete="off" spellcheck="false" aria-label="Search">
+          <input id="search-input" class="search-input" type="text" placeholder="Search" autocomplete="off" spellcheck="false" aria-label="Search">
-          <button class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded text-on-surface-variant hover:text-on-surface focus:outline-none focus:ring-1 focus:ring-primary" type="button" data-search-close aria-label="Close search">
+          <button class="search-close" type="button" data-search-close aria-label="Close search">
-            <span class="material-symbols-outlined text-[18px]" aria-hidden="true">close</span>
+            <span class="material-symbols-outlined" aria-hidden="true">close</span>
           </button>
         </div>
-        <div class="grid min-h-[28rem] max-h-[70vh] overflow-hidden rounded border border-outline/30 bg-surface-container-lowest/95 md:grid-cols-[minmax(14rem,24rem)_1fr]" data-search-panel hidden>
+        <div class="search-panel" data-search-panel hidden>
-          <div class="overflow-y-auto border-b border-outline/30 md:border-b-0 md:border-r" data-search-results></div>
+          <div class="search-results" data-search-results></div>
-          <article class="overflow-y-auto p-6 md:p-8" data-search-preview>
+          <article class="search-preview" data-search-preview>
-            <p class="text-on-surface-variant">Search</p>
+            <p class="search-placeholder">Search</p>
           </article>
-          <div class="flex min-h-[28rem] items-center justify-center p-6 text-center text-on-surface-variant md:col-span-2" data-search-message hidden></div>
+          <div class="search-message" data-search-message hidden></div>
         </div>
       </div>
     </dialog>
@@ -388,7 +156,7 @@
             if (!part) return;
             if (pattern.test(part)) {
               const mark = document.createElement("mark");
-              mark.className = "rounded bg-primary-container px-0.5 text-on-primary-container";
+              mark.className = "search-mark";
               mark.textContent = part;
               node.appendChild(mark);
             } else {
@@ -401,16 +169,16 @@
         const showPreview = (doc, query) => {
           previewEl.replaceChildren();
           const title = document.createElement("a");
-          title.className = "block font-display-lg text-headline-md text-on-surface hover:text-primary transition-colors";
+          title.className = "search-preview-title";
           title.href = doc.url;
           highlight(title, doc.title, query);
 
           const summary = document.createElement("p");
-          summary.className = "mt-4 text-on-surface/90";
+          summary.className = "search-preview-summary";
           highlight(summary, doc.summary || "", query);
 
           const body = document.createElement("p");
-          body.className = "mt-6 whitespace-pre-wrap text-on-surface-variant";
+          body.className = "search-preview-body";
           highlight(body, snippet(doc.content, query), query);
 
           previewEl.append(title, summary, body);
@@ -448,7 +216,7 @@
           showResultsPanel();
           matches.forEach((doc, index) => {
             const link = document.createElement("a");
-            link.className = "block border-b border-outline/30 px-4 py-3 text-on-surface hover:bg-surface-container-low focus:bg-surface-container-low focus:outline-none";
+            link.className = "search-result";
             link.href = doc.url;
             link.textContent = doc.title;
             link.addEventListener("mouseenter", () => showPreview(doc, query));

themes/starless/layouts/_default/home.html

@@ -1,14 +1,14 @@
 {{ define "main" }}
-  <div class="prose prose-invert max-w-none text-body-md text-on-surface/90 space-y-6">
+  <div class="content">
     {{ .Content }}
   </div>
-  <div class="mt-12">
+  <div class="page-actions">
-    <a class="inline-flex items-center text-on-surface-variant hover:text-primary transition-colors font-body-md italic mb-4" href="{{ `/docs/` | relLangURL }}">
+    <a class="page-link" href="{{ `/docs/` | relLangURL }}">
-      Read the guide <span class="material-symbols-outlined ml-1 text-[18px]">arrow_forward</span>
+      Read the guide <span class="material-symbols-outlined">arrow_forward</span>
     </a>
-    <hr class="border-on-surface/10">
+    <hr class="rule">
   </div>
-  <div class="mt-auto pt-32 pb-8 font-display-lg italic text-on-surface-variant text-lg">
+  <div class="footer-note page-footer">
     {{ site.Params.homeFooter }}
   </div>
 {{ end }}

themes/starless/layouts/_default/list.html

@@ -1,27 +1,27 @@
 {{ define "main" }}
-  <div class="prose prose-invert max-w-none text-body-md text-on-surface/90 space-y-6">
+  <div class="content">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
   </div>
-  <div class="mt-12">
+  <div class="page-actions">
-    <a class="inline-flex items-center text-on-surface-variant hover:text-primary transition-colors font-body-md italic mb-4" href="{{ `/` | relLangURL }}">
+    <a class="page-link" href="{{ `/` | relLangURL }}">
-      Home <span class="material-symbols-outlined ml-1 text-[18px]">arrow_back</span>
+      Home <span class="material-symbols-outlined">arrow_back</span>
     </a>
-    <hr class="border-on-surface/10">
+    <hr class="rule">
   </div>
-  <div class="mt-8 divide-y divide-on-surface/10">
+  <div class="page-list">
     {{ range .Pages.ByWeight }}
-      <article class="py-5">
+      <article>
-        <p class="mb-3"><a class="hover:text-primary transition-colors" href="{{ .RelPermalink }}">{{ .Title }}</a></p>
+        <p class="entry-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
         {{ with .Params.summary }}
-          <p class="text-on-surface/90">{{ . }}</p>
+          <p class="entry-summary">{{ . }}</p>
         {{ else }}
-          {{ with .Summary }}<p class="text-on-surface/90">{{ . | plainify }}</p>{{ end }}
+          {{ with .Summary }}<p class="entry-summary">{{ . | plainify }}</p>{{ end }}
         {{ end }}
       </article>
     {{ end }}
   </div>
-  <div class="mt-auto pt-32 pb-8 font-display-lg italic text-on-surface-variant text-lg">
+  <div class="footer-note page-footer">
     {{ site.Params.homeFooter }}
   </div>
 {{ end }}

themes/starless/layouts/_default/single.html

@@ -1,15 +1,15 @@
 {{ define "main" }}
-  <div class="prose prose-invert max-w-none text-body-md text-on-surface/90 space-y-6">
+  <div class="content">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
   </div>
-  <div class="mt-12">
+  <div class="page-actions">
-    <a class="inline-flex items-center text-on-surface-variant hover:text-primary transition-colors font-body-md italic mb-4" href="{{ printf "/%s/" .Section | relLangURL }}">
+    <a class="page-link" href="{{ printf "/%s/" .Section | relLangURL }}">
-      {{ .Section }} <span class="material-symbols-outlined ml-1 text-[18px]">arrow_back</span>
+      {{ .Section }} <span class="material-symbols-outlined">arrow_back</span>
     </a>
-    <hr class="border-on-surface/10">
+    <hr class="rule">
   </div>
-  <div class="mt-auto pt-32 pb-8 font-display-lg italic text-on-surface-variant text-lg">
+  <div class="footer-note page-footer">
     {{ site.Params.homeFooter }}
   </div>
 {{ end }}

themes/starless/layouts/partials/explorer-tree.html

@@ -1,14 +1,14 @@
 {{- range .nodes.ByWeight -}}
   {{- $isCurrent := eq .RelPermalink $.currentPage.RelPermalink -}}
   {{- if eq $.level 0 -}}
-    <div class="flex flex-col">
+    <div class="tree-node">
-      <a class="flex items-center {{ if $isCurrent }}text-primary{{ else if .IsSection }}text-on-surface{{ else }}text-on-surface-variant{{ end }} hover:text-primary transition-colors py-1 text-left w-full group" href="{{ .RelPermalink }}">
+      <a class="tree-link{{ if .IsSection }} tree-link--section{{ end }}{{ if $isCurrent }} tree-link--current{{ end }}" href="{{ .RelPermalink }}">
-        <span class="material-symbols-outlined text-[16px] mr-1 text-on-surface-variant group-hover:text-primary">{{ if .IsSection }}expand_more{{ else }}chevron_right{{ end }}</span>
+        <span class="material-symbols-outlined tree-icon">{{ if .IsSection }}expand_more{{ else }}chevron_right{{ end }}</span>
         {{ .LinkTitle }}
       </a>
       {{- if .IsSection -}}
         {{- with .Pages.ByWeight -}}
-          <div class="ml-6 flex flex-col gap-1 text-on-surface-variant text-[13px] tree-item mt-1 mb-2">
+          <div class="tree-children">
             {{ partial "explorer-tree.html" (dict "nodes" . "level" (add $.level 1) "currentPage" $.currentPage) }}
           </div>
         {{- end -}}
@@ -16,19 +16,19 @@
     </div>
   {{- else -}}
     {{- if .IsSection -}}
-      <div class="flex flex-col">
+      <div class="tree-node">
-        <a class="flex items-center {{ if $isCurrent }}text-primary{{ end }} hover:text-on-surface transition-colors py-0.5" href="{{ .RelPermalink }}">
+        <a class="tree-link tree-link--nested{{ if $isCurrent }} tree-link--current{{ end }}" href="{{ .RelPermalink }}">
-          <span class="material-symbols-outlined text-[14px] mr-1 text-on-surface-variant">expand_more</span>
+          <span class="material-symbols-outlined tree-icon tree-icon--small">expand_more</span>
           {{ .LinkTitle }}
         </a>
         {{- with .Pages.ByWeight -}}
-          <div class="ml-5 flex flex-col gap-1 text-on-surface-variant text-[13px] tree-item mt-1 italic">
+          <div class="tree-children tree-children--nested">
             {{ partial "explorer-tree.html" (dict "nodes" . "level" (add $.level 1) "currentPage" $.currentPage) }}
           </div>
         {{- end -}}
       </div>
     {{- else -}}
-      <a class="{{ if $isCurrent }}text-primary{{ end }} hover:text-on-surface transition-colors py-0.5 italic" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+      <a class="tree-link tree-link--leaf{{ if $isCurrent }} tree-link--current{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
     {{- end -}}
   {{- end -}}
 {{- end -}}

themes/starless/layouts/partials/sidebar.html

@@ -1,21 +1,21 @@
-<aside class="w-72 flex-shrink-0 flex flex-col gap-12 border-r border-on-surface/10 pr-8">
+<aside class="site-sidebar">
   <header>
-    <a class="font-display-lg text-display-lg text-on-surface" href="{{ `/` | relLangURL }}">{{ site.Title }}</a>
+    <a class="site-title" href="{{ `/` | relLangURL }}">{{ site.Title }}</a>
   </header>
 
-  <button class="relative w-full bg-transparent text-on-surface border border-outline/30 rounded py-1.5 pl-8 pr-3 text-left focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors text-[13px]" type="button" data-search-open aria-haspopup="dialog">
+  <button class="search-trigger" type="button" data-search-open aria-haspopup="dialog">
-    <span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[18px]" aria-hidden="true">search</span>
+    <span class="material-symbols-outlined" aria-hidden="true">search</span>
-    <span class="text-on-surface-variant/70">Search</span>
+    <span class="search-trigger-label">Search</span>
   </button>
 
-  <nav class="flex flex-col gap-1 text-[14px]" aria-label="Primary">
+  <nav class="site-nav" aria-label="Primary">
     {{ with site.Sections }}
       {{ partial "explorer-tree.html" (dict "nodes" . "level" 0 "currentPage" $) }}
     {{ end }}
   </nav>
 
   {{ with site.Params.sidebarFooter }}
-    <div class="mt-auto pt-8 font-display-lg italic text-on-surface-variant text-lg">
+    <div class="footer-note">
       {{ . }}
     </div>
   {{ end }}