feat: default light theme and coloring fixes

Author: KodingDev

src/app/art/[artist]/[slug]/page.tsx

@@ -44,7 +44,7 @@ export default async function CommissionPage({ params }: PageProps<"/art/[artist
   if (!commission) notFound();
 
   return (
-    <div className="layout-container pt-40 pb-36">
+    <div className="pt-40 pb-36">
       <div className="flex flex-col gap-6">
         <SiteLink type="back" href="/art" className="opacity-50">
           Back to all commissions

src/app/art/page.tsx

@@ -18,7 +18,7 @@ export default function ArtPage() {
   const refSheet = REF_SHEET.artist.commissions[REF_SHEET.commissionIdx]!;
 
   return (
-    <div className="layout-container flex flex-col gap-4 pb-36">
+    <div className="flex flex-col gap-4 pb-36">
       <Header emoji="🎨" title="Art" className="pt-40 pb-32">
         I've commissioned a lot of art over the years, please support these talented artists!
       </Header>
@@ -29,7 +29,7 @@ export default function ArtPage() {
           picture={refSheet.images[0] ? { src: refSheet.images[0] } : undefined}
           href={`/art/${refSheetArtist.slug}/${refSheet.slug}` as Route}
         >
-          <div className="flex min-h-[400px] flex-col justify-end gap-3 p-6 md:p-10">
+          <div className="flex min-h-[400px] flex-col justify-end gap-3 p-6 text-secondary md:p-10">
             {/* Artist name */}
             <div className="flex flex-row items-center gap-2">
               {refSheetArtist.avatar && (
@@ -63,7 +63,7 @@ export default function ArtPage() {
             .map((commission) => (
               <Link
                 key={`${artist.slug}-${commission.slug}`}
-                className="relative aspect-square w-full overflow-clip rounded-md border border-white/25 transition-all hover:scale-[101%] hover:shadow-xl"
+                className="relative aspect-square w-full overflow-clip rounded-md border border-foreground/25 text-secondary transition-all hover:scale-[101%] hover:shadow-xl"
                 href={`/art/${artist.slug}/${commission.slug}`}
               >
                 {/* Image */}

src/app/clients/[slug]/page.tsx

@@ -39,7 +39,7 @@ export default async function ClientPage({ params }: PageProps<"/clients/[slug]"
   if (!client) notFound();
 
   return (
-    <div className="layout-container flex flex-col gap-8 pt-32 pb-36">
+    <div className="flex flex-col gap-8 pt-32 pb-36">
       <SiteLink href="/clients" type="back" className="opacity-50">
         Back to all clients
       </SiteLink>
@@ -79,7 +79,10 @@ export default async function ClientPage({ params }: PageProps<"/clients/[slug]"
               <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                 {project.media.map((media, mediaIdx) => (
                   // biome-ignore lint/suspicious/noArrayIndexKey: No other option
-                  <div key={mediaIdx} className="group relative overflow-clip rounded-lg border border-white/[15%]">
+                  <div
+                    key={mediaIdx}
+                    className="group relative overflow-clip rounded-lg border border-foreground/[15%]"
+                  >
                     {media.type === "video" || media.type === "embed" ? (
                       // Website embeds
                       <MediaEmbed
@@ -122,7 +125,7 @@ export default async function ClientPage({ params }: PageProps<"/clients/[slug]"
               {client.testimonials.map((testimonial) => (
                 <div
                   key={testimonial.name}
-                  className="flex flex-col items-center gap-6 rounded-lg border border-white/[15%] bg-white/[5%] p-6"
+                  className="flex flex-col items-center gap-6 rounded-lg border border-foreground/[15%] bg-white/[5%] p-6"
                 >
                   <div className="flex flex-row items-center gap-4">
                     {testimonial.avatar && (

src/app/clients/page.tsx

@@ -5,7 +5,7 @@ import { allClients } from "@/lib/content";
 // biome-ignore lint/style/noDefaultExport: NextJS
 export default function ClientsPage() {
   return (
-    <div className="layout-container pt-40 pb-36">
+    <div className="pt-40 pb-36">
       <Header emoji="📊" title="Clients">
         Some of the amazing people I've had the pleasure of working with.
       </Header>

src/app/globals.css

@@ -44,9 +44,6 @@
   --sidebar-accent-foreground: oklch(1 0 0);
   --sidebar-border: oklch(0.25 0.0295 269.9587);
   --sidebar-ring: oklch(0.6201 0.1902 264.8967);
-  --font-sans: var(--font-poppins);
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: ui-monospace, "SF Mono", monospace;
   --radius: 0.5rem;
   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@@ -227,65 +224,3 @@
 .icon.sm {
   @apply h-[24px] w-[24px];
 }
-
-/* Layout */
-.layout-container {
-  @apply mx-8 md:mx-32 xl:mx-48;
-}
-
-/* Hoverable */
-.hoverable {
-  --mouse-x: -9999px;
-  --mouse-y: -9999px;
-}
-
-.hoverable.hoverable-card {
-  @apply relative flex grow flex-col overflow-clip opacity-100;
-}
-
-.hoverable.hoverable-card:hover::before {
-  @apply opacity-100;
-}
-
-.hoverable.hoverable-card::before,
-.hoverable.hoverable-card::after {
-  @apply absolute left-0 top-0 h-full w-full opacity-0 transition-opacity content-[''];
-}
-
-.hoverable.hoverable-card::before {
-  /* Less intense hover effect */
-
-  @apply z-[3];
-  background: radial-gradient(
-    800px circle at var(--mouse-x) var(--mouse-y),
-    rgba(255, 255, 255, 0.06),
-    transparent 40%
-  );
-}
-
-.hoverable.hoverable-card::after {
-  /* Outline that shows regardless of hover state */
-
-  @apply z-[1] rounded-[inherit] border opacity-100;
-  border-image: radial-gradient(
-    600px circle at var(--mouse-x) var(--mouse-y),
-    rgba(255, 255, 255, 0.4),
-    transparent 40%
-  );
-  border-image-slice: 1;
-
-  /* TODO: Fix the rounding */
-  /* Create a mask that is rounded on all corners, to create a rounded outline */
-  /* This is because the border-image property does not support border-radius */
-
-  /* --border-radius: 0.5rem; */
-  /* background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%); */
-  /* mask-image:  */
-  /* linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
-      linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
-      linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
-      linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%), */
-
-  /* Round the inside corners */
-  /* radial-gradient(circle at var(--border-radius) var(--border-radius), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%); */
-}

src/app/layout.tsx

@@ -4,7 +4,6 @@ import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import NextTopLoader from "nextjs-toploader";
 import { ViewTransition } from "react";
-import { HoverListener } from "@/components/interactive/hoverable";
 import { Navbar } from "@/components/layout/navbar";
 import { cn } from "@/lib/utils";
 
@@ -60,25 +59,22 @@ export default function RootLayout({ children }: Readonly<LayoutProps<"/">>) {
 
       <body
         className={cn(
-          "dark min-h-screen bg-background font-sans text-foreground",
+          "container min-h-screen bg-background font-sans text-foreground",
           boskaFont.variable,
           switzerFont.variable
         )}
       >
-        <div className="flex min-h-screen flex-col justify-between">
+        <div className="flex flex-col justify-between">
           <NextTopLoader color="var(--primary)" showSpinner={false} />
-          <HoverListener />
 
-          <div className="layout-container">
-            <Navbar />
-          </div>
+          <Navbar />
 
           <ViewTransition>
             <div>{children}</div>
           </ViewTransition>
 
           {/* Footer */}
-          <div className="layout-container flex flex-row pb-24">
+          <div className="flex flex-row pb-24">
             <span className="flex-1 font-medium opacity-50">Copyright © Koding Development 2025</span>
             <span className="flex-1 text-right font-medium opacity-50">Stella, Software Engineer</span>
           </div>

src/app/not-found.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 // biome-ignore lint/style/noDefaultExport: NextJS
 export default function NotFound() {
   return (
-    <div className="layout-container flex min-h-screen flex-col items-center justify-center gap-8 px-4 py-16 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 px-4 py-16 text-center">
       <div className="flex flex-col gap-4">
         <h1 className="font-bold text-9xl">404</h1>
         <div className="h-1 w-full rounded-full bg-gradient-to-r from-transparent via-white/25 to-transparent" />

src/app/page.tsx

@@ -15,7 +15,7 @@ export default function HomePage() {
     <div className="flex flex-col gap-16 pb-36">
       {/* calc = full height - h-24 (navbar / 6 rem) */}
       {/* Header */}
-      <div className="layout-container flex h-[calc(100svh-6rem)]">
+      <div className="flex h-[calc(100svh-6rem)]">
         <div className="relative my-auto 2xl:w-2/3">
           {/* Titles */}
           <Header emoji="👋" title="Hi, I'm Stella">

src/components/clients/client-call-to-action.tsx

@@ -11,7 +11,7 @@ type ClientCallToActionProps = {
 
 export const ClientCallToAction: React.FC<ClientCallToActionProps> = ({ client }) => (
   <CallToAction href={`/clients/${client.slug}` as Route} picture={client.banner ? { src: client.banner } : undefined}>
-    <div className="flex flex-col gap-3 p-6 md:p-10">
+    <div className="flex flex-col gap-3 p-6 text-secondary md:p-10">
       <div className="flex flex-row items-center">
         <div className={`h-2 w-2 rounded-full ${client.end ? "bg-red-500" : "bg-green-500"}`} />
         <span className="pl-2 opacity-75">

src/components/home/project.tsx

@@ -16,7 +16,7 @@ export const Project: React.FC<ProjectProps> = ({ project }) => {
       href={project.url as Route}
       target="_blank"
       rel="noopener noreferrer"
-      className="hoverable hoverable-card flex flex-col gap-3 border border-white/10 bg-gradient-to-b from-white/[2.5%] p-6 transition-all duration-300 hover:scale-[101%] hover:to-white/[5%] hover:shadow-md"
+      className="flex flex-col gap-3 rounded-md border border-foreground/10 bg-gradient-to-b from-white/[2.5%] p-6 transition-all duration-300 hover:scale-[101%] hover:to-white/[5%] hover:shadow-md"
     >
       <div className="flex flex-row items-center">
         <language.icon className="size-5" />