revamp

2026-07-05 23:03:23 +02:00
parent b26c3d68a5
commit 5aca925a3e
20 changed files with 2578 additions and 1224 deletions
@@ -4,26 +4,38 @@

@layer base {
  :root {
-    --background: 36 39% 88%;
-    --foreground: 36 45% 15%;
-    --primary: 36 45% 70%;
-    --primary-foreground: 36 45% 11%;
-    --secondary: 40 35% 77%;
-    --secondary-foreground: 36 45% 25%;
-    --accent: 36 64% 57%;
-    --accent-foreground: 36 72% 17%;
-    --destructive: 0 84% 37%;
-    --destructive-foreground: 0 0% 98%;
-    --muted: 36 33% 75%;
-    --muted-foreground: 36 45% 25%;
-    --card: 36 46% 82%;
-    --card-foreground: 36 45% 20%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --border: 36 45% 60%;
-    --input: 36 45% 60%;
-    --ring: 36 45% 30%;
-    --radius: 0rem;
+    /* 3blue1brown-inspired dark palette: deep space blue background,
+       a warm gold accent for emphasis, and a small, deliberate set of
+       "state" colors used consistently across every visualization. */
+    --background: 222 47% 7%;
+    --foreground: 210 40% 96%;
+
+    --primary: 199 89% 64%;          /* 3b1b sky blue */
+    --primary-foreground: 222 47% 7%;
+    --secondary: 222 30% 16%;
+    --secondary-foreground: 210 40% 90%;
+    --accent: 43 96% 62%;            /* warm gold, used sparingly */
+    --accent-foreground: 222 47% 7%;
+    --destructive: 358 75% 59%;
+    --destructive-foreground: 210 40% 96%;
+    --muted: 222 25% 14%;
+    --muted-foreground: 215 20% 65%;
+    --card: 222 40% 10%;
+    --card-foreground: 210 40% 96%;
+    --popover: 222 44% 9%;
+    --popover-foreground: 210 40% 96%;
+    --border: 222 25% 20%;
+    --input: 222 25% 20%;
+    --ring: 199 89% 64%;
+    --radius: 0.75rem;
+
+    /* Algorithm state colors — one meaning each, used everywhere. */
+    --state-idle: 199 60% 55%;
+    --state-compare: 43 96% 62%;
+    --state-swap: 358 75% 59%;
+    --state-sorted: 152 60% 50%;
+    --state-pivot: 271 76% 68%;
+    --state-active-range: 199 89% 64%;
  }
 }

@@ -34,9 +46,42 @@

  body {
    @apply bg-background text-foreground;
+    background-image:
+      linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
+    background-size: 44px 44px;
+    background-position: center -1px;
  }

-  /*h1, h2, h3, h4, h5, h6 {*/
-  /*  @apply font-heading;*/
-  /*}*/
-}
+  ::selection {
+    background: hsl(var(--accent) / 0.35);
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 999px;
+  }
+}
+
+@layer utilities {
+  .glow-primary {
+    box-shadow: 0 0 24px hsl(var(--primary) / 0.35);
+  }
+  .glow-accent {
+    box-shadow: 0 0 24px hsl(var(--accent) / 0.35);
+  }
+  .text-balance {
+    text-wrap: balance;
+  }
+  .bg-grid-fade {
+    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
+    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
+  }
+}
@@ -1,25 +1,37 @@
 import { ReactNode } from 'react';
-import { DM_Sans, Space_Mono } from 'next/font/google';
+import { Inter, JetBrains_Mono } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import './globals.css';

-const fontHeading = DM_Sans({
+const fontSans = Inter({
    subsets: ['latin'],
    display: 'swap',
-    variable: '--font-heading',
+    variable: '--font-sans',
 });

+const fontMono = JetBrains_Mono({
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-mono',
+});
+
+export const metadata = {
+    title: 'Valgo — Watch how sorting actually works',
+    description: 'An animated, narrated visualizer for nine classic sorting algorithms.',
+};
+
 type LayoutProps = {
    children: ReactNode;
 };

 export default function Layout({ children }: LayoutProps) {
    return (
-        <html lang="en">
+        <html lang="en" className="dark">
        <body
            className={cn(
-                'antialiased',
-                fontHeading.variable
+                'antialiased font-sans',
+                fontSans.variable,
+                fontMono.variable
            )}
        >
        {children}