From 39700ad95309e513e04ca89a2fe4d1b1343a6df9 Mon Sep 17 00:00:00 2001 From: ruinivist Date: Mon, 22 Jun 2026 20:54:21 +0000 Subject: [PATCH] feat: migrate from using tailwind --- content/docs/how-it-looks.md | 8 + themes/starless/assets/css/starless.css | 683 ++++++++++++++++++ themes/starless/layouts/_default/baseof.html | 276 +------ themes/starless/layouts/_default/home.html | 12 +- themes/starless/layouts/_default/list.html | 22 +- themes/starless/layouts/_default/single.html | 12 +- .../layouts/partials/explorer-tree.html | 18 +- themes/starless/layouts/partials/sidebar.html | 14 +- 8 files changed, 752 insertions(+), 293 deletions(-) create mode 100644 themes/starless/assets/css/starless.css diff --git a/content/docs/how-it-looks.md b/content/docs/how-it-looks.md index 93c85fc..6ef117c 100644 --- a/content/docs/how-it-looks.md +++ b/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/). diff --git a/themes/starless/assets/css/starless.css b/themes/starless/assets/css/starless.css new file mode 100644 index 0000000..985f3f2 --- /dev/null +++ b/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); + } + } +} diff --git a/themes/starless/layouts/_default/baseof.html b/themes/starless/layouts/_default/baseof.html index bfdc6a4..192c2b3 100644 --- a/themes/starless/layouts/_default/baseof.html +++ b/themes/starless/layouts/_default/baseof.html @@ -7,270 +7,38 @@ {{ if .IsHome }}{{ site.Title }}{{ else }}{{ .Title }} | {{ site.Title }}{{ end }} - + {{ $style := resources.Get "css/starless.css" | minify | fingerprint }} + {{ if .Params.math }} {{ 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") -}} - - - -
+ +
{{ partial "sidebar.html" . }} -
+
{{ block "main" . }}{{ end }}
- -
-
- - -
-
@@ -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)); diff --git a/themes/starless/layouts/_default/home.html b/themes/starless/layouts/_default/home.html index 5926c3e..96e9780 100644 --- a/themes/starless/layouts/_default/home.html +++ b/themes/starless/layouts/_default/home.html @@ -1,14 +1,14 @@ {{ define "main" }} -
+
{{ .Content }}
-
- - Read the guide arrow_forward +
+ + Read the guide arrow_forward -
+
-
+
{{ site.Params.homeFooter }}
{{ end }} diff --git a/themes/starless/layouts/_default/list.html b/themes/starless/layouts/_default/list.html index f33f122..07d7026 100644 --- a/themes/starless/layouts/_default/list.html +++ b/themes/starless/layouts/_default/list.html @@ -1,27 +1,27 @@ {{ define "main" }} -
+

{{ .Title }}

{{ .Content }}
-
- - Home arrow_back +
+ + Home arrow_back -
+
-
+
{{ range .Pages.ByWeight }} -
-

{{ .Title }}

+
+

{{ .Title }}

{{ with .Params.summary }} -

{{ . }}

+

{{ . }}

{{ else }} - {{ with .Summary }}

{{ . | plainify }}

{{ end }} + {{ with .Summary }}

{{ . | plainify }}

{{ end }} {{ end }}
{{ end }}
-
+
{{ site.Params.homeFooter }}
{{ end }} diff --git a/themes/starless/layouts/_default/single.html b/themes/starless/layouts/_default/single.html index 1d1c1e1..9eb6360 100644 --- a/themes/starless/layouts/_default/single.html +++ b/themes/starless/layouts/_default/single.html @@ -1,15 +1,15 @@ {{ define "main" }} -
+

{{ .Title }}

{{ .Content }}
-
- - {{ .Section }} arrow_back +
+ + {{ .Section }} arrow_back -
+
-
+
{{ site.Params.homeFooter }}
{{ end }} diff --git a/themes/starless/layouts/partials/explorer-tree.html b/themes/starless/layouts/partials/explorer-tree.html index fc4f2f7..3bdb2f0 100644 --- a/themes/starless/layouts/partials/explorer-tree.html +++ b/themes/starless/layouts/partials/explorer-tree.html @@ -1,14 +1,14 @@ {{- range .nodes.ByWeight -}} {{- $isCurrent := eq .RelPermalink $.currentPage.RelPermalink -}} {{- if eq $.level 0 -}} -
- - {{ if .IsSection }}expand_more{{ else }}chevron_right{{ end }} +
+ + {{ if .IsSection }}expand_more{{ else }}chevron_right{{ end }} {{ .LinkTitle }} {{- if .IsSection -}} {{- with .Pages.ByWeight -}} -
+
{{ partial "explorer-tree.html" (dict "nodes" . "level" (add $.level 1) "currentPage" $.currentPage) }}
{{- end -}} @@ -16,19 +16,19 @@
{{- else -}} {{- if .IsSection -}} -
- - expand_more +
+ + expand_more {{ .LinkTitle }} {{- with .Pages.ByWeight -}} -
+
{{ partial "explorer-tree.html" (dict "nodes" . "level" (add $.level 1) "currentPage" $.currentPage) }}
{{- end -}}
{{- else -}} - {{ .LinkTitle }} + {{ .LinkTitle }} {{- end -}} {{- end -}} {{- end -}} diff --git a/themes/starless/layouts/partials/sidebar.html b/themes/starless/layouts/partials/sidebar.html index ca27d4f..a8787a8 100644 --- a/themes/starless/layouts/partials/sidebar.html +++ b/themes/starless/layouts/partials/sidebar.html @@ -1,21 +1,21 @@ -