hugo-starless
Code Issues

feat: migrate from using tailwind

Browse Source
This commit is contained in:
ruinivist
2026-06-22 20:54:21 +00:00
parent b81a2e57bd
commit 39700ad953
8 changed files with 752 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/starless/layouts/_default/baseof.html
+22 -254
View File
@@ -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">
<div class="flex w-full max-w-7xl mx-auto px-8 py-16 gap-16">
<body>
<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">
<div class="flex flex-col gap-4">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[20px]" 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">
<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">
<span class="material-symbols-outlined text-[18px]" aria-hidden="true">close</span>
<dialog id="search-dialog" class="search-dialog">
<div class="search-stack">
<div class="search-field">
<span class="material-symbols-outlined search-field-icon" aria-hidden="true">search</span>
<input id="search-input" class="search-input" type="text" placeholder="Search" autocomplete="off" spellcheck="false" aria-label="Search">
<button class="search-close" type="button" data-search-close aria-label="Close search">
<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="overflow-y-auto border-b border-outline/30 md:border-b-0 md:border-r" data-search-results></div>
<article class="overflow-y-auto p-6 md:p-8" data-search-preview>
<p class="text-on-surface-variant">Search</p>
<div class="search-panel" data-search-panel hidden>
<div class="search-results" data-search-results></div>
<article class="search-preview" data-search-preview>
<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));