Details XD

src/components/LangSwitcher.jsx

@@ -34,7 +34,7 @@ export function LangSwitcher() {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
+                <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
                 <DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>

src/components/NavButton.jsx

@@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
 export function NavButton({selected, variant}) {
 
     return (
-        <Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent" : "text-content")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
+        <Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
     )
 }

src/components/Showcase.astro

@@ -7,5 +7,7 @@ const { title, description } = dictionary[Astro.currentLocale];
 ---
 
 <SinglePage>
-    <ShowcaseTabs client:load/>
+    <div class="flex flex-col h-screen">
+        <ShowcaseTabs client:load />
+    </div>
 </SinglePage>

src/components/ShowcaseTabs.jsx

@@ -43,51 +43,51 @@ const data = [{
 
 export function ShowcaseTabs() {
     return (
-        <Tabs defaultValue={data[0].value} className="h-full">
-
-            {data.map((item) => (
-                <TabsContent value={item.value} className="">
-                    <Card className="h-full">
-                        <CardHeader>
-                            <CardTitle>{item.title}</CardTitle>
-                            <CardDescription>
-                                {item.description}
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            <Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
-                                <CarouselContent>
-                                    {item.images.map((image, index) => (
-                                        <CarouselItem key={index}>
-                                            <Card>
-                                                <CardContent className="flex aspect-square items-center justify-center p-6">
-                                                    <img src={image.src} alt={image.alt} />
-                                                </CardContent>
-                                            </Card>
-                                        </CarouselItem>
-                                    ))}
-                                </CarouselContent>
-                                <div className="w-full pt-10 grid grid-cols-2 gap-4 ">
-                                    <div className="col-start-1 flex text-center justify-center w-full h-full">
-                                        <CarouselPrevious />
-                                    </div>
-                                    <div className="col-start-2 flex justify-center">
-                                        <CarouselNext />
-                                    </div>
-                                </div>
-                            </Carousel>
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-            ))
-            }
-
-            <TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
-                {data.map((item) => (
-                    <TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
-                ))}
-            </TabsList>
-
+        <Tabs defaultValue={data[0].value} className="h-[87%] bottom-0 flex flex-col">
+            <div className="my-auto">
+                <div>
+                    {data.map((item) => (
+                        <TabsContent value={item.value} className="">
+                            <Card className="h-full">
+                                <CardHeader>
+                                    <CardTitle>{item.title}</CardTitle>
+                                    <CardDescription>
+                                        {item.description}
+                                    </CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
+                                        <CarouselContent>
+                                            {item.images.map((image, index) => (
+                                                <CarouselItem key={index}>
+                                                    <Card>
+                                                        <CardContent className="flex aspect-square items-center justify-center p-6">
+                                                            <img src={image.src} alt={image.alt} />
+                                                        </CardContent>
+                                                    </Card>
+                                                </CarouselItem>
+                                            ))}
+                                        </CarouselContent>
+                                        <div className="w-full pt-10 grid grid-cols-2 gap-4 ">
+                                            <div className="col-start-1 flex text-center justify-center w-full h-full">
+                                                <CarouselPrevious />
+                                            </div>
+                                            <div className="col-start-2 flex justify-center">
+                                                <CarouselNext />
+                                            </div>
+                                        </div>
+                                    </Carousel>
+                                </CardContent>
+                            </Card>
+                        </TabsContent>
+                    ))}
+                    <TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
+                        {data.map((item) => (
+                            <TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
+                        ))}
+                    </TabsList>
+                </div>
+            </div>
         </Tabs>
     )
 }

src/components/ThemeSelector.jsx

@@ -33,7 +33,7 @@ export function ThemeSelector() {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
+                <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-20">
                 <DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>

src/layouts/MainLayout.astro

@@ -3,7 +3,7 @@ const { title, description, lang, themeOverride } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
 import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
-import "../style/globals.css";
+//import "../style/globals.css";
 ---
 
 <!doctype html>

src/style/globals.css

@@ -1,71 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}

src/style/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 /*
 Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins 
 Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins
@@ -14,6 +15,22 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-secondary: 237deg, 100%, 93%;
         --color-accent: 262deg, 73%, 47%;
         --color-accent-red: 0deg, 84%, 60%;
+        --border: 214.3 31.8% 91.4%;
+
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
+        --input: 214.3 31.8% 91.4%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
+        --border: 214.3 31.8% 91.4%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
+        --ring: 215 20.2% 65.1%;
+        --radius: 0.5rem;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -25,6 +42,21 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
             --color-secondary: 273deg, 100%, 20%;
             --color-accent: 54deg, 100%, 50%;
             --color-accent-red: 0deg, 84%, 60%;
+
+            --background: 224 71% 4%;
+            --foreground: 213 31% 91%;
+            --input: 216 34% 17%;
+            --muted: 223 47% 11%;
+            --muted-foreground: 215.4 16.3% 56.9%;
+            --popover: 224 71% 4%;
+            --popover-foreground: 215 20.2% 65.1%;
+            --border: 216 34% 17%;
+            --card: 224 71% 4%;
+            --card-foreground: 213 31% 91%;
+            --destructive: 0 63% 31%;
+            --destructive-foreground: 210 40% 98%;
+            --ring: 216 34% 17%;
+            --radius: 0.5rem;
         }
     }
 
@@ -36,6 +68,21 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-secondary: 273deg, 100%, 20%;
         --color-accent: 54deg, 100%, 50%;
         --color-accent-red: 0deg, 84%, 60%;
+
+        --background: 224 71% 4%;
+        --foreground: 213 31% 91%;
+        --input: 216 34% 17%;
+        --muted: 0 0% 15%;
+        --muted-foreground: 215.4 16.3% 56.9%;
+        --popover: 224 71% 4%;
+        --popover-foreground: 215 20.2% 65.1%;
+        --border: 9 20% 21%;
+        --card: 0 0% 15%;
+        --card-foreground: 213 31% 91%;
+        --destructive: 0 63% 31%;
+        --destructive-foreground: 210 40% 98%;
+        --ring: 216 34% 17%;
+        --radius: 0.5rem;
     }
 
     :root[data-theme="theme_light"] {
@@ -46,5 +93,20 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-secondary: 237deg, 100%, 93%;
         --color-accent: 262deg, 73%, 47%;
         --color-accent-red: 0deg, 84%, 60%;
+
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
+        --input: 214.3 31.8% 91.4%;
+        --muted: 210 4% 85%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
+        --border: 214.3 31.8% 91.4%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
+        --ring: 215 20.2% 65.1%;
+        --radius: 0.5rem;
     }
 }