feat: migrate from using tailwind
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
|
||||
@@ -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">
|
||||
<a class="inline-flex items-center text-on-surface-variant hover:text-primary transition-colors font-body-md italic mb-4" href="{{ `/docs/` | relLangURL }}">
|
||||
Read the guide <span class="material-symbols-outlined ml-1 text-[18px]">arrow_forward</span>
|
||||
<div class="page-actions">
|
||||
<a class="page-link" href="{{ `/docs/` | relLangURL }}">
|
||||
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 }}
|
||||
|
||||
@@ -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">
|
||||
<a class="inline-flex items-center text-on-surface-variant hover:text-primary transition-colors font-body-md italic mb-4" href="{{ `/` | relLangURL }}">
|
||||
Home <span class="material-symbols-outlined ml-1 text-[18px]">arrow_back</span>
|
||||
<div class="page-actions">
|
||||
<a class="page-link" href="{{ `/` | relLangURL }}">
|
||||
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">
|
||||
<p class="mb-3"><a class="hover:text-primary transition-colors" href="{{ .RelPermalink }}">{{ .Title }}</a></p>
|
||||
<article>
|
||||
<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 }}
|
||||
|
||||
@@ -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">
|
||||
<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 }}">
|
||||
{{ .Section }} <span class="material-symbols-outlined ml-1 text-[18px]">arrow_back</span>
|
||||
<div class="page-actions">
|
||||
<a class="page-link" href="{{ printf "/%s/" .Section | relLangURL }}">
|
||||
{{ .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 }}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
{{- range .nodes.ByWeight -}}
|
||||
{{- $isCurrent := eq .RelPermalink $.currentPage.RelPermalink -}}
|
||||
{{- if eq $.level 0 -}}
|
||||
<div class="flex flex-col">
|
||||
<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 }}">
|
||||
<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>
|
||||
<div class="tree-node">
|
||||
<a class="tree-link{{ if .IsSection }} tree-link--section{{ end }}{{ if $isCurrent }} tree-link--current{{ end }}" href="{{ .RelPermalink }}">
|
||||
<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">
|
||||
<a class="flex items-center {{ if $isCurrent }}text-primary{{ end }} hover:text-on-surface transition-colors py-0.5" href="{{ .RelPermalink }}">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1 text-on-surface-variant">expand_more</span>
|
||||
<div class="tree-node">
|
||||
<a class="tree-link tree-link--nested{{ if $isCurrent }} tree-link--current{{ end }}" href="{{ .RelPermalink }}">
|
||||
<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 -}}
|
||||
|
||||
@@ -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">
|
||||
<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[18px]" aria-hidden="true">search</span>
|
||||
<span class="text-on-surface-variant/70">Search</span>
|
||||
<button class="search-trigger" type="button" data-search-open aria-haspopup="dialog">
|
||||
<span class="material-symbols-outlined" aria-hidden="true">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 }}
|
||||
|
||||
Reference in New Issue
Block a user