fix: add bg-dark-50 and fix color issues

docs/config.ts

@@ -4,9 +4,10 @@ export interface Docs {
 
 export interface SidebarItem {
   text: string;
-  items: SidebarItem[] & {
+  items: {
+    text: string;
     link: string;
-  }[]
+  }[];
 }
 
 export const docs: Docs = {

src/components/widgets/Navbar.astro

@@ -30,7 +30,7 @@ const navItems = [
     <a class="text-2xl font-extrabold" href="/">xHyroM</a>
     <nav>
       <ul
-        class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-200 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
+        class="nav-links absolute left-0 top-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-dark-50 transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
       >
         {
           navItems.map((item) => (

src/pages/projects.astro

@@ -60,7 +60,7 @@ projects.sort((a, b) => a.name.localeCompare(b.name));
     <main class="flex flex-wrap justify-center gap-12">
       {
         projects.map((project) => (
-          <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-200 p-6 md:w-96">
+          <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-50 p-6 md:w-96">
             <div class="flex">
               <h2 class="mb-4 break-words text-3xl font-bold text-white">
                 {project.name}

tailwind.config.cjs

@@ -14,6 +14,7 @@ module.exports = {
     extend: {
       colors: {
         dark: "#0D0D0D",
+        "dark-50": "#131313",
         "dark-100": "#1A1A1A",
         "dark-200": "#242424",
         "dark-300": "#2E2E2E",