1 files changed, 262 insertions, 0 deletions
diff --git a/public/styles/main.css b/public/styles/main.css
new file mode 100644
index 0000000..2c44266
--- /dev/null
+++ b/public/styles/main.css
@@ -0,0 +1,262 @@
+@import "./fonts/Inter/inter.css";
+@import "./fonts/JetBrainsMono.css";
+@import "./fonts/Monocraft.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);
+  }
+}