summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/footnotes.js69
-rw-r--r--public/main.css66
-rw-r--r--public/style.css664
-rw-r--r--public/styles/terminal.css5
4 files changed, 627 insertions, 177 deletions
diff --git a/public/footnotes.js b/public/footnotes.js
new file mode 100644
index 0000000..50f709e
--- /dev/null
+++ b/public/footnotes.js
@@ -0,0 +1,69 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const area = document.querySelector("[data-scroll-area]");
+ const refs = [...document.querySelectorAll("a.footnote-ref")];
+ if (!area || refs.length === 0) return;
+
+ const panel = document.createElement("div");
+ panel.className = "sidenotes";
+ document.body.append(panel);
+
+ const items = refs.map((ref) => {
+ ref.addEventListener("click", (e) => e.preventDefault());
+
+ const note = document.getElementById(ref.getAttribute("href").slice(1));
+ const num = document.createElement("span");
+ num.className = "sidenote-num";
+ num.textContent = ref.textContent;
+
+ const body = document.createElement("div");
+ body.append(...note.cloneNode(true).childNodes);
+ body.querySelector(".footnote-backref")?.remove();
+
+ const el = document.createElement("div");
+ el.className = "sidenote";
+ el.append(num, body);
+ panel.append(el);
+ return { ref, el };
+ });
+
+ const gap = 6;
+ let queued = false;
+
+ const layout = () => {
+ queued = false;
+ const rect = area.getBoundingClientRect();
+ const frame = document.querySelector(".terminal").getBoundingClientRect();
+ const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+ const left = frame.right + rem;
+
+ Object.assign(panel.style, {
+ left: `${left}px`,
+ top: `${rect.top}px`,
+ width: `${window.innerWidth - left - rem}px`,
+ height: `${rect.height}px`,
+ });
+
+ let bottom = -Infinity;
+ for (const { ref, el } of items) {
+ const top = Math.max(
+ ref.getBoundingClientRect().top - rect.top,
+ bottom + gap,
+ );
+ el.style.top = `${top}px`;
+ bottom = top + el.offsetHeight;
+ }
+ };
+
+ const schedule = () => {
+ if (!queued) {
+ queued = true;
+ requestAnimationFrame(layout);
+ }
+ };
+
+ area.addEventListener("scroll", schedule, { passive: true });
+ window.addEventListener("resize", schedule);
+ new ResizeObserver(schedule).observe(area);
+ document.fonts?.ready.then(schedule);
+ layout();
+});
diff --git a/public/main.css b/public/main.css
index 772f896..8f9bb7d 100644
--- a/public/main.css
+++ b/public/main.css
@@ -6,7 +6,67 @@
@source "../**/*.go";
@source "../**/*.templ";
-@keyframes pop { 50% { transform: scale(1.3); } }
-[data-copied] svg { animation: pop 0.25s; }
+@keyframes pop {
+ 50% {
+ transform: scale(1.3);
+ }
+}
+[data-copied] svg {
+ animation: pop 0.25s;
+}
-@keyframes bump { 50% { transform: scale(1.03); } }
+@keyframes bump {
+ 50% {
+ transform: scale(1.03);
+ }
+}
+
+@plugin "@tailwindcss/typography";
+
+.prose {
+ --tw-prose-body: var(--text);
+ --tw-prose-headings: var(--primary);
+ --tw-prose-links: var(--secondary);
+ --tw-prose-bold: var(--text);
+ --tw-prose-bullets: var(--alt);
+ --tw-prose-counters: var(--alt);
+ --tw-prose-hr: var(--alt);
+ --tw-prose-quotes: var(--text);
+ --tw-prose-quote-borders: var(--alt);
+ --tw-prose-captions: var(--alt);
+ --tw-prose-code: var(--extra);
+ --tw-prose-pre-code: var(--text);
+ --tw-prose-pre-bg: rgb(0 0 0 / 0.3);
+ --tw-prose-th-borders: var(--alt);
+ --tw-prose-td-borders: var(--alt);
+}
+
+.js .footnotes {
+ display: none;
+}
+
+.sidenotes {
+ position: fixed;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+.sidenote {
+ position: absolute;
+ left: 0;
+ right: 0;
+ display: flex;
+ gap: 1ch;
+ padding: 0.4rem 0.6rem;
+ border: 0.1rem solid var(--alt);
+ background: var(--background);
+ font-family: var(--font-normal);
+ font-size: 14px;
+ line-height: 1.4;
+ pointer-events: auto;
+}
+
+.sidenote-num {
+ flex-shrink: 0;
+ color: var(--secondary);
+}
diff --git a/public/style.css b/public/style.css
index db025d0..f2d0a22 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7,32 +7,14 @@
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
- --color-red-400: oklch(70.4% 0.191 22.216);
- --color-red-800: oklch(44.4% 0.177 26.899);
- --color-red-950: oklch(25.8% 0.092 26.042);
- --color-emerald-400: oklch(76.5% 0.177 163.223);
- --color-emerald-800: oklch(43.2% 0.095 166.913);
- --color-emerald-950: oklch(26.2% 0.051 172.552);
--color-gray-700: oklch(37.3% 0.034 259.733);
- --color-zinc-200: oklch(92% 0.004 286.32);
- --color-zinc-300: oklch(87.1% 0.006 286.286);
- --color-zinc-400: oklch(70.5% 0.015 286.067);
- --color-zinc-500: oklch(55.2% 0.016 285.938);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--container-3xl: 48rem;
- --text-xs: 0.75rem;
- --text-xs--line-height: calc(1 / 0.75);
- --text-sm: 0.875rem;
- --text-sm--line-height: calc(1.25 / 0.875);
- --text-2xl: 1.5rem;
- --text-2xl--line-height: calc(2 / 1.5);
--font-weight-normal: 400;
--font-weight-bold: 700;
- --tracking-wider: 0.05em;
--leading-relaxed: 1.625;
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
@@ -188,9 +170,6 @@
}
}
@layer utilities {
- .pointer-events-none {
- pointer-events: none;
- }
.invisible {
visibility: hidden;
}
@@ -212,9 +191,6 @@
.inset-x-\[0\.3rem\] {
inset-inline: 0.3rem;
}
- .top-1 {
- top: var(--spacing);
- }
.top-1\/2 {
top: calc(1 / 2 * 100%);
}
@@ -227,6 +203,9 @@
.top-\[0\.6rem\] {
top: 0.6rem;
}
+ .top-\[calc\(50\%-20rem\)\] {
+ top: calc(50% - 20rem);
+ }
.right-\[0\.6rem\] {
right: 0.6rem;
}
@@ -248,6 +227,9 @@
.left-\[0\.625rem\] {
left: 0.625rem;
}
+ .left-\[calc\(50\%\+38\.5rem\)\] {
+ left: calc(50% + 38.5rem);
+ }
.z-10 {
z-index: 10;
}
@@ -287,12 +269,430 @@
.my-\[5vw\] {
margin-block: 5vw;
}
+ .prose {
+ color: var(--tw-prose-body);
+ max-width: 65ch;
+ :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ }
+ :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-lead);
+ font-size: 1.25em;
+ line-height: 1.6;
+ margin-top: 1.2em;
+ margin-bottom: 1.2em;
+ }
+ :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-links);
+ text-decoration: underline;
+ font-weight: 500;
+ }
+ :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-bold);
+ font-weight: 600;
+ }
+ :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: decimal;
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ padding-inline-start: 1.625em;
+ }
+ :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: upper-alpha;
+ }
+ :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: lower-alpha;
+ }
+ :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: upper-alpha;
+ }
+ :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: lower-alpha;
+ }
+ :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: upper-roman;
+ }
+ :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: lower-roman;
+ }
+ :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: upper-roman;
+ }
+ :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: lower-roman;
+ }
+ :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: decimal;
+ }
+ :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ list-style-type: disc;
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ padding-inline-start: 1.625em;
+ }
+ :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+ font-weight: 400;
+ color: var(--tw-prose-counters);
+ }
+ :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+ color: var(--tw-prose-bullets);
+ }
+ :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 600;
+ margin-top: 1.25em;
+ }
+ :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ border-color: var(--tw-prose-hr);
+ border-top-width: 1px;
+ margin-top: 3em;
+ margin-bottom: 3em;
+ }
+ :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 500;
+ font-style: italic;
+ color: var(--tw-prose-quotes);
+ border-inline-start-width: 0.25rem;
+ border-inline-start-color: var(--tw-prose-quote-borders);
+ quotes: "\201C""\201D""\2018""\2019";
+ margin-top: 1.6em;
+ margin-bottom: 1.6em;
+ padding-inline-start: 1em;
+ }
+ :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
+ content: open-quote;
+ }
+ :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
+ content: close-quote;
+ }
+ :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 800;
+ font-size: 2.25em;
+ margin-top: 0;
+ margin-bottom: 0.8888889em;
+ line-height: 1.1111111;
+ }
+ :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 900;
+ color: inherit;
+ }
+ :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 700;
+ font-size: 1.5em;
+ margin-top: 2em;
+ margin-bottom: 1em;
+ line-height: 1.3333333;
+ }
+ :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 800;
+ color: inherit;
+ }
+ :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 600;
+ font-size: 1.25em;
+ margin-top: 1.6em;
+ margin-bottom: 0.6em;
+ line-height: 1.6;
+ }
+ :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 700;
+ color: inherit;
+ }
+ :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 600;
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+ line-height: 1.5;
+ }
+ :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 700;
+ color: inherit;
+ }
+ :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ display: block;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--tw-prose-kbd);
+ box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
+ font-size: 0.875em;
+ border-radius: 0.3125rem;
+ padding-top: 0.1875em;
+ padding-inline-end: 0.375em;
+ padding-bottom: 0.1875em;
+ padding-inline-start: 0.375em;
+ }
+ :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-code);
+ font-weight: 600;
+ font-size: 0.875em;
+ }
+ :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
+ content: "`";
+ }
+ :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
+ content: "`";
+ }
+ :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ font-size: 0.875em;
+ }
+ :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ font-size: 0.9em;
+ }
+ :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: inherit;
+ }
+ :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-pre-code);
+ background-color: var(--tw-prose-pre-bg);
+ overflow-x: auto;
+ font-weight: 400;
+ font-size: 0.875em;
+ line-height: 1.7142857;
+ margin-top: 1.7142857em;
+ margin-bottom: 1.7142857em;
+ border-radius: 0.375rem;
+ padding-top: 0.8571429em;
+ padding-inline-end: 1.1428571em;
+ padding-bottom: 0.8571429em;
+ padding-inline-start: 1.1428571em;
+ }
+ :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ background-color: transparent;
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+ font-weight: inherit;
+ color: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ line-height: inherit;
+ }
+ :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
+ content: none;
+ }
+ :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
+ content: none;
+ }
+ :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ width: 100%;
+ table-layout: auto;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ font-size: 0.875em;
+ line-height: 1.7142857;
+ }
+ :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ border-bottom-width: 1px;
+ border-bottom-color: var(--tw-prose-th-borders);
+ }
+ :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-headings);
+ font-weight: 600;
+ vertical-align: bottom;
+ padding-inline-end: 0.5714286em;
+ padding-bottom: 0.5714286em;
+ padding-inline-start: 0.5714286em;
+ }
+ :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ border-bottom-width: 1px;
+ border-bottom-color: var(--tw-prose-td-borders);
+ }
+ :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ border-bottom-width: 0;
+ }
+ :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ vertical-align: baseline;
+ }
+ :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ border-top-width: 1px;
+ border-top-color: var(--tw-prose-th-borders);
+ }
+ :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ vertical-align: top;
+ }
+ :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ text-align: start;
+ }
+ :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ color: var(--tw-prose-captions);
+ font-size: 0.875em;
+ line-height: 1.4285714;
+ margin-top: 0.8571429em;
+ }
+ --tw-prose-body: oklch(37.3% 0.034 259.733);
+ --tw-prose-headings: oklch(21% 0.034 264.665);
+ --tw-prose-lead: oklch(44.6% 0.03 256.802);
+ --tw-prose-links: oklch(21% 0.034 264.665);
+ --tw-prose-bold: oklch(21% 0.034 264.665);
+ --tw-prose-counters: oklch(55.1% 0.027 264.364);
+ --tw-prose-bullets: oklch(87.2% 0.01 258.338);
+ --tw-prose-hr: oklch(92.8% 0.006 264.531);
+ --tw-prose-quotes: oklch(21% 0.034 264.665);
+ --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
+ --tw-prose-captions: oklch(55.1% 0.027 264.364);
+ --tw-prose-kbd: oklch(21% 0.034 264.665);
+ --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
+ --tw-prose-code: oklch(21% 0.034 264.665);
+ --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
+ --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
+ --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
+ --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
+ --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
+ --tw-prose-invert-headings: #fff;
+ --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
+ --tw-prose-invert-links: #fff;
+ --tw-prose-invert-bold: #fff;
+ --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
+ --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
+ --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
+ --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
+ --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
+ --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
+ --tw-prose-invert-kbd: #fff;
+ --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
+ --tw-prose-invert-code: #fff;
+ --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
+ --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+ --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
+ --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
+ font-size: 1rem;
+ line-height: 1.75;
+ :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+ :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-start: 0.375em;
+ }
+ :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-start: 0.375em;
+ }
+ :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+ }
+ :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ }
+ :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+ }
+ :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ }
+ :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+ }
+ :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0.75em;
+ margin-bottom: 0.75em;
+ }
+ :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+ }
+ :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0.5em;
+ padding-inline-start: 1.625em;
+ }
+ :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+ :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+ :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+ :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+ :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-start: 0;
+ }
+ :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-end: 0;
+ }
+ :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-top: 0.5714286em;
+ padding-inline-end: 0.5714286em;
+ padding-bottom: 0.5714286em;
+ padding-inline-start: 0.5714286em;
+ }
+ :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-start: 0;
+ }
+ :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ padding-inline-end: 0;
+ }
+ :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+ }
+ :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-bottom: 0;
+ }
+ }
.mt-\[0\.5rem\] {
margin-top: 0.5rem;
}
.mt-\[0\.625vw\] {
margin-top: 0.625vw;
}
+ .mt-\[1rem\] {
+ margin-top: 1rem;
+ }
.mt-\[1vw\] {
margin-top: 1vw;
}
@@ -395,6 +795,9 @@
.h-full {
height: 100%;
}
+ .max-h-\[40rem\] {
+ max-height: 40rem;
+ }
.max-h-\[80svh\] {
max-height: 80svh;
}
@@ -407,6 +810,9 @@
.w-8 {
width: calc(var(--spacing) * 8);
}
+ .w-\[10\.5rem\] {
+ width: 10.5rem;
+ }
.w-\[30\%\] {
width: 30%;
}
@@ -440,19 +846,9 @@
.flex-1 {
flex: 1;
}
- .flex-shrink {
- flex-shrink: 1;
- }
.shrink-0 {
flex-shrink: 0;
}
- .border-collapse {
- border-collapse: collapse;
- }
- .-translate-y-1 {
- --tw-translate-y: calc(var(--spacing) * -1);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -469,9 +865,6 @@
.cursor-grab {
cursor: grab;
}
- .cursor-not-allowed {
- cursor: not-allowed;
- }
.cursor-pointer {
cursor: pointer;
}
@@ -511,6 +904,9 @@
.justify-between {
justify-content: space-between;
}
+ .justify-end {
+ justify-content: flex-end;
+ }
.gap-4 {
gap: calc(var(--spacing) * 4);
}
@@ -544,6 +940,9 @@
.gap-x-\[1ch\] {
column-gap: 1ch;
}
+ .gap-x-\[1rem\] {
+ column-gap: 1rem;
+ }
.gap-x-\[2rem\] {
column-gap: 2rem;
}
@@ -641,24 +1040,6 @@
border-color: color-mix(in oklab, var(--alt) 30%, transparent);
}
}
- .border-\(--alt\)\/60 {
- border-color: var(--alt);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--alt) 60%, transparent);
- }
- }
- .border-\(--alt\)\/70 {
- border-color: var(--alt);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--alt) 70%, transparent);
- }
- }
- .border-\(--alt\)\/80 {
- border-color: var(--alt);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--alt) 80%, transparent);
- }
- }
.border-\(--secondary\)\/60 {
border-color: var(--secondary);
@supports (color: color-mix(in lab, red, red)) {
@@ -698,27 +1079,6 @@
.bg-\[var\(--text\)\] {
background-color: var(--text);
}
- .bg-black {
- background-color: var(--color-black);
- }
- .bg-black\/0 {
- background-color: color-mix(in srgb, #000 0%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
- }
- }
- .bg-black\/10 {
- background-color: color-mix(in srgb, #000 10%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
- }
- }
- .bg-black\/15 {
- background-color: color-mix(in srgb, #000 15%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
- }
- }
.bg-black\/20 {
background-color: color-mix(in srgb, #000 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -731,33 +1091,12 @@
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
}
- .bg-black\/50 {
- background-color: color-mix(in srgb, #000 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
- }
- }
- .bg-white {
- background-color: var(--color-white);
- }
.bg-white\/2 {
background-color: color-mix(in srgb, #fff 2%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
}
}
- .bg-white\/5 {
- background-color: color-mix(in srgb, #fff 5%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
- }
- }
- .bg-white\/15 {
- background-color: color-mix(in srgb, #fff 15%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
- }
- }
.bg-white\/\[0\.03\] {
background-color: color-mix(in srgb, #fff 3%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -809,9 +1148,6 @@
.p-\[3vw\] {
padding: 3vw;
}
- .px-3 {
- padding-inline: calc(var(--spacing) * 3);
- }
.px-3\.5 {
padding-inline: calc(var(--spacing) * 3.5);
}
@@ -869,6 +1205,9 @@
.text-right {
text-align: right;
}
+ .font-\(family-name\:--font-normal\) {
+ font-family: var(--font-normal);
+ }
.font-\[\'JetBrains_Mono\'\] {
font-family: 'JetBrains Mono';
}
@@ -908,6 +1247,12 @@
.text-\[5vw\] {
font-size: 5vw;
}
+ .text-\[14px\] {
+ font-size: 14px;
+ }
+ .text-\[18px\] {
+ font-size: 18px;
+ }
.text-\[60\%\] {
font-size: 60%;
}
@@ -935,6 +1280,10 @@
.text-\[170\%\] {
font-size: 170%;
}
+ .leading-\[1\.7\] {
+ --tw-leading: 1.7;
+ line-height: 1.7;
+ }
.leading-\[normal\] {
--tw-leading: normal;
line-height: normal;
@@ -963,12 +1312,6 @@
.text-\(--alt\) {
color: var(--alt);
}
- .text-\(--alt\)\/20 {
- color: var(--alt);
- @supports (color: color-mix(in lab, red, red)) {
- color: color-mix(in oklab, var(--alt) 20%, transparent);
- }
- }
.text-\(--alt\)\/80 {
color: var(--alt);
@supports (color: color-mix(in lab, red, red)) {
@@ -993,15 +1336,6 @@
.text-\[\#5C6CC1\] {
color: #5C6CC1;
}
- .text-\[\#8eb0c8\] {
- color: #8eb0c8;
- }
- .text-\[\#9A38F4\] {
- color: #9A38F4;
- }
- .text-\[\#9e55e1\] {
- color: #9e55e1;
- }
.text-\[\#46d46c\] {
color: #46d46c;
}
@@ -1014,24 +1348,9 @@
.text-\[\#897ccb\] {
color: #897ccb;
}
- .text-\[\#5079DB\] {
- color: #5079DB;
- }
- .text-\[\#5487ac\] {
- color: #5487ac;
- }
.text-\[\#5874FF\] {
color: #5874FF;
}
- .text-\[\#5947B4\] {
- color: #5947B4;
- }
- .text-\[\#7847D1\] {
- color: #7847D1;
- }
- .text-\[\#487494\] {
- color: #487494;
- }
.text-\[\#BDC3C7\] {
color: #BDC3C7;
}
@@ -1044,9 +1363,6 @@
.text-\[\#D27D9B\] {
color: #D27D9B;
}
- .text-\[\#DD6718\] {
- color: #DD6718;
- }
.text-\[\#ED532D\] {
color: #ED532D;
}
@@ -1068,12 +1384,6 @@
.text-\[\#a34eeb\] {
color: #a34eeb;
}
- .text-\[\#ad72c7\] {
- color: #ad72c7;
- }
- .text-\[\#b56df7\] {
- color: #b56df7;
- }
.text-\[\%v\] {
color: %v;
}
@@ -1089,15 +1399,9 @@
.no-underline {
text-decoration-line: none;
}
- .underline {
- text-decoration-line: underline;
- }
.opacity-0 {
opacity: 0%;
}
- .opacity-40 {
- opacity: 40%;
- }
.shadow-\[0_0_1\.5rem_color-mix\(in_srgb\,var\(--accent\)_25\%\,transparent\)\] {
--tw-shadow: 0 0 1.5rem var(--tw-shadow-color, var(--accent));
@supports (color: color-mix(in lab, red, red)) {
@@ -1105,10 +1409,6 @@
}
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
- .outline {
- outline-style: var(--tw-outline-style);
- outline-width: 1px;
- }
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1118,10 +1418,6 @@
--tw-duration: 150ms;
transition-duration: 150ms;
}
- .select-none {
- -webkit-user-select: none;
- user-select: none;
- }
.select-text {
-webkit-user-select: text;
user-select: text;
@@ -1212,14 +1508,6 @@
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
- .hover\:bg-white\/20:hover {
- background-color: color-mix(in srgb, #fff 20%, transparent);
- }
- @supports (color: color-mix(in lab, red, red)) {
- .hover\:bg-white\/20:hover {
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
- }
- }
.hover\:text-\(--accent\):hover {
color: var(--accent);
}
@@ -1429,6 +1717,49 @@
transform: scale(1.03);
}
}
+.prose {
+ --tw-prose-body: var(--text);
+ --tw-prose-headings: var(--primary);
+ --tw-prose-links: var(--secondary);
+ --tw-prose-bold: var(--text);
+ --tw-prose-bullets: var(--alt);
+ --tw-prose-counters: var(--alt);
+ --tw-prose-hr: var(--alt);
+ --tw-prose-quotes: var(--text);
+ --tw-prose-quote-borders: var(--alt);
+ --tw-prose-captions: var(--alt);
+ --tw-prose-code: var(--extra);
+ --tw-prose-pre-code: var(--text);
+ --tw-prose-pre-bg: rgb(0 0 0 / 0.3);
+ --tw-prose-th-borders: var(--alt);
+ --tw-prose-td-borders: var(--alt);
+}
+.js .footnotes {
+ display: none;
+}
+.sidenotes {
+ position: fixed;
+ overflow: hidden;
+ pointer-events: none;
+}
+.sidenote {
+ position: absolute;
+ left: 0;
+ right: 0;
+ display: flex;
+ gap: 1ch;
+ padding: 0.4rem 0.6rem;
+ border: 0.1rem solid var(--alt);
+ background: var(--background);
+ font-family: var(--font-normal);
+ font-size: 14px;
+ line-height: 1.4;
+ pointer-events: auto;
+}
+.sidenote-num {
+ flex-shrink: 0;
+ color: var(--secondary);
+}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@@ -1562,11 +1893,6 @@
inherits: false;
initial-value: 0 0 #0000;
}
-@property --tw-outline-style {
- syntax: "*";
- inherits: false;
- initial-value: solid;
-}
@property --tw-duration {
syntax: "*";
inherits: false;
@@ -1576,11 +1902,6 @@
initial-value: "";
inherits: false;
}
-@keyframes pulse {
- 50% {
- opacity: 0.5;
- }
-}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
@@ -1613,7 +1934,6 @@
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
- --tw-outline-style: solid;
--tw-duration: initial;
--tw-content: "";
}
diff --git a/public/styles/terminal.css b/public/styles/terminal.css
index e0e80aa..e272b9c 100644
--- a/public/styles/terminal.css
+++ b/public/styles/terminal.css
@@ -14,13 +14,14 @@
--text: #ffffff;
--alt: #999999;
--background: #000000;
- --font: "Jetbrains Mono", monospace;
+ --font-mono: "Jetbrains Mono", monospace;
+ --font-normal: "Jetbrains Mono";
}
html {
background-color: var(--background);
color: var(--text);
- font-family: var(--font);
+ font-family: var(--font-mono);
user-select: none;
font-size: 1vw;
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-10 01:37:00 +0000