orus-dev/dev-run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tailwind css

Browse Source
This commit is contained in:
selimaj-dev
2026-02-02 00:17:40 +01:00
parent cf6f1ed07a
commit 886334086d
3 changed files with 89 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+63 -58
View File
@@ -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;
}
}
src/app/layout.tsx
+9 -1
View File
@@ -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 (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
>
<div className="min-h-screen flex flex-col">
<Navbar />
<main className="flex-1">
{children}
</main>
<Footer />
</div>
</body>
</html>
);
src/components/app/Navbar.tsx
+15 -24
View File
@@ -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 (
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
<div className="container mx-auto px-6">
@@ -34,19 +22,22 @@ const Navbar = () => {
{/* Navigation Links */}
<div className="hidden md:flex items-center gap-1">
{navLinks.map(({ to, label, icon: Icon }) => (
<Link
key={to}
href={to}
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ${isActive(to)
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-secondary"
}`}
>
<Icon className="h-4 w-4" />
{label}
<Link href="/problems" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Zap className="h-4 w-4" />
Problems
</Link>
<Link href="/run" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Timer className="h-4 w-4" />
Run
</Link>
<Link href="/leaderboards" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<Trophy className="h-4 w-4" />
Leaderboards
</Link>
<Link href="/profile" className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary">
<User className="h-4 w-4" />
Profile
</Link>
))}
</div>
{/* CTA Button */}