From 886334086d5c5e6d55fca7dcfb6b1d7a0167eec4 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Mon, 2 Feb 2026 00:17:40 +0100 Subject: [PATCH] Tailwind css --- src/app/globals.css | 121 ++++++++++++++++++---------------- src/app/layout.tsx | 12 +++- src/components/app/Navbar.tsx | 41 +++++------- 3 files changed, 89 insertions(+), 85 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 6cf72ed..7ba76bb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,42 +1,30 @@ @import "tailwindcss"; @import "tw-animate-css"; +/* Dark variant helper */ @custom-variant dark (&:is(.dark *)); +/* Map your DevRun tokens into Tailwind theme variables */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); @@ -46,8 +34,9 @@ --radius-4xl: calc(var(--radius) + 16px); } +/* Root variables (light theme) */ :root { - --radius: 0.625rem; + --radius: 0.75rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); @@ -66,21 +55,9 @@ --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); } +/* Dark theme variables */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); @@ -100,26 +77,54 @@ --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); } +/* Base layer */ @layer base { * { @apply border-border outline-ring/50; } + body { - @apply bg-background text-foreground; + @apply bg-background text-foreground antialiased; + font-family: 'Space Grotesk', sans-serif; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: 'Space Grotesk', sans-serif; + @apply font-bold tracking-tight; + } + + .font-mono { + font-family: 'JetBrains Mono', monospace; } } + +/* Components layer */ +@layer components { + .glow-purple { + box-shadow: 0 0 20px var(--primary)/0.3, 0 0 40px var(--primary)/0.1; + } + + .glow-purple-intense { + box-shadow: 0 0 30px var(--primary)/0.5, 0 0 60px var(--primary)/0.2; + } + + .hover-underline { + @apply relative; + } + + .hover-underline::after { + content: ""; + @apply absolute bottom-0 left-0 w-0 h-[2px] bg-primary transition-all duration-300; + } + + .hover-underline:hover::after { + @apply w-full; + } +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..51c2923 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Navbar from "@/components/app/Navbar"; +import Footer from "@/components/app/Footer"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -25,9 +27,15 @@ export default function RootLayout({ return ( - {children} +
+ +
+ {children} +
+
+
); diff --git a/src/components/app/Navbar.tsx b/src/components/app/Navbar.tsx index 2fe0fe0..ec11d02 100644 --- a/src/components/app/Navbar.tsx +++ b/src/components/app/Navbar.tsx @@ -1,19 +1,7 @@ import Link from "next/link"; import { Timer, Trophy, User, Zap } from "lucide-react"; -import { usePathname } from "next/navigation"; const Navbar = () => { - const pathname = usePathname(); - - const navLinks = [ - { to: "/problems", label: "Problems", icon: Zap }, - { to: "/run", label: "Run", icon: Timer }, - { to: "/leaderboards", label: "Leaderboards", icon: Trophy }, - { to: "/profile", label: "Profile", icon: User }, - ]; - - const isActive = (path: string) => pathname === path; - return (