WIP

src/routes/+layout.svelte

@@ -2,7 +2,13 @@
 	import SiteHeader from '$lib/components/SiteHeader.svelte';
 	import SiteFooter from '$lib/components/SiteFooter.svelte';
 	import { ModeWatcher } from 'mode-watcher';
-	import '../app.css';
+
+	import '../styles/app.css';
+	import '../styles/anchor.css';
+	import '../styles/code.css';
+	import '../styles/autocomplete.css';
+	import '../styles/docsearch.css';
+
 	let { children } = $props();
 </script>
 

src/styles/anchor.css

@@ -0,0 +1,23 @@
+.prose .anchor {
+	text-decoration: none;
+}
+
+.prose .anchor::after {
+	content: '#';
+	color: #999;
+	margin-left: 0.25rem;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.prose h2:hover .anchor::after,
+.prose h3:hover .anchor::after,
+.prose h4:hover .anchor::after,
+.prose h5:hover .anchor::after,
+.prose h6:hover .anchor::after {
+	opacity: 1;
+}
+
+.prose .anchor .dark & {
+	color: #fff;
+}

src/styles/app.css

@@ -0,0 +1,196 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 20 14.3% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 24 9.8% 10%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 20 14.3% 4.1%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 60 9.1% 97.8%;
+		--primary-foreground: 24 9.8% 10%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 24 5.7% 82.9%;
+	}
+}
+
+@layer base {
+	@font-face {
+		font-family: 'geist-sans';
+		src: url('/fonts/Geist/geist.woff2') format('woff2');
+		font-display: swap;
+	}
+
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		/* font-feature-settings: "rlig" 1, "calt" 1; */
+		font-synthesis-weight: none;
+		text-rendering: optimizeLegibility;
+	}
+
+	/* Mobile tap highlight */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+	html {
+		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+	}
+
+	/* Font face Geist font */
+
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
+
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+	html {
+		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
+	}
+
+	html.dark {
+		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+	.antialised {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+}
+
+@layer utilities {
+	.step {
+		counter-increment: step;
+	}
+
+	.step:before {
+		@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
+		@apply ml-[-50px] mt-[-4px];
+		content: counter(step);
+	}
+
+	.chunk-container {
+		@apply shadow-none;
+	}
+
+	.chunk-container::after {
+		content: '';
+		@apply absolute -inset-4 rounded-xl border shadow-xl;
+	}
+}
+
+@media (max-width: 640px) {
+	.container {
+		@apply px-4;
+	}
+}
+
+[data-theme='default'] {
+	display: flex;
+}
+
+[data-style='new-york'] [data-style='default'] {
+	display: none;
+}
+
+[data-style='default'] [data-style='default'] {
+	display: flex;
+	flex-direction: column;
+}
+
+[data-style='new-york'] [data-style='new-york'] {
+	display: flex;
+	flex-direction: column;
+}
+
+[data-style='default'] [data-style='new-york'] {
+	display: none;
+}
+
+.super-debug {
+	@apply bg-zinc-950 text-[#FFF8] dark:bg-zinc-900 !important;
+}
+
+.super-debug--pre {
+	@apply !bg-transparent !text-[#FFF8];
+}
+
+.super-debug--code {
+	@apply !bg-transparent;
+}
+
+.super-debug--code .key {
+	@apply text-white !important;
+}
+
+.super-debug--code .undefined {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .string {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .number {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .boolean {
+	@apply !text-[#FFF8];
+}
+
+.vis-xy-container {
+	--vis-tooltip-padding: '0px';
+	--vis-tooltip-background-color: 'transparent';
+	--vis-tooltip-border-color: 'transparent';
+}