docs: redesign website and add starlight docs

1 files changed, 162 insertions, 0 deletions

diff --git a/website/src/styles/starlight.css b/website/src/styles/starlight.css
new file mode 100644
index 00000000..4287d510
--- /dev/null
+++ b/website/src/styles/starlight.css
@@ -0,0 +1,162 @@
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("/assets/jbm.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+  --sl-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --sl-content-width: 54rem;
+  --sl-sidebar-width: 18.5rem;
+  --sl-color-accent-low: #123c37;
+  --sl-color-accent: #42cabb;
+  --sl-color-accent-high: #d9fff8;
+  --sl-color-white: #f8fbff;
+  --sl-color-gray-1: #e8edf2;
+  --sl-color-gray-2: #c7d0d9;
+  --sl-color-gray-3: #93a0ad;
+  --sl-color-gray-4: #62707f;
+  --sl-color-gray-5: #34404c;
+  --sl-color-gray-6: #202833;
+  --sl-color-black: #10151c;
+  --sl-color-bg: #10151c;
+  --sl-color-bg-nav: #151b23;
+  --sl-color-bg-sidebar: #151b23;
+  --sl-color-bg-inline-code: #202833;
+  --sl-color-hairline: #25303b;
+  --sl-color-hairline-light: #34404c;
+}
+
+:root[data-theme="light"] {
+  --sl-color-accent-low: #d7f1ed;
+  --sl-color-accent: #1f6f68;
+  --sl-color-accent-high: #0f3f3b;
+  --sl-color-white: #151a21;
+  --sl-color-gray-1: #26313c;
+  --sl-color-gray-2: #40505d;
+  --sl-color-gray-3: #687381;
+  --sl-color-gray-4: #8d989f;
+  --sl-color-gray-5: #d4cabd;
+  --sl-color-gray-6: #eee7dc;
+  --sl-color-gray-7: #f7f3ea;
+  --sl-color-black: #fffdf8;
+  --sl-color-bg: #f7f3ea;
+  --sl-color-bg-nav: #fffdf8;
+  --sl-color-bg-sidebar: #fffdf8;
+  --sl-color-bg-inline-code: #eee7dc;
+  --sl-color-hairline: #ded6c8;
+  --sl-color-hairline-light: #c9bdad;
+}
+
+.site-title {
+  font-family: var(--sl-font-mono);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+
+.sl-markdown-content {
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.sl-markdown-content h1,
+.hero h1 {
+  letter-spacing: -0.055em;
+  line-height: 0.98;
+  font-size: clamp(2.4rem, 5vw, 4.2rem);
+}
+
+.sl-markdown-content h2 {
+  margin-top: 2.6rem;
+  letter-spacing: -0.035em;
+}
+
+.sl-markdown-content h3 {
+  letter-spacing: -0.025em;
+}
+
+.sl-markdown-content > p:first-child {
+  font-size: 1.08rem;
+  color: var(--sl-color-gray-1);
+}
+
+.header a[href="/"]::after {
+  content: "home";
+  margin-left: 0.75rem;
+  color: var(--sl-color-gray-3);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+#starlight__sidebar a[aria-current="page"] {
+  background: color-mix(in srgb, var(--sl-color-accent) 13%, transparent);
+  color: var(--sl-color-accent-high);
+  box-shadow: inset 2px 0 0 var(--sl-color-accent);
+}
+
+:root[data-theme="light"] #starlight__sidebar a[aria-current="page"] {
+  color: var(--sl-color-accent-high);
+}
+
+.sl-markdown-content a:not(:where(.not-content *)) {
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+.sl-markdown-content code:not(:where(.not-content *)) {
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 0.35rem;
+  font-size: 0.88em;
+}
+
+.sl-markdown-content pre {
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 0.85rem;
+}
+
+.expressive-code {
+  margin: 1rem 0 1.35rem;
+}
+
+.expressive-code .frame {
+  border: 1px solid var(--sl-color-hairline) !important;
+  border-radius: 0.85rem !important;
+  box-shadow: none !important;
+  overflow: hidden;
+}
+
+.expressive-code .frame.is-terminal .header {
+  display: none;
+}
+
+.expressive-code .frame pre {
+  border: 0 !important;
+  border-radius: 0 !important;
+}
+
+.expressive-code .frame.has-title:not(.is-terminal) .header {
+  background: var(--sl-color-bg-nav) !important;
+  border-color: var(--sl-color-hairline) !important;
+}
+
+.sl-markdown-content .card {
+  border-color: var(--sl-color-hairline);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--sl-color-accent) 5%, transparent), transparent 58%),
+    var(--sl-color-black);
+}
+
+.sl-markdown-content .card .title {
+  color: var(--sl-color-white);
+}
+
+.hero img {
+  image-rendering: auto;
+  filter: drop-shadow(0 20px 50px rgb(31 111 104 / 0.18));
+}