From 1dd92307d6b6ddf1a6c3b4e87eebfc3a1a2ad985 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Thu, 23 Jul 2026 08:17:10 +0200 Subject: [PATCH] style: optimize global CSS, scrollbars, and text shadow --- src/app/globals.css | 60 +++++++++++++++++++++++++---------- src/app/layout.tsx | 10 +++--- src/components/About.tsx | 20 ++++++------ src/components/Background.tsx | 4 +-- src/components/Footer.tsx | 2 +- src/components/Header.tsx | 14 ++++---- src/components/Hero.tsx | 12 +++---- src/components/Skills.tsx | 14 ++++---- 8 files changed, 83 insertions(+), 53 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..11ce580 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,52 @@ @import "tailwindcss"; -:root { - --background: #ffffff; - --foreground: #171717; +@theme { + --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; + --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace; } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} +@layer base { + html { + color-scheme: dark; + scroll-behavior: smooth; + height: 100%; + scrollbar-color: #1e293b #020617; + scrollbar-width: thin; + } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; + body { + @apply bg-slate-950 text-slate-200 font-sans text-base antialiased min-h-full flex flex-col relative overflow-x-hidden; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); + } + + ::selection { + @apply bg-blue-500/30 text-blue-200; + } + + :focus-visible { + @apply outline-2 outline-offset-2 outline-blue-500 rounded-sm; + } + + ::-webkit-scrollbar { + width: 8px; + } + ::-webkit-scrollbar-track { + background: #020617; + } + ::-webkit-scrollbar-thumb { + background: #1e293b; + border-radius: 4px; + } + ::-webkit-scrollbar-thumb:hover { + background: #334155; } } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill { + -webkit-text-fill-color: #e2e8f0; + -webkit-box-shadow: 0 0 0px 1000px #020617 inset; + transition: background-color 5000s ease-in-out 0s; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6d1e413..dbee989 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,11 +9,14 @@ const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], display: "swap", + preload: false, }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], + display: "swap", + preload: false, }); export const metadata: Metadata = { @@ -27,11 +30,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + +
{children}
diff --git a/src/components/About.tsx b/src/components/About.tsx index 24db50e..6f0b4f5 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -2,7 +2,7 @@ export default function About() { return (
{/* Titel */}
@@ -16,7 +16,7 @@ export default function About() {
{/* Left column */} -
+

Hey there! André here—a full-stack developer based in Karlsruhe. A childhood fascination with computers sparked this journey, which has @@ -55,11 +55,13 @@ export default function About() { {/* Right column */}

-
+
{/* Header Titel */} @@ -75,7 +77,7 @@ export default function About() {
  • ▸ Languages: - + German, English
    • @@ -84,7 +86,7 @@ export default function About() { Core Stack: - + Angular (TS), React (Next.js) @@ -93,7 +95,7 @@ export default function About() { Core Focus: - + Clean Code & Architecture diff --git a/src/components/Background.tsx b/src/components/Background.tsx index c1c27d5..40d70ef 100644 --- a/src/components/Background.tsx +++ b/src/components/Background.tsx @@ -2,7 +2,7 @@ export default function Background() { return ( <>
    -
    +
    ); } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 147fcb4..1dbf520 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; export default function Footer() { return ( -