diff options
Diffstat (limited to 'public')
52 files changed, 3955 insertions, 298 deletions
diff --git a/public/footnotes.js b/public/footnotes.js new file mode 100644 index 0000000..96a9400 --- /dev/null +++ b/public/footnotes.js @@ -0,0 +1,99 @@ +document.documentElement.classList.add("js"); + +const SIDENOTES = { + inside: true, // true: notes inside the frame, right of the post. false: outside, in the margin + insideShare: 0.21, // share of the post area given to the notes when inside (0.3 = 70/30) + border: false, // border around each note + // readingWidth: "70ch", // max width of the post text, null = no cap + readingWidth: null, // max width of the post text, null = no cap +}; + +document.addEventListener("htmx:load", () => { + const area = document.querySelector("[data-scroll-area]"); + const article = area?.querySelector("article"); + if (!area || !article) return; + + article.style.maxWidth = SIDENOTES.readingWidth ?? "none"; + if (SIDENOTES.inside) + article.style.marginRight = `${SIDENOTES.insideShare * 100}%`; + + const refs = [...document.querySelectorAll("a.footnote-ref")]; + if (refs.length === 0) return; + + const panel = document.createElement("div"); + panel.className = "sidenotes" + (SIDENOTES.border ? " bordered" : ""); + 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 body = document.createElement("div"); + body.append(...note.cloneNode(true).childNodes); + body.querySelector(".footnote-backref")?.remove(); + + const num = document.createElement("sup"); + num.className = "sidenote-num"; + num.textContent = ref.textContent; + (body.querySelector("p") ?? body).prepend(num); + + const el = document.createElement("div"); + el.className = "sidenote"; + el.append(body); + panel.append(el); + return { ref, el }; + }); + + const gap = 6; + let queued = false; + + const layout = () => { + queued = false; + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + const top0 = area.getBoundingClientRect().top + area.clientTop; + + let left, right; + if (SIDENOTES.inside) { + const r = area.getBoundingClientRect(); + left = article.getBoundingClientRect().right + rem; + right = + r.left + + area.clientLeft + + area.clientWidth - + parseFloat(getComputedStyle(area).paddingRight); + } else { + left = area.closest("main").getBoundingClientRect().right + rem; + right = window.innerWidth - rem; + } + + Object.assign(panel.style, { + left: `${left}px`, + top: `${top0}px`, + width: `${Math.max(0, right - left)}px`, + height: `${area.clientHeight}px`, + }); + + let bottom = -Infinity; + for (const { ref, el } of items) { + const top = Math.max( + ref.getBoundingClientRect().top - top0, + 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 deleted file mode 100644 index 772f896..0000000 --- a/public/main.css +++ /dev/null @@ -1,12 +0,0 @@ -@layer theme, base, components, utilities; -@import "tailwindcss/theme.css" layer(theme); -@import "tailwindcss/preflight.css" layer(base); -@import "tailwindcss/utilities.css" layer(utilities); - -@source "../**/*.go"; -@source "../**/*.templ"; - -@keyframes pop { 50% { transform: scale(1.3); } } -[data-copied] svg { animation: pop 0.25s; } - -@keyframes bump { 50% { transform: scale(1.03); } } diff --git a/public/my_uptime.js b/public/my_uptime.js index 1fdb457..b5f3ca2 100644 --- a/public/my_uptime.js +++ b/public/my_uptime.js @@ -13,7 +13,7 @@ async function updateUptime() { } // Run on page load after all DOM elements loaded -document.addEventListener("DOMContentLoaded", () => { +document.addEventListener("htmx:load", () => { updateUptime(); setInterval(updateUptime, 5 * 1000); // in ms }); diff --git a/public/scrollbar.js b/public/scrollbar.js index 2218b55..b297d76 100644 --- a/public/scrollbar.js +++ b/public/scrollbar.js @@ -1,4 +1,8 @@ function initScrollbox(box) { + // Guard against double-initialization + if (box.dataset.initialized) return; + box.dataset.initialized = "true"; + const area = box.querySelector("[data-scroll-area]"); const track = box.querySelector("[data-scroll-track]"); const thumb = box.querySelector("[data-scroll-thumb]"); @@ -51,23 +55,26 @@ function initScrollbox(box) { document.querySelectorAll("[data-scrollbox]").forEach(initScrollbox); -// Vim style j/k scrolling +document.addEventListener("htmx:afterSettle", () => { + document.querySelectorAll("[data-scrollbox]").forEach(initScrollbox); +}); + document.addEventListener("keydown", (e) => { - // Don't scroll in input elements - const tag = document.activeElement.tagName; + const tag = document.activeElement?.tagName; if ( ["INPUT", "TEXTAREA", "SELECT"].includes(tag) || - document.activeElement.isContentEditable + document.activeElement?.isContentEditable ) { return; } - // Only work for "j" and "k", no ctrl/alt/shift if (e.ctrlKey || e.altKey || e.metaKey) return; + if (e.key !== "j" && e.key !== "k") return; - const dir = key === "j" ? step : -step; - const scrollTarget = document.scrollingElement || document.documentElement; const scrollAmount = 100; // in pixels + const dir = e.key === "j" ? scrollAmount : -scrollAmount; + const scrollTarget = document.scrollingElement || document.documentElement; + if (scrollTarget && scrollTarget.scrollHeight > scrollTarget.clientHeight) { scrollTarget.scrollBy({ top: dir, behavior: "auto" }); } else { diff --git a/public/shell.js b/public/shell.js new file mode 100644 index 0000000..3f3aef8 --- /dev/null +++ b/public/shell.js @@ -0,0 +1,75 @@ +document.addEventListener("htmx:load", () => { + const shell = document.querySelector("[data-shell]"); + + if (shell) { + const area = shell.closest("[data-scroll-area]"); + const history = shell.querySelector("#shell-history"); + const input = shell.querySelector("[data-shell-input]"); + const caret = shell.querySelector("[data-shell-caret]"); + let busy = false; + + const updateCaret = () => { + const pos = input.selectionStart ?? input.value.length; + caret.style.left = `calc(${pos}ch - ${input.scrollLeft}px)`; + caret.textContent = input.value[pos] ?? "\u00a0"; + caret.style.animation = "none"; // restart the blink so the caret is solid while typing + void caret.offsetWidth; + caret.style.animation = ""; + }; + + const snapToBottom = () => { + area.scrollTop = area.scrollHeight; + }; + + const run = async (cmd) => { + busy = true; + try { + const res = await fetch("/shell/run", { + method: "POST", + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + body: new URLSearchParams({ cmd }), + }); + const data = await res.json(); + if (data.clear) history.replaceChildren(); + if (data.html) history.insertAdjacentHTML("beforeend", data.html); + if (data.vars) { + for (const [key, value] of Object.entries(data.vars)) { + document.documentElement.style.setProperty(`--${key}`, value); + } + } + } catch { + const el = document.createElement("p"); + el.textContent = "request failed"; + history.append(el); + } finally { + busy = false; + snapToBottom(); + } + }; + + input.addEventListener("keydown", (e) => { + if (e.key !== "Enter") return; + e.preventDefault(); + const cmd = input.value.trim(); + if (!cmd || busy) return; + input.value = ""; + updateCaret(); + run(cmd); + }); + + for (const event of ["input", "keyup", "click", "focus"]) { + input.addEventListener(event, updateCaret); + } + document.addEventListener("selectionchange", () => { + if (document.activeElement === input) updateCaret(); + }); + + area.addEventListener("click", () => { + if (!getSelection().toString()) input.focus({ preventScroll: true }); + }); + + input.focus({ preventScroll: true }); + updateCaret(); + snapToBottom(); + } +}); diff --git a/public/style.css b/public/style.css index db025d0..b5497de 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%); } @@ -287,12 +263,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; } @@ -440,19 +834,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 +853,6 @@ .cursor-grab { cursor: grab; } - .cursor-not-allowed { - cursor: not-allowed; - } .cursor-pointer { cursor: pointer; } @@ -544,6 +925,9 @@ .gap-x-\[1ch\] { column-gap: 1ch; } + .gap-x-\[1rem\] { + column-gap: 1rem; + } .gap-x-\[2rem\] { column-gap: 2rem; } @@ -641,24 +1025,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 +1064,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 +1076,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 +1133,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 +1190,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 +1232,9 @@ .text-\[5vw\] { font-size: 5vw; } + .text-\[17\.6px\] { + font-size: 17.6px; + } .text-\[60\%\] { font-size: 60%; } @@ -935,6 +1262,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 +1294,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 +1318,6 @@ .text-\[\#5C6CC1\] { color: #5C6CC1; } - .text-\[\#8eb0c8\] { - color: #8eb0c8; - } - .text-\[\#9A38F4\] { - color: #9A38F4; - } - .text-\[\#9e55e1\] { - color: #9e55e1; - } .text-\[\#46d46c\] { color: #46d46c; } @@ -1014,24 +1330,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 +1345,6 @@ .text-\[\#D27D9B\] { color: #D27D9B; } - .text-\[\#DD6718\] { - color: #DD6718; - } .text-\[\#ED532D\] { color: #ED532D; } @@ -1068,12 +1366,6 @@ .text-\[\#a34eeb\] { color: #a34eeb; } - .text-\[\#ad72c7\] { - color: #ad72c7; - } - .text-\[\#b56df7\] { - color: #b56df7; - } .text-\[\%v\] { color: %v; } @@ -1089,15 +1381,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 +1391,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 +1400,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 +1490,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 +1699,111 @@ 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); +} +.prose a.footnote-ref, .prose a.footnote-ref:hover { + text-decoration: none; +} +.prose code::before, .prose code::after { + content: none; +} +.prose :not(pre) > code { + padding: 0.1em 0.4em; + border-radius: 0.3em; + background: var(--alt); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix(in srgb, var(--alt) 25%, transparent); + } + font-size: 0.9em; +} +.prose pre, .prose code { + font-family: var(--font-mono); +} +.js .footnotes { + display: none; +} +.sidenotes { + position: fixed; + overflow: hidden; + pointer-events: none; +} +.sidenote { + position: absolute; + left: 0; + right: 0; + background: var(--background); + font-family: var(--font-normal); + font-size: 16px; + line-height: 1.4; + pointer-events: auto; +} +.sidenotes.bordered .sidenote { + border: 0.1rem solid var(--alt); + padding: 0.4rem 0.6rem; +} +.sidenote-num { + font-size: 70%; + color: var(--secondary); + margin-right: 0.15em; +} +.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { + color: var(--secondary); +} +.chroma .nf, .chroma .nc, .chroma .nb { + color: var(--primary); +} +.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { + color: var(--extra); +} +.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { + color: var(--primary); +} +.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { + color: var(--alt); + font-style: italic; +} +.codeblock { + margin: 1.2em 0; + border: 0.1rem solid var(--alt); + border-radius: 0.4rem; + background: rgb(0 0 0 / 0.3); + overflow: hidden; +} +.codeblock::before { + content: attr(data-lang); + display: block; + padding: 0.2em 0.8em; + border-bottom: 0.1rem solid var(--alt); + font-size: 0.75em; + color: var(--alt); +} +.codeblock[data-lang=""]::before { + display: none; +} +.codeblock pre { + margin: 0; + padding: 0.8em 1em; + background: transparent; + border-radius: 0; + overflow-x: auto; + font-size: 0.85em; + line-height: 1.5; +} @property --tw-translate-x { syntax: "*"; inherits: false; @@ -1562,11 +1937,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 +1946,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 +1978,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/fonts/Inter/Inter-Black.woff2 b/public/styles/fonts/Inter/Inter-Black.woff2 Binary files differnew file mode 100644 index 0000000..2e73dce --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Black.woff2 diff --git a/public/styles/fonts/Inter/Inter-BlackItalic.woff2 b/public/styles/fonts/Inter/Inter-BlackItalic.woff2 Binary files differnew file mode 100644 index 0000000..d85db93 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-BlackItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Bold.woff2 b/public/styles/fonts/Inter/Inter-Bold.woff2 Binary files differnew file mode 100644 index 0000000..b9e3cb3 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Bold.woff2 diff --git a/public/styles/fonts/Inter/Inter-BoldItalic.woff2 b/public/styles/fonts/Inter/Inter-BoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..31cd052 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-BoldItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-ExtraBold.woff2 b/public/styles/fonts/Inter/Inter-ExtraBold.woff2 Binary files differnew file mode 100644 index 0000000..bbd0006 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-ExtraBold.woff2 diff --git a/public/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2 b/public/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..288f2de --- /dev/null +++ b/public/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-ExtraLight.woff2 b/public/styles/fonts/Inter/Inter-ExtraLight.woff2 Binary files differnew file mode 100644 index 0000000..f691003 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-ExtraLight.woff2 diff --git a/public/styles/fonts/Inter/Inter-ExtraLightItalic.woff2 b/public/styles/fonts/Inter/Inter-ExtraLightItalic.woff2 Binary files differnew file mode 100644 index 0000000..3e3934d --- /dev/null +++ b/public/styles/fonts/Inter/Inter-ExtraLightItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Italic.woff2 b/public/styles/fonts/Inter/Inter-Italic.woff2 Binary files differnew file mode 100644 index 0000000..9a1ad21 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Italic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Light.woff2 b/public/styles/fonts/Inter/Inter-Light.woff2 Binary files differnew file mode 100644 index 0000000..f3e012a --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Light.woff2 diff --git a/public/styles/fonts/Inter/Inter-LightItalic.woff2 b/public/styles/fonts/Inter/Inter-LightItalic.woff2 Binary files differnew file mode 100644 index 0000000..2f37009 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-LightItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Medium.woff2 b/public/styles/fonts/Inter/Inter-Medium.woff2 Binary files differnew file mode 100644 index 0000000..fdfdcc6 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Medium.woff2 diff --git a/public/styles/fonts/Inter/Inter-MediumItalic.woff2 b/public/styles/fonts/Inter/Inter-MediumItalic.woff2 Binary files differnew file mode 100644 index 0000000..0dc5a30 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-MediumItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Regular.woff2 b/public/styles/fonts/Inter/Inter-Regular.woff2 Binary files differnew file mode 100644 index 0000000..2bcd222 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Regular.woff2 diff --git a/public/styles/fonts/Inter/Inter-SemiBold.woff2 b/public/styles/fonts/Inter/Inter-SemiBold.woff2 Binary files differnew file mode 100644 index 0000000..fbae113 --- /dev/null +++ b/public/styles/fonts/Inter/Inter-SemiBold.woff2 diff --git a/public/styles/fonts/Inter/Inter-SemiBoldItalic.woff2 b/public/styles/fonts/Inter/Inter-SemiBoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..d67d01c --- /dev/null +++ b/public/styles/fonts/Inter/Inter-SemiBoldItalic.woff2 diff --git a/public/styles/fonts/Inter/Inter-Thin.woff2 b/public/styles/fonts/Inter/Inter-Thin.woff2 Binary files differnew file mode 100644 index 0000000..83bf54b --- /dev/null +++ b/public/styles/fonts/Inter/Inter-Thin.woff2 diff --git a/public/styles/fonts/Inter/Inter-ThinItalic.woff2 b/public/styles/fonts/Inter/Inter-ThinItalic.woff2 Binary files differnew file mode 100644 index 0000000..928da4b --- /dev/null +++ b/public/styles/fonts/Inter/Inter-ThinItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Black.woff2 b/public/styles/fonts/Inter/InterDisplay-Black.woff2 Binary files differnew file mode 100644 index 0000000..72532b2 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Black.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-BlackItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-BlackItalic.woff2 Binary files differnew file mode 100644 index 0000000..de02111 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-BlackItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Bold.woff2 b/public/styles/fonts/Inter/InterDisplay-Bold.woff2 Binary files differnew file mode 100644 index 0000000..304c31d --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Bold.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-BoldItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-BoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..89d5c5a --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-BoldItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-ExtraBold.woff2 b/public/styles/fonts/Inter/InterDisplay-ExtraBold.woff2 Binary files differnew file mode 100644 index 0000000..4250fa0 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-ExtraBold.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..d68a400 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-ExtraLight.woff2 b/public/styles/fonts/Inter/InterDisplay-ExtraLight.woff2 Binary files differnew file mode 100644 index 0000000..7d376e2 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-ExtraLight.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-ExtraLightItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-ExtraLightItalic.woff2 Binary files differnew file mode 100644 index 0000000..1f1ca72 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-ExtraLightItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Italic.woff2 b/public/styles/fonts/Inter/InterDisplay-Italic.woff2 Binary files differnew file mode 100644 index 0000000..4475f7c --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Italic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Light.woff2 b/public/styles/fonts/Inter/InterDisplay-Light.woff2 Binary files differnew file mode 100644 index 0000000..ef7dbbf --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Light.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-LightItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-LightItalic.woff2 Binary files differnew file mode 100644 index 0000000..a57c48b --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-LightItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Medium.woff2 b/public/styles/fonts/Inter/InterDisplay-Medium.woff2 Binary files differnew file mode 100644 index 0000000..f6157fa --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Medium.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-MediumItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-MediumItalic.woff2 Binary files differnew file mode 100644 index 0000000..8b2f1c2 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-MediumItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Regular.woff2 b/public/styles/fonts/Inter/InterDisplay-Regular.woff2 Binary files differnew file mode 100644 index 0000000..b5a45e8 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Regular.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-SemiBold.woff2 b/public/styles/fonts/Inter/InterDisplay-SemiBold.woff2 Binary files differnew file mode 100644 index 0000000..6e04091 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-SemiBold.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-SemiBoldItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-SemiBoldItalic.woff2 Binary files differnew file mode 100644 index 0000000..72b4743 --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-SemiBoldItalic.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-Thin.woff2 b/public/styles/fonts/Inter/InterDisplay-Thin.woff2 Binary files differnew file mode 100644 index 0000000..893595a --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-Thin.woff2 diff --git a/public/styles/fonts/Inter/InterDisplay-ThinItalic.woff2 b/public/styles/fonts/Inter/InterDisplay-ThinItalic.woff2 Binary files differnew file mode 100644 index 0000000..46e1b5a --- /dev/null +++ b/public/styles/fonts/Inter/InterDisplay-ThinItalic.woff2 diff --git a/public/styles/fonts/Inter/InterVariable-Italic.woff2 b/public/styles/fonts/Inter/InterVariable-Italic.woff2 Binary files differnew file mode 100644 index 0000000..b3530f3 --- /dev/null +++ b/public/styles/fonts/Inter/InterVariable-Italic.woff2 diff --git a/public/styles/fonts/Inter/InterVariable.woff2 b/public/styles/fonts/Inter/InterVariable.woff2 Binary files differnew file mode 100644 index 0000000..5a8d3e7 --- /dev/null +++ b/public/styles/fonts/Inter/InterVariable.woff2 diff --git a/public/styles/fonts/Inter/inter.css b/public/styles/fonts/Inter/inter.css new file mode 100644 index 0000000..6144065 --- /dev/null +++ b/public/styles/fonts/Inter/inter.css @@ -0,0 +1,148 @@ +/* Variable fonts usage: +:root { font-family: "Inter", sans-serif; } +@supports (font-variation-settings: normal) { + :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; } +} */ +@font-face { + font-family: InterVariable; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("InterVariable.woff2") format("woff2"); +} +@font-face { + font-family: InterVariable; + font-style: italic; + font-weight: 100 900; + font-display: swap; + src: url("InterVariable-Italic.woff2") format("woff2"); +} + +/* static fonts */ +@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2") format("woff2"); } +@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("InterDisplay-Thin.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("InterDisplay-ThinItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLight.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("InterDisplay-Light.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("InterDisplay-LightItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("InterDisplay-Regular.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("InterDisplay-Italic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("InterDisplay-Medium.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("InterDisplay-MediumItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBold.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("InterDisplay-Bold.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("InterDisplay-BoldItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBold.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("InterDisplay-Black.woff2") format("woff2"); } +@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("InterDisplay-BlackItalic.woff2") format("woff2"); } + +@font-feature-values InterVariable { + @character-variant { + cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8; + cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13; + alt-1: 1; /* Alternate one */ + alt-3: 9; /* Flat-top three */ + open-4: 2; /* Open four */ + open-6: 3; /* Open six */ + open-9: 4; /* Open nine */ + lc-l-with-tail: 5; /* Lower-case L with tail */ + simplified-u: 6; /* Simplified u */ + alt-double-s: 7; /* Alternate German double s */ + uc-i-with-serif: 8; /* Upper-case i with serif */ + uc-g-with-spur: 10; /* Capital G with spur */ + single-story-a: 11; /* Single-story a */ + compact-lc-f: 12; /* Compact f */ + compact-lc-t: 13; /* Compact t */ + } + @styleset { + ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8; + open-digits: 1; /* Open digits */ + disambiguation: 2; /* Disambiguation (with zero) */ + disambiguation-except-zero: 4; /* Disambiguation (no zero) */ + round-quotes-and-commas: 3; /* Round quotes & commas */ + square-punctuation: 7; /* Square punctuation */ + square-quotes: 8; /* Square quotes */ + circled-characters: 5; /* Circled characters */ + squared-characters: 6; /* Squared characters */ + } +} +@font-feature-values Inter { + @character-variant { + cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8; + cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13; + alt-1: 1; /* Alternate one */ + alt-3: 9; /* Flat-top three */ + open-4: 2; /* Open four */ + open-6: 3; /* Open six */ + open-9: 4; /* Open nine */ + lc-l-with-tail: 5; /* Lower-case L with tail */ + simplified-u: 6; /* Simplified u */ + alt-double-s: 7; /* Alternate German double s */ + uc-i-with-serif: 8; /* Upper-case i with serif */ + uc-g-with-spur: 10; /* Capital G with spur */ + single-story-a: 11; /* Single-story a */ + compact-lc-f: 12; /* Compact f */ + compact-lc-t: 13; /* Compact t */ + } + @styleset { + ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8; + open-digits: 1; /* Open digits */ + disambiguation: 2; /* Disambiguation (with zero) */ + disambiguation-except-zero: 4; /* Disambiguation (no zero) */ + round-quotes-and-commas: 3; /* Round quotes & commas */ + square-punctuation: 7; /* Square punctuation */ + square-quotes: 8; /* Square quotes */ + circled-characters: 5; /* Circled characters */ + squared-characters: 6; /* Squared characters */ + } +} +@font-feature-values InterDisplay { + @character-variant { + cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8; + cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13; + alt-1: 1; /* Alternate one */ + alt-3: 9; /* Flat-top three */ + open-4: 2; /* Open four */ + open-6: 3; /* Open six */ + open-9: 4; /* Open nine */ + lc-l-with-tail: 5; /* Lower-case L with tail */ + simplified-u: 6; /* Simplified u */ + alt-double-s: 7; /* Alternate German double s */ + uc-i-with-serif: 8; /* Upper-case i with serif */ + uc-g-with-spur: 10; /* Capital G with spur */ + single-story-a: 11; /* Single-story a */ + compact-lc-f: 12; /* Compact f */ + compact-lc-t: 13; /* Compact t */ + } + @styleset { + ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8; + open-digits: 1; /* Open digits */ + disambiguation: 2; /* Disambiguation (with zero) */ + disambiguation-except-zero: 4; /* Disambiguation (no zero) */ + round-quotes-and-commas: 3; /* Round quotes & commas */ + square-punctuation: 7; /* Square punctuation */ + square-quotes: 8; /* Square quotes */ + circled-characters: 5; /* Circled characters */ + squared-characters: 6; /* Squared characters */ + } +} diff --git a/public/styles/fonts/JetBrainsMono.css b/public/styles/fonts/JetBrainsMono.css index 807fe1f..fc0183e 100644 --- a/public/styles/fonts/JetBrainsMono.css +++ b/public/styles/fonts/JetBrainsMono.css @@ -1,108 +1,108 @@ @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Thin.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ThinItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ThinItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraLight.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Light.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-LightItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-MediumItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); font-weight: 900; font-style: normal; } @font-face { font-family: "Jetbrains Mono"; - src: url("/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); + src: url("/public/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; } diff --git a/public/styles/fonts/LowresPixel-Regular.woff b/public/styles/fonts/LowresPixel-Regular.woff Binary files differnew file mode 100644 index 0000000..a1b368a --- /dev/null +++ b/public/styles/fonts/LowresPixel-Regular.woff diff --git a/public/styles/fonts/LowresPixel.css b/public/styles/fonts/LowresPixel.css new file mode 100644 index 0000000..ae4f1d3 --- /dev/null +++ b/public/styles/fonts/LowresPixel.css @@ -0,0 +1,8 @@ +@font-face { + font-family: "LowerPixelRegular"; + font-style: normal; + font-weight: normal; + src: + local("LowerPixelRegular"), + url("LowresPixel-Regular.woff") format("woff"); +} diff --git a/public/styles/fonts/Monocraft.css b/public/styles/fonts/Monocraft.css index 34fd24a..af7b397 100644 --- a/public/styles/fonts/Monocraft.css +++ b/public/styles/fonts/Monocraft.css @@ -1,108 +1,126 @@ @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-ExtraLight.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-ExtraLight.ttf") format("truetype"); font-weight: 100; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); font-weight: 100; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-ExtraLight.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); font-weight: 200; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Light.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Light-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Light-Italic.ttf") format("truetype"); font-weight: 300; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft.ttf") format("truetype"); + src: url("/public/fonts/Monocraft.ttf") format("truetype"); font-weight: 400; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft.ttf") format("truetype"); + src: url("/public/fonts/Monocraft.ttf") format("truetype"); font-weight: 500; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Italic.ttf") format("truetype"); font-weight: 500; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-SemiBold.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-SemiBold-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-SemiBold-Italic.ttf") format("truetype"); font-weight: 600; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Bold.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Bold-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Black.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Black.ttf") format("truetype"); font-weight: 800; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Black-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Black-Italic.ttf") format("truetype"); font-weight: 800; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Black.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } @font-face { font-family: "Monocraft"; - src: url("/fonts/Monocraft-Black-Italic.ttf") format("truetype"); + src: url("/public/fonts/Monocraft-Black-Italic.ttf") format("truetype"); font-weight: 900; font-style: italic; + size-adjust: 90%; /* Adjust to JetBrainsMono width, 0.6 / 0.6666 = 0.9 */ } diff --git a/public/styles/main.css b/public/styles/main.css new file mode 100644 index 0000000..f7539ee --- /dev/null +++ b/public/styles/main.css @@ -0,0 +1,276 @@ +@import "./fonts/Inter/inter.css"; +@import "./fonts/JetBrainsMono.css"; +@import "./fonts/Monocraft.css"; +@import "./fonts/LowresPixel.css"; + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/preflight.css" layer(base); +@import "tailwindcss/utilities.css" layer(utilities); + +@source "../**/*.go"; +@source "../**/*.templ"; + +:root { + --primary: #54d7a9; + --secondary: #9b7eca; + --accent: #7ed4fb; + --extra: #8fcc75; + --text: #ffffff; + --alt: #999999; + --background: #000000; + --font-mono: "Jetbrains Mono", monospace; + --font-normal: "Inter", system-ui, sans-serif; +} + +html { + background-color: var(--background); + color: var(--text); + font-family: var(--font-mono); + user-select: none; + + font-size: 1vw; +} + +body { + min-height: 100vh; + display: grid; + place-items: center; + /* font-family: var(--font-mono); */ +} + +@layer base { + a { + font-weight: 300; + text-decoration: none; + color: var(--secondary); + transition-duration: 0.2s; + transition-property: color, text-decoration; + } + a:hover { + text-decoration: underline; + color: var(--accent); + } +} + +.scrollbox::-webkit-scrollbar { + width: 1.5rem; +} +.scrollbox::-webkit-scrollbar-track { + background: transparent; + border-left: 0.1rem solid var(--alt); +} +.scrollbox::-webkit-scrollbar-thumb { + background: var(--primary); + border: 0.3rem solid transparent; + background-clip: padding-box; + border-radius: 0; +} +.scrollbox::-webkit-scrollbar-thumb:hover { + background: var(--accent); +} + +@supports not selector(::-webkit-scrollbar) { + .scrollbox { + scrollbar-color: var(--primary) transparent; + } +} + +@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); +} + +/* .prose a[target="_blank"]::after { content: " ↗"; font-size: 0.8em; } */ + +/* headings: color, size, spacing above/below */ +/* .prose h1 { color: var(--accent); font-size: 1.9em; margin: 1.6em 0 0.6em; } */ +/* .prose h2 { color: var(--primary); font-size: 1.5em; margin: 1.6em 0 0.5em; } */ +/* .prose h3 { color: var(--primary); font-size: 1.2em; margin: 1.4em 0 0.4em; } */ + +/* paragraph and list spacing */ +/* .prose p, .prose ul, .prose ol { margin: 1em 0; } */ +/* .prose li { margin: 0.3em 0; } */ + +/* links, with no underline on footnote refs */ +/* .prose a { text-decoration: none; } */ +/* .prose a:hover { text-decoration: underline; } */ +.prose a.footnote-ref, +.prose a.footnote-ref:hover { + text-decoration: none; +} + +/* quotes: drop the plugin's quote marks */ +/* .prose blockquote { border-left: 0.2em solid var(--alt); padding-left: 1em; font-style: normal; } */ +/* .prose blockquote p::before, .prose blockquote p::after { content: none; } */ + +/* inline code: drop the plugin's backticks, add a tag-like background */ +.prose code::before, +.prose code::after { + content: none; +} +.prose :not(pre) > code { + padding: 0.1em 0.4em; + border-radius: 0.3em; + background: color-mix(in srgb, var(--alt) 25%, transparent); + font-size: 0.9em; +} + +/* the article uses the proportional font, so code needs the mono one back */ +.prose pre, +.prose code { + font-family: var(--font-mono); +} + +.js .footnotes { + display: none; +} + +.sidenotes { + position: fixed; + overflow: hidden; + pointer-events: none; +} + +.sidenote { + position: absolute; + left: 0; + right: 0; + background: var(--background); + font-family: var(--font-normal); + font-size: 16px; + line-height: 1.4; + pointer-events: auto; +} + +.sidenotes.bordered .sidenote { + border: 0.1rem solid var(--alt); + padding: 0.4rem 0.6rem; +} + +.sidenote-num { + font-size: 70%; + color: var(--secondary); + margin-right: 0.15em; +} + +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr, +.chroma .kt { + color: var(--secondary); +} +.chroma .nf, +.chroma .nc, +.chroma .nb { + color: var(--primary); +} +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .se, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .sr, +.chroma .s1, +.chroma .ss { + color: var(--extra); +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { + color: var(--primary); +} +.chroma .c, +.chroma .ch, +.chroma .cm, +.chroma .c1, +.chroma .cs, +.chroma .cp, +.chroma .cpf { + color: var(--alt); + font-style: italic; +} + +.codeblock { + margin: 1.2em 0; + border: 0.1rem solid var(--alt); + border-radius: 0.4rem; + background: rgb(0 0 0 / 0.3); + overflow: hidden; +} +.codeblock::before { + content: attr(data-lang); + display: block; + padding: 0.2em 0.8em; + border-bottom: 0.1rem solid var(--alt); + font-size: 0.75em; + color: var(--alt); +} +.codeblock[data-lang=""]::before { + display: none; +} +.codeblock pre { + margin: 0; + padding: 0.8em 1em; + background: transparent; + border-radius: 0; + overflow-x: auto; + font-size: 0.85em; + line-height: 1.5; +} + +@keyframes pop { + 50% { + transform: scale(1.3); + } +} +[data-copied] svg { + animation: pop 0.25s; +} + +@keyframes bump { + 50% { + transform: scale(1.03); + } +} + +@keyframes blink { + 50% { + opacity: 0; + } +} + +[data-shell-caret] { + animation: blink 1.1s steps(1) infinite; +} +[data-shell-prompt]:not(:focus-within) [data-shell-caret] { + visibility: hidden; +} diff --git a/public/styles/style.css b/public/styles/style.css new file mode 100644 index 0000000..76bf2a1 --- /dev/null +++ b/public/styles/style.css @@ -0,0 +1,2744 @@ +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@layer properties; +@font-face { + font-family: InterVariable; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("InterVariable.woff2") format("woff2"); +} +@font-face { + font-family: InterVariable; + font-style: italic; + font-weight: 100 900; + font-display: swap; + src: url("InterVariable-Italic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url("Inter-Thin.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url("Inter-ThinItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLight.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLightItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("Inter-Light.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url("Inter-LightItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("Inter-Regular.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("Inter-Italic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("Inter-Medium.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url("Inter-MediumItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBold.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("Inter-Bold.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url("Inter-BoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBold.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url("Inter-Black.woff2") format("woff2"); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url("Inter-BlackItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url("InterDisplay-Thin.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url("InterDisplay-ThinItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url("InterDisplay-ExtraLight.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("InterDisplay-Light.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url("InterDisplay-LightItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("InterDisplay-Regular.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("InterDisplay-Italic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("InterDisplay-Medium.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url("InterDisplay-MediumItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("InterDisplay-SemiBold.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("InterDisplay-Bold.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url("InterDisplay-BoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url("InterDisplay-ExtraBold.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url("InterDisplay-Black.woff2") format("woff2"); +} +@font-face { + font-family: "InterDisplay"; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url("InterDisplay-BlackItalic.woff2") format("woff2"); +} +@font-feature-values InterVariable { + @character-variant { + cv01: 1; + cv02: 2; + cv03: 3; + cv04: 4; + cv05: 5; + cv06: 6; + cv07: 7; + cv08: 8; + cv09: 9; + cv10: 10; + cv11: 11; + cv12: 12; + cv13: 13; + alt-1: 1; + alt-3: 9; + open-4: 2; + open-6: 3; + open-9: 4; + lc-l-with-tail: 5; + simplified-u: 6; + alt-double-s: 7; + uc-i-with-serif: 8; + uc-g-with-spur: 10; + single-story-a: 11; + compact-lc-f: 12; + compact-lc-t: 13; + } + @styleset { + ss01: 1; + ss02: 2; + ss03: 3; + ss04: 4; + ss05: 5; + ss06: 6; + ss07: 7; + ss08: 8; + open-digits: 1; + disambiguation: 2; + disambiguation-except-zero: 4; + round-quotes-and-commas: 3; + square-punctuation: 7; + square-quotes: 8; + circled-characters: 5; + squared-characters: 6; + } +} +@font-feature-values Inter { + @character-variant { + cv01: 1; + cv02: 2; + cv03: 3; + cv04: 4; + cv05: 5; + cv06: 6; + cv07: 7; + cv08: 8; + cv09: 9; + cv10: 10; + cv11: 11; + cv12: 12; + cv13: 13; + alt-1: 1; + alt-3: 9; + open-4: 2; + open-6: 3; + open-9: 4; + lc-l-with-tail: 5; + simplified-u: 6; + alt-double-s: 7; + uc-i-with-serif: 8; + uc-g-with-spur: 10; + single-story-a: 11; + compact-lc-f: 12; + compact-lc-t: 13; + } + @styleset { + ss01: 1; + ss02: 2; + ss03: 3; + ss04: 4; + ss05: 5; + ss06: 6; + ss07: 7; + ss08: 8; + open-digits: 1; + disambiguation: 2; + disambiguation-except-zero: 4; + round-quotes-and-commas: 3; + square-punctuation: 7; + square-quotes: 8; + circled-characters: 5; + squared-characters: 6; + } +} +@font-feature-values InterDisplay { + @character-variant { + cv01: 1; + cv02: 2; + cv03: 3; + cv04: 4; + cv05: 5; + cv06: 6; + cv07: 7; + cv08: 8; + cv09: 9; + cv10: 10; + cv11: 11; + cv12: 12; + cv13: 13; + alt-1: 1; + alt-3: 9; + open-4: 2; + open-6: 3; + open-9: 4; + lc-l-with-tail: 5; + simplified-u: 6; + alt-double-s: 7; + uc-i-with-serif: 8; + uc-g-with-spur: 10; + single-story-a: 11; + compact-lc-f: 12; + compact-lc-t: 13; + } + @styleset { + ss01: 1; + ss02: 2; + ss03: 3; + ss04: 4; + ss05: 5; + ss06: 6; + ss07: 7; + ss08: 8; + open-digits: 1; + disambiguation: 2; + disambiguation-except-zero: 4; + round-quotes-and-commas: 3; + square-punctuation: 7; + square-quotes: 8; + circled-characters: 5; + squared-characters: 6; + } +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ThinItalic.woff2") format("woff2"); + font-weight: 100; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraLight.woff2") format("woff2"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2"); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-LightItalic.woff2") format("woff2"); + font-weight: 300; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Italic.woff2") format("woff2"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-MediumItalic.woff2") format("woff2"); + font-weight: 500; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2"); + font-weight: 600; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2"); + font-weight: 700; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); + font-weight: 800; + font-style: italic; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); + font-weight: 900; + font-style: normal; +} +@font-face { + font-family: "Jetbrains Mono"; + src: url("/public/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2"); + font-weight: 900; + font-style: italic; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-ExtraLight.ttf") format("truetype"); + font-weight: 100; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); + font-weight: 100; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-ExtraLight.ttf") format("truetype"); + font-weight: 200; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-ExtraLight-Italic.ttf") format("truetype"); + font-weight: 200; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Light-Italic.ttf") format("truetype"); + font-weight: 300; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Italic.ttf") format("truetype"); + font-weight: 500; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-SemiBold-Italic.ttf") format("truetype"); + font-weight: 600; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Bold-Italic.ttf") format("truetype"); + font-weight: 700; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Black.ttf") format("truetype"); + font-weight: 800; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Black-Italic.ttf") format("truetype"); + font-weight: 800; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; + size-adjust: 90%; +} +@font-face { + font-family: "Monocraft"; + src: url("/public/fonts/Monocraft-Black-Italic.ttf") format("truetype"); + font-weight: 900; + font-style: italic; + size-adjust: 90%; +} +@font-face { + font-family: "LowerPixelRegular"; + font-style: normal; + font-weight: normal; + src: local("LowerPixelRegular"), url("LowresPixel-Regular.woff") format("woff"); +} +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, + 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-gray-700: oklch(37.3% 0.034 259.733); + --color-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --container-3xl: 48rem; + --font-weight-normal: 400; + --font-weight-bold: 700; + --leading-relaxed: 1.625; + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { + .pointer-events-none { + pointer-events: none; + } + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } + .relative { + position: relative; + } + .static { + position: static; + } + .inset-x-\[0\.3rem\] { + inset-inline: 0.3rem; + } + .inset-y-0 { + inset-block: 0px; + } + .top-1\/2 { + top: calc(1 / 2 * 100%); + } + .top-\[-0\.7em\] { + top: -0.7em; + } + .top-\[-0\.75rem\] { + top: -0.75rem; + } + .top-\[0\.6rem\] { + top: 0.6rem; + } + .right-\[0\.6rem\] { + right: 0.6rem; + } + .right-full { + right: 100%; + } + .bottom-\[-0\.7em\] { + bottom: -0.7em; + } + .bottom-\[-0\.55rem\] { + bottom: -0.55rem; + } + .bottom-\[-0\.75rem\] { + bottom: -0.75rem; + } + .left-\[0\.5em\] { + left: 0.5em; + } + .left-\[0\.625rem\] { + left: 0.625rem; + } + .z-10 { + z-index: 10; + } + .col-span-2 { + grid-column: span 2 / span 2; + } + .-m-\[0\.4rem\] { + margin: calc(0.4rem * -1); + } + .m-0 { + margin: 0px; + } + .m-\[-0\.1vw\] { + margin: -0.1vw; + } + .m-auto { + margin: auto; + } + .mx-\[0\.2vw\] { + margin-inline: 0.2vw; + } + .mx-\[1vw\] { + margin-inline: 1vw; + } + .my-\[-0\.15rem\] { + margin-block: -0.15rem; + } + .my-\[0\.625vw\] { + margin-block: 0.625vw; + } + .my-\[2\.5vw\] { + margin-block: 2.5vw; + } + .my-\[3vw\] { + margin-block: 3vw; + } + .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; + } + .mt-\[8vw\] { + margin-top: 8vw; + } + .mt-\[10vw\] { + margin-top: 10vw; + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-\[0\.1vw\] { + margin-right: 0.1vw; + } + .mr-\[2\.5vh\] { + margin-right: 2.5vh; + } + .mb-0 { + margin-bottom: 0px; + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .mb-\[0\.30rem\] { + margin-bottom: 0.30rem; + } + .mb-\[1\.5rem\] { + margin-bottom: 1.5rem; + } + .mb-\[1\.5625vw\] { + margin-bottom: 1.5625vw; + } + .mb-\[1rem\] { + margin-bottom: 1rem; + } + .mb-\[5vw\] { + margin-bottom: 5vw; + } + .mb-\[7vw\] { + margin-bottom: 7vw; + } + .-ml-\[0\.1rem\] { + margin-left: calc(0.1rem * -1); + } + .ml-\[-4vw\] { + margin-left: -4vw; + } + .ml-auto { + margin-left: auto; + } + .block { + display: block; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .table { + display: table; + } + .h-0 { + height: 0px; + } + .h-38 { + height: calc(var(--spacing) * 38); + } + .h-\[9\.5vw\] { + height: 9.5vw; + } + .h-\[40rem\] { + height: 40rem; + } + .h-\[62\%\] { + height: 62%; + } + .h-\[80svh\] { + height: 80svh; + } + .h-\[85svh\] { + height: 85svh; + } + .h-\[97vh\] { + height: 97vh; + } + .h-\[100\%\] { + height: 100%; + } + .h-full { + height: 100%; + } + .max-h-\[80svh\] { + max-height: 80svh; + } + .min-h-0 { + min-height: 0px; + } + .w-0 { + width: 0px; + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-\[1ch\] { + width: 1ch; + } + .w-\[30\%\] { + width: 30%; + } + .w-\[67\%\] { + width: 67%; + } + .w-\[70\%\] { + width: 70%; + } + .w-\[75rem\] { + width: 75rem; + } + .w-\[95vw\] { + width: 95vw; + } + .w-\[100\%\] { + width: 100%; + } + .w-\[334\%\] { + width: 334%; + } + .w-full { + width: 100%; + } + .max-w-3xl { + max-width: var(--container-3xl); + } + .min-w-0 { + min-width: 0px; + } + .flex-1 { + flex: 1; + } + .shrink-0 { + flex-shrink: 0; + } + .-translate-y-1\/2 { + --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .scale-135 { + --tw-scale-x: 135%; + --tw-scale-y: 135%; + --tw-scale-z: 135%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .cursor-grab { + cursor: grab; + } + .cursor-pointer { + cursor: pointer; + } + .touch-none { + touch-action: none; + } + .resize { + resize: both; + } + .\[scrollbar-width\:none\] { + scrollbar-width: none; + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .grid-cols-\[29\%_1fr\] { + grid-template-columns: 29% 1fr; + } + .flex-col { + flex-direction: column; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-baseline { + align-items: baseline; + } + .items-center { + align-items: center; + } + .justify-between { + justify-content: space-between; + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-8 { + gap: calc(var(--spacing) * 8); + } + .gap-10 { + gap: calc(var(--spacing) * 10); + } + .gap-16 { + gap: calc(var(--spacing) * 16); + } + .gap-\[0\.5rem\] { + gap: 0.5rem; + } + .gap-\[0\.0625rem\] { + gap: 0.0625rem; + } + .gap-\[1\.25vw\] { + gap: 1.25vw; + } + .gap-\[1ch\] { + gap: 1ch; + } + .gap-\[1rem\] { + gap: 1rem; + } + .gap-x-4 { + column-gap: calc(var(--spacing) * 4); + } + .gap-x-8 { + column-gap: calc(var(--spacing) * 8); + } + .gap-x-\[1ch\] { + column-gap: 1ch; + } + .gap-x-\[1rem\] { + column-gap: 1rem; + } + .gap-x-\[2rem\] { + column-gap: 2rem; + } + .gap-x-\[5vw\] { + column-gap: 5vw; + } + :where(.space-x-\[1\.25vw\] > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(1.25vw * var(--tw-space-x-reverse)); + margin-inline-end: calc(1.25vw * calc(1 - var(--tw-space-x-reverse))); + } + .gap-y-2 { + row-gap: calc(var(--spacing) * 2); + } + .gap-y-4 { + row-gap: calc(var(--spacing) * 4); + } + .gap-y-\[0\.4rem\] { + row-gap: 0.4rem; + } + .self-center { + align-self: center; + } + .self-start { + align-self: flex-start; + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .overflow-auto { + overflow: auto; + } + .overflow-hidden { + overflow: hidden; + } + .overflow-x-hidden { + overflow-x: hidden; + } + .overflow-y-auto { + overflow-y: auto; + } + .rounded-\[0\.3rem\] { + border-radius: 0.3rem; + } + .rounded-\[0\.4rem\] { + border-radius: 0.4rem; + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-\[0\.01rem\] { + border-style: var(--tw-border-style); + border-width: 0.01rem; + } + .border-\[0\.1rem\] { + border-style: var(--tw-border-style); + border-width: 0.1rem; + } + .border-\[0\.1vw\] { + border-style: var(--tw-border-style); + border-width: 0.1vw; + } + .border-\[0\.2rem\] { + border-style: var(--tw-border-style); + border-width: 0.2rem; + } + .border-\[0\.05rem\] { + border-style: var(--tw-border-style); + border-width: 0.05rem; + } + .border-\[0\.25vh\] { + border-style: var(--tw-border-style); + border-width: 0.25vh; + } + .border-\[0\.125rem\] { + border-style: var(--tw-border-style); + border-width: 0.125rem; + } + .border-solid { + --tw-border-style: solid; + border-style: solid; + } + .border-\(--accent\)\! { + border-color: var(--accent) !important; + } + .border-\(--alt\) { + border-color: var(--alt); + } + .border-\(--alt\)\/30 { + border-color: var(--alt); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--alt) 30%, transparent); + } + } + .border-\(--secondary\)\/60 { + border-color: var(--secondary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--secondary) 60%, transparent); + } + } + .border-\(--text\) { + border-color: var(--text); + } + .border-\[color\:var\(--alt\)\] { + border-color: var(--alt); + } + .border-\[var\(--alt\)\] { + border-color: var(--alt); + } + .bg-\(--alt\)\/25 { + background-color: var(--alt); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--alt) 25%, transparent); + } + } + .bg-\(--background\) { + background-color: var(--background); + } + .bg-\(--extra\)\/70 { + background-color: var(--extra); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--extra) 70%, transparent); + } + } + .bg-\(--secondary\) { + background-color: var(--secondary); + } + .bg-\(--text\) { + background-color: var(--text); + } + .bg-\[var\(--background\)\] { + background-color: var(--background); + } + .bg-\[var\(--text\)\] { + background-color: var(--text); + } + .bg-black\/20 { + background-color: color-mix(in srgb, #000 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 20%, transparent); + } + } + .bg-black\/30 { + background-color: color-mix(in srgb, #000 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 30%, transparent); + } + } + .bg-transparent { + background-color: transparent; + } + .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\/\[0\.03\] { + background-color: color-mix(in srgb, #fff 3%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 3%, transparent); + } + } + .bg-\[linear-gradient\(to_bottom\,\#181825\,var\(--background\)\)\] { + background-image: linear-gradient(to bottom,#181825,var(--background)); + } + .bg-\[linear-gradient\(to_bottom\,var\(--background\)\,var\(--cmp-bg\,transparent\)\)\] { + background-image: linear-gradient(to bottom,var(--background),var(--cmp-bg,transparent)); + } + .fill-\[\#7ed4fb\]\/50 { + fill: color-mix(in oklab, #7ed4fb 50%, transparent); + } + .stroke-\[var\(--alt\)\] { + stroke: var(--alt); + } + .stroke-\[var\(--primary\)\] { + stroke: var(--primary); + } + .object-cover { + object-fit: cover; + } + .p-0 { + padding: 0px; + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .p-8 { + padding: calc(var(--spacing) * 8); + } + .p-\[0\.2rem\] { + padding: 0.2rem; + } + .p-\[0\.4rem\] { + padding: 0.4rem; + } + .p-\[0\.8em\] { + padding: 0.8em; + } + .p-\[1rem\] { + padding: 1rem; + } + .p-\[2\.2svh\] { + padding: 2.2svh; + } + .p-\[3vw\] { + padding: 3vw; + } + .px-3\.5 { + padding-inline: calc(var(--spacing) * 3.5); + } + .px-\[0\.1vw\] { + padding-inline: 0.1vw; + } + .px-\[0\.4rem\] { + padding-inline: 0.4rem; + } + .px-\[0\.5em\] { + padding-inline: 0.5em; + } + .px-\[0\.6rem\] { + padding-inline: 0.6rem; + } + .px-\[0\.625rem\] { + padding-inline: 0.625rem; + } + .py-\(--ypad\) { + padding-block: var(--ypad); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-16 { + padding-block: calc(var(--spacing) * 16); + } + .py-\[0\.1rem\] { + padding-block: 0.1rem; + } + .py-\[0\.625vw\] { + padding-block: 0.625vw; + } + .pt-3 { + padding-top: calc(var(--spacing) * 3); + } + .pt-\[1\.0625em\] { + padding-top: 1.0625em; + } + .pt-\[1vw\] { + padding-top: 1vw; + } + .pt-\[5vw\] { + padding-top: 5vw; + } + .pt-\[calc\(var\(--ypad\)\+0\.0625rem\)\] { + padding-top: calc(var(--ypad) + 0.0625rem); + } + .pr-\[1\.25vw\] { + padding-right: 1.25vw; + } + .text-left { + text-align: left; + } + .text-right { + text-align: right; + } + .font-\(family-name\:--font-normal\) { + font-family: var(--font-normal); + } + .font-\[\'JetBrains_Mono\'\] { + font-family: 'JetBrains Mono'; + } + .font-mono { + font-family: var(--font-mono); + } + .text-\[0\.6rem\] { + font-size: 0.6rem; + } + .text-\[0\.8rem\] { + font-size: 0.8rem; + } + .text-\[0\.96vw\] { + font-size: 0.96vw; + } + .text-\[0\.675rem\] { + font-size: 0.675rem; + } + .text-\[1\.125rem\] { + font-size: 1.125rem; + } + .text-\[1\.375rem\] { + font-size: 1.375rem; + } + .text-\[1rem\] { + font-size: 1rem; + } + .text-\[2\.5vw\] { + font-size: 2.5vw; + } + .text-\[3\.5vw\] { + font-size: 3.5vw; + } + .text-\[3vw\] { + font-size: 3vw; + } + .text-\[5vw\] { + font-size: 5vw; + } + .text-\[17\.6px\] { + font-size: 17.6px; + } + .text-\[60\%\] { + font-size: 60%; + } + .text-\[75\%\] { + font-size: 75%; + } + .text-\[80\%\] { + font-size: 80%; + } + .text-\[85\%\] { + font-size: 85%; + } + .text-\[95\%\] { + font-size: 95%; + } + .text-\[110\%\] { + font-size: 110%; + } + .text-\[120\%\] { + font-size: 120%; + } + .text-\[130\%\] { + font-size: 130%; + } + .text-\[170\%\] { + font-size: 170%; + } + .leading-\[1\.7\] { + --tw-leading: 1.7; + line-height: 1.7; + } + .leading-\[1\.32\] { + --tw-leading: 1.32; + line-height: 1.32; + } + .leading-\[normal\] { + --tw-leading: normal; + line-height: normal; + } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-normal { + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + } + .wrap-anywhere { + overflow-wrap: anywhere; + } + .whitespace-nowrap { + white-space: nowrap; + } + .whitespace-pre { + white-space: pre; + } + .text-\(--accent\) { + color: var(--accent); + } + .text-\(--alt\) { + color: var(--alt); + } + .text-\(--alt\)\/80 { + color: var(--alt); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--alt) 80%, transparent); + } + } + .text-\(--background\) { + color: var(--background); + } + .text-\(--primary\) { + color: var(--primary); + } + .text-\(--secondary\) { + color: var(--secondary); + } + .text-\[\#00ADD7\] { + color: #00ADD7; + } + .text-\[\#00f1ff\] { + color: #00f1ff; + } + .text-\[\#5C6CC1\] { + color: #5C6CC1; + } + .text-\[\#46d46c\] { + color: #46d46c; + } + .text-\[\#54D7A9\] { + color: #54D7A9; + } + .text-\[\#739ebb\] { + color: #739ebb; + } + .text-\[\#897ccb\] { + color: #897ccb; + } + .text-\[\#5874FF\] { + color: #5874FF; + } + .text-\[\#BDC3C7\] { + color: #BDC3C7; + } + .text-\[\#C7727F\] { + color: #C7727F; + } + .text-\[\#D8C44B\] { + color: #D8C44B; + } + .text-\[\#D27D9B\] { + color: #D27D9B; + } + .text-\[\#ED532D\] { + color: #ED532D; + } + .text-\[\#F5A670\] { + color: #F5A670; + } + .text-\[\#F9B010\] { + color: #F9B010; + } + .text-\[\#F16265\] { + color: #F16265; + } + .text-\[\#FF8019\] { + color: #FF8019; + } + .text-\[\#FFFFFF\] { + color: #FFFFFF; + } + .text-\[\#a34eeb\] { + color: #a34eeb; + } + .text-\[\#ffffff\] { + color: #ffffff; + } + .text-\[\%v\] { + color: %v; + } + .text-\[color\:var\(--alt\)\] { + color: var(--alt); + } + .text-\[var\(--accent\)\] { + color: var(--accent); + } + .text-\[var\(--secondary\)\] { + color: var(--secondary); + } + .no-underline { + text-decoration-line: none; + } + .caret-transparent { + caret-color: transparent; + } + .opacity-0 { + opacity: 0%; + } + .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)) { + --tw-shadow: 0 0 1.5rem var(--tw-shadow-color, color-mix(in srgb,var(--accent) 25%,transparent)); + } + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .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)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-150 { + --tw-duration: 150ms; + transition-duration: 150ms; + } + .outline-none { + --tw-outline-style: none; + outline-style: none; + } + .select-text { + -webkit-user-select: text; + user-select: text; + } + .\[--border-py\:0\.5rem\] { + --border-py: 0.5rem; + } + .\[--border-py\:0\.25rem\] { + --border-py: 0.25rem; + } + .\[--border-py\:0\.75rem\] { + --border-py: 0.75rem; + } + .\[--border-py\:0\.875rem\] { + --border-py: 0.875rem; + } + .\[--border-py\:1\.25rem\] { + --border-py: 1.25rem; + } + .\[--ypad\:var\(--border-py\,0\.875rem\)\] { + --ypad: var(--border-py,0.875rem); + } + @media (hover: hover) { + .group-hover\:text-\[var\(--alt\)\]:is(:where(.group):hover *) { + color: var(--alt); + } + .group-hover\:text-gray-700:is(:where(.group):hover *) { + color: var(--color-gray-700); + } + .group-hover\:underline:is(:where(.group):hover *) { + text-decoration-line: underline; + } + } + .group-data-copied\:block:is(:where(.group)[data-copied] *) { + display: block; + } + .group-data-copied\/copy\:block:is(:where(.group\/copy)[data-copied] *) { + display: block; + } + .group-data-copied\/copy\:bg-\(--primary\)\/25\!:is(:where(.group\/copy)[data-copied] *) { + background-color: var(--primary) !important; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 25%, transparent) !important; + } + } + .group-data-\[copied\]\/copy\:block:is(:where(.group\/copy)[data-copied] *) { + display: block; + } + .group-data-\[copied\]\/copy\:hidden:is(:where(.group\/copy)[data-copied] *) { + display: none; + } + .after\:absolute::after { + content: var(--tw-content); + position: absolute; + } + .after\:inset-0::after { + content: var(--tw-content); + inset: 0px; + } + .after\:z-0::after { + content: var(--tw-content); + z-index: 0; + } + @media (hover: hover) { + .hover\:bg-\(--alt\)\/25:hover { + background-color: var(--alt); + } + @supports (color: color-mix(in lab, red, red)) { + .hover\:bg-\(--alt\)\/25:hover { + background-color: color-mix(in oklab, var(--alt) 25%, transparent); + } + } + .hover\:bg-\(--secondary\)\/15:hover { + background-color: var(--secondary); + } + @supports (color: color-mix(in lab, red, red)) { + .hover\:bg-\(--secondary\)\/15:hover { + background-color: color-mix(in oklab, var(--secondary) 15%, transparent); + } + } + .hover\:bg-white\/5:hover { + background-color: color-mix(in srgb, #fff 5%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .hover\:bg-white\/5:hover { + background-color: color-mix(in oklab, var(--color-white) 5%, transparent); + } + } + .hover\:bg-white\/10:hover { + background-color: color-mix(in srgb, #fff 10%, transparent); + } + @supports (color: color-mix(in lab, red, red)) { + .hover\:bg-white\/10:hover { + background-color: color-mix(in oklab, var(--color-white) 10%, transparent); + } + } + .hover\:text-\(--accent\):hover { + color: var(--accent); + } + .hover\:text-\[var\(--alt\)\]:hover { + color: var(--alt); + } + .hover\:text-\[var\(--secondary\)\]:hover { + color: var(--secondary); + } + .hover\:text-gray-700:hover { + color: var(--color-gray-700); + } + .hover\:no-underline:hover { + text-decoration-line: none; + } + .hover\:underline:hover { + text-decoration-line: underline; + } + } + .data-copied\:animate-\[bump_0\.25s\][data-copied] { + animation: bump 0.25s; + } + .data-copied\:bg-\(--primary\)\/25\![data-copied] { + background-color: var(--primary) !important; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--primary) 25%, transparent) !important; + } + } + @media (width >= 40rem) { + .sm\:invisible { + visibility: hidden; + } + .sm\:visible { + visibility: visible; + } + .sm\:top-\[-0\.75vw\] { + top: -0.75vw; + } + .sm\:bottom-\[-0\.75vw\] { + bottom: -0.75vw; + } + .sm\:left-\[0\.625vw\] { + left: 0.625vw; + } + .sm\:col-span-2 { + grid-column: span 2 / span 2; + } + .sm\:m-0 { + margin: 0px; + } + .sm\:my-\[0\.625vw\] { + margin-block: 0.625vw; + } + .sm\:my-\[2\.5vw\] { + margin-block: 2.5vw; + } + .sm\:my-\[2\.25vw\] { + margin-block: 2.25vw; + } + .sm\:mt-\[0\.625vw\] { + margin-top: 0.625vw; + } + .sm\:mt-\[0vw\] { + margin-top: 0vw; + } + .sm\:mr-0 { + margin-right: 0px; + } + .sm\:mr-\[2\.5vw\] { + margin-right: 2.5vw; + } + .sm\:mb-\[1\.5625vw\] { + margin-bottom: 1.5625vw; + } + .sm\:mb-\[2vw\] { + margin-bottom: 2vw; + } + .sm\:contents { + display: contents; + } + .sm\:flex { + display: flex; + } + .sm\:grid { + display: grid; + } + .sm\:h-0 { + height: 0px; + } + .sm\:h-\[30vw\] { + height: 30vw; + } + .sm\:h-\[35vw\] { + height: 35vw; + } + .sm\:h-\[38vw\] { + height: 38vw; + } + .sm\:h-full { + height: 100%; + } + .sm\:max-h-\[24vw\] { + max-height: 24vw; + } + .sm\:w-0 { + width: 0px; + } + .sm\:w-\[40\%\] { + width: 40%; + } + .sm\:w-\[60\%\] { + width: 60%; + } + .sm\:w-\[68\.75vw\] { + width: 68.75vw; + } + .sm\:w-full { + width: 100%; + } + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .sm\:grid-cols-\[1fr_1fr_1fr\] { + grid-template-columns: 1fr 1fr 1fr; + } + .sm\:grid-cols-\[2fr_3fr\] { + grid-template-columns: 2fr 3fr; + } + .sm\:gap-\[1\.25vw\] { + gap: 1.25vw; + } + .sm\:gap-x-\[0\.625vw\] { + column-gap: 0.625vw; + } + .sm\:overflow-visible { + overflow: visible; + } + .sm\:border-\[0\.1vw\] { + border-style: var(--tw-border-style); + border-width: 0.1vw; + } + .sm\:border-\[0\.2vw\] { + border-style: var(--tw-border-style); + border-width: 0.2vw; + } + .sm\:border-\[0\.125vw\] { + border-style: var(--tw-border-style); + border-width: 0.125vw; + } + .sm\:border-solid { + --tw-border-style: solid; + border-style: solid; + } + .sm\:p-\[1vw\] { + padding: 1vw; + } + .sm\:p-\[2\.2vw\] { + padding: 2.2vw; + } + .sm\:px-\[0\.625vw\] { + padding-inline: 0.625vw; + } + .sm\:pt-0 { + padding-top: 0px; + } + .sm\:pt-\[1\.0625vw\] { + padding-top: 1.0625vw; + } + .sm\:pl-\[1\.25vw\] { + padding-left: 1.25vw; + } + .sm\:text-\[1\.125vw\] { + font-size: 1.125vw; + } + .sm\:text-\[1\.375vw\] { + font-size: 1.375vw; + } + .sm\:text-\[1vw\] { + font-size: 1vw; + } + .sm\:text-\[100\%\] { + font-size: 100%; + } + } + @media (width >= 48rem) { + .md\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + } + .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { + display: none; + } + .\[\&\>\*\+\*\]\:mt-\[-0\.1rem\] > * + * { + margin-top: -0.1rem; + } +} +:root { + --primary: #54d7a9; + --secondary: #9b7eca; + --accent: #7ed4fb; + --extra: #8fcc75; + --text: #ffffff; + --alt: #999999; + --background: #000000; + --font-mono: "Jetbrains Mono", monospace; + --font-normal: "Inter", system-ui, sans-serif; +} +html { + background-color: var(--background); + color: var(--text); + font-family: var(--font-mono); + user-select: none; + font-size: 1vw; +} +body { + min-height: 100vh; + display: grid; + place-items: center; +} +@layer base { + a { + font-weight: 300; + text-decoration: none; + color: var(--secondary); + transition-duration: 0.2s; + transition-property: color, text-decoration; + } + a:hover { + text-decoration: underline; + color: var(--accent); + } +} +.scrollbox::-webkit-scrollbar { + width: 1.5rem; +} +.scrollbox::-webkit-scrollbar-track { + background: transparent; + border-left: 0.1rem solid var(--alt); +} +.scrollbox::-webkit-scrollbar-thumb { + background: var(--primary); + border: 0.3rem solid transparent; + background-clip: padding-box; + border-radius: 0; +} +.scrollbox::-webkit-scrollbar-thumb:hover { + background: var(--accent); +} +@supports not selector(::-webkit-scrollbar) { + .scrollbox { + scrollbar-color: var(--primary) transparent; + } +} +.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); +} +.prose a.footnote-ref, .prose a.footnote-ref:hover { + text-decoration: none; +} +.prose code::before, .prose code::after { + content: none; +} +.prose :not(pre) > code { + padding: 0.1em 0.4em; + border-radius: 0.3em; + background: var(--alt); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix(in srgb, var(--alt) 25%, transparent); + } + font-size: 0.9em; +} +.prose pre, .prose code { + font-family: var(--font-mono); +} +.js .footnotes { + display: none; +} +.sidenotes { + position: fixed; + overflow: hidden; + pointer-events: none; +} +.sidenote { + position: absolute; + left: 0; + right: 0; + background: var(--background); + font-family: var(--font-normal); + font-size: 16px; + line-height: 1.4; + pointer-events: auto; +} +.sidenotes.bordered .sidenote { + border: 0.1rem solid var(--alt); + padding: 0.4rem 0.6rem; +} +.sidenote-num { + font-size: 70%; + color: var(--secondary); + margin-right: 0.15em; +} +.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { + color: var(--secondary); +} +.chroma .nf, .chroma .nc, .chroma .nb { + color: var(--primary); +} +.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { + color: var(--extra); +} +.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { + color: var(--primary); +} +.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { + color: var(--alt); + font-style: italic; +} +.codeblock { + margin: 1.2em 0; + border: 0.1rem solid var(--alt); + border-radius: 0.4rem; + background: rgb(0 0 0 / 0.3); + overflow: hidden; +} +.codeblock::before { + content: attr(data-lang); + display: block; + padding: 0.2em 0.8em; + border-bottom: 0.1rem solid var(--alt); + font-size: 0.75em; + color: var(--alt); +} +.codeblock[data-lang=""]::before { + display: none; +} +.codeblock pre { + margin: 0; + padding: 0.8em 1em; + background: transparent; + border-radius: 0; + overflow-x: auto; + font-size: 0.85em; + line-height: 1.5; +} +@keyframes pop { + 50% { + transform: scale(1.3); + } +} +[data-copied] svg { + animation: pop 0.25s; +} +@keyframes bump { + 50% { + transform: scale(1.03); + } +} +@keyframes blink { + 50% { + opacity: 0; + } +} +[data-shell-caret] { + animation: blink 1.1s steps(1) infinite; +} +[data-shell-prompt]:not(:focus-within) [data-shell-caret] { + visibility: hidden; +} +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-scale-x { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-y { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-z { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: "<percentage>"; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: "<percentage>"; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: "<length>"; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-duration { + syntax: "*"; + inherits: false; +} +@property --tw-content { + syntax: "*"; + initial-value: ""; + inherits: false; +} +@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 { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-x-reverse: 0; + --tw-border-style: solid; + --tw-leading: initial; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-duration: initial; + --tw-content: ""; + } + } +} diff --git a/public/styles/terminal.css b/public/styles/terminal.css deleted file mode 100644 index e0e80aa..0000000 --- a/public/styles/terminal.css +++ /dev/null @@ -1,70 +0,0 @@ -@import url("@styles/fonts/JetBrainsMono.css"); - -@font-face { - font-family: "Monocraft"; - src: url("/fonts/Monocraft.ttf") format("truetype"); - font-display: swap; -} - -:root { - --primary: #54d7a9; - --secondary: #9b7eca; - --accent: #7ed4fb; - --extra: #8fcc75; - --text: #ffffff; - --alt: #999999; - --background: #000000; - --font: "Jetbrains Mono", monospace; -} - -html { - background-color: var(--background); - color: var(--text); - font-family: var(--font); - user-select: none; - - font-size: 1vw; -} - -body { - min-height: 100vh; - display: grid; - place-items: center; -} - -@layer base { - a { - font-weight: 300; - text-decoration: none; - color: var(--secondary); - transition-duration: 0.2s; - transition-property: color, text-decoration; - } - a:hover { - text-decoration: underline; - color: var(--accent); - } -} - -.scrollbox::-webkit-scrollbar { - width: 1.5rem; -} -.scrollbox::-webkit-scrollbar-track { - background: transparent; - border-left: 0.1rem solid var(--alt); -} -.scrollbox::-webkit-scrollbar-thumb { - background: var(--primary); - border: 0.3rem solid transparent; - background-clip: padding-box; - border-radius: 0; -} -.scrollbox::-webkit-scrollbar-thumb:hover { - background: var(--accent); -} - -@supports not selector(::-webkit-scrollbar) { - .scrollbox { - scrollbar-color: var(--primary) transparent; - } -} |