src/components/Badge.astro

@@ -1,88 +0,0 @@
----
-import foscLogo from "../assets/img/fosc-logo-old.png";
-import { Image } from "astro:assets";
-
----
-<div id="container" class="h-[30vh]">
-    <Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
-</div>
-
-<style>
-    #logo {
-  
-      /* Add border styles to create thickness */
-      border: -2px solid #ccc; /* Adjust border width for thickness */
-      border-radius: 50%; 
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
-    }
-  
-    #container {
-      perspective: 400px; /* Add perspective to the container for 3D effect */
-    }
-</style>
-  
-
-<script>
-// script.ts
-interface LogoElement extends HTMLElement {
-    rotationX: number;
-    rotationY: number;
-}
-
-const logo = document.querySelector("#logo") as LogoElement;
-const logoContainer = document.querySelector("#container") as HTMLElement;
-
-let sensitivity = 100; // Adjust the sensitivity as needed
-let mouseX = 0;
-let mouseY = 0;
-let targetRotationX = 0;
-let targetRotationY = 0;
-
-function updateLogoRotation() {
-    const { left, top, width, height } = logoContainer.getBoundingClientRect();
-    const centerX = left + width / 2;
-    const centerY = top + height / 2;
-
-    const dx = (mouseX - centerX) / sensitivity;
-    const dy = (mouseY - centerY) / sensitivity;
-
-    targetRotationX = -dy;
-    targetRotationY = dx;
-}
-
-function animateRotation() {
-    const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
-
-    const dx = targetRotationX - logo.rotationX;
-    const dy = targetRotationY - logo.rotationY;
-
-    logo.rotationX += dx * smoothingFactor;
-    logo.rotationY += dy * smoothingFactor;
-
-    logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
-
-    requestAnimationFrame(animateRotation);
-}
-
-document.addEventListener('mousemove', (e: MouseEvent) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-    updateLogoRotation();
-});
-
-document.addEventListener('mouseleave', () => {
-    mouseX = 0;
-    mouseY = 0;
-    targetRotationX = 0;
-    targetRotationY = 0;
-    updateLogoRotation();
-});
-
-// Initial rotation values
-logo.rotationX = 0;
-logo.rotationY = 0;
-
-animateRotation();
-
-
-</script>

src/components/HackerText.astro

@@ -6,7 +6,7 @@ interface Props {
 const { text } = Astro.props;
 ---
 
-<p id="text" data-value={text} class="mt-4 text-center text-7xl font-['Researcher']">{text}</p>
+<p id="text" data-value={text} class="mt-4 text-center text-white text-7xl font-['Researcher']">{text}</p>
 
 <script>
     // Code I stole

src/components/NavItem.astro

@@ -6,4 +6,10 @@ interface Props {
 
 const { href, title } = Astro.props;
 ---
-<li><a href={href}>{title}</a></li>
+<li>
+<a
+    href={href}
+    class=""
+    >{title}
+</a>
+</li>

src/components/Navbar.astro

@@ -6,7 +6,7 @@ import NavItem from "./NavItem.astro";
 import foscLogo from '../assets/img/fosc-logo-new.png'
 ---
 
-<div class="navbar bg-base-100 backdrop-blur backdrop-brightness-50 drop-shadow-lg">
+<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
     
     <div class="navbar-start">
         <!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
@@ -48,15 +48,7 @@ import foscLogo from '../assets/img/fosc-logo-new.png'
 
     
     <div class="navbar-end">
-        <select  class="select select-ghost" data-choose-theme>
+        <button class="btn btn-ghost" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS">🌚</button>
-            <option value="">Default</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-            <option value="cyberpunk">Cyberpunk</option>
-            <option value="black">Black</option>
-            <option value="retro">Retro</option>
-            <option value="synthwave">Synthwave</option>
-          </select>
     </div>
 
 

src/pages/index.astro

@@ -3,7 +3,6 @@ import "@/styles/globals.css";
 
 import Navbar from "../components/Navbar.astro";
 import HackerText from "../components/HackerText.astro";
-import Badge from "../components/Badge.astro"
 
 // Image imports
 import { Image } from "astro:assets";
@@ -49,15 +48,17 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 
         <!-- Floating center items -->
         <div class="container-sm mx-auto px-4 flex flex-col justify-center items-center">
-          <div class="mt-[10vh]">
+          <div class="mt-[10vh] h-[30vh]">
-            <Badge></Badge>
+            <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
-          </div>
-          <div class="mt-[5vh]">
-            <HackerText text="FOSC"></HackerText>
           </div>
+          <HackerText text="FOSC"></HackerText>
         </div>
 
         <div class="container mx-auto flex justify-center items-center">
+          <button class="btn" data-set-theme="" data-act-class="ACTIVECLASS">none</button>
+          <button class="btn" data-set-theme="light" data-act-class="ACTIVECLASS">light</button>
+          <button class="btn" data-set-theme="dark" data-act-class="ACTIVECLASS">dark</button>
+          <button class="btn" data-set-theme="cyberpunk" data-act-class="ACTIVECLASS">cyber</button>
 
         </div>
 
@@ -67,9 +68,9 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 </html>
 
 <style>
-  /* body {
+  body {
     background-color: black !important;
     background-image: url(../img/coreboot2.webp);
-  } */
+  }
 </style>