FUCK

package.json

@@ -12,16 +12,19 @@
   "dependencies": {
     "@astrojs/react": "^3.0.0",
     "@astrojs/tailwind": "^5.0.0",
+    "@tailwindcss/typography": "tailwindcss/typography",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "astro": "^3.0.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "daisyui": "^3.9.2",
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "theme-change": "^2.5.0"
   }
 }

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-white font-mono text-7xl">{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,9 +6,10 @@ interface Props {
 
 const { href, title } = Astro.props;
 ---
-
+<li>
 <a
     href={href}
-    class="text-primary-foreground hover:font-bold px-3 py-2 transition duration-300"
+    class=""
     >{title}
 </a>
+</li>

src/components/Navbar.astro

@@ -6,17 +6,51 @@ import NavItem from "./NavItem.astro";
 import foscLogo from '../assets/img/fosc-logo-new.png'
 ---
 
-<div class="backdrop-blur backdrop-brightness-50 drop-shadow-lg">
+<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
-    <nav class="container flex justify-between items-center h-24">
     
-        <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo"/>
+    <div class="navbar-start">
+        <!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
+        <a class="btn btn-ghost normal-case text-xl font-['Researcher']">FOSC</a>
+    </div>
 
-        <div class="flex space-x-4">
+    <div class="navbar-center">
+        <div class="hidden lg:flex">
+            <ul class="menu menu-horizontal px-1">
                 <NavItem href="/example" title="Cloud" />
                 <NavItem href="/example" title="Gallery" />
                 <NavItem href="/example" title="Downloads" />
                 <NavItem href="/example" title="Blog" />
+            </ul>
         </div>
-    </nav>
+
+        <div class="hidden sm:flex">
+            <div class="dropdown">
+                <label tabindex="0" class="btn btn-ghost lg:hidden">
+                    ⥐
+                </label>
+                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+                  <li><a>Item 1</a></li>
+                  <li>
+                    <a>Parent</a>
+                    <ul class="p-2">
+                      <li><a>Submenu 1</a></li>
+                      <li><a>Submenu 2</a></li>
+                    </ul>
+                  </li>
+                  <li><a>Item 3</a></li>
+                </ul>
+              </div>
+        </div>
+
+    </div>
+
+
+
+    
+    <div class="navbar-end">
+        <button class="btn btn-ghost" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS">🌚</button>
+    </div>
+
+
     
 </div>

src/layouts/example.astro

@@ -15,6 +15,27 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+
+
+    <!-- Theme manager -->
+    <script is:inline>
+      // ☝️ This script prevent the FART effect.
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      // "theme" LocalStorage value is set by the package to remember user preference.
+      // The value is checked and applyed before rendering anything.
+    </script>
+    <script>
+      import { themeChange } from 'theme-change';
+      themeChange();
+      // 👆 you could import the CDN directly instead of these two lines
+    </script>
+
   </head>
 
   <body>

src/pages/index.astro

@@ -1,10 +1,11 @@
 ---
 import "@/styles/globals.css";
-import { Image } from "astro:assets";
 
 import Navbar from "../components/Navbar.astro";
 import HackerText from "../components/HackerText.astro";
 
+// Image imports
+import { Image } from "astro:assets";
 import foscLogo from "../assets/img/fosc-logo-old.png";
 ---
 
@@ -20,7 +21,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 
   <body class="bg-fixed bg-cover bg-center bg-repeat-y">
 
-    <!-- Vertical screen space is initially shared by navbar and splash content, furhter content can be obtained by scrolling -->
+    <!-- Vertical screen space is initially shared by navbar and splash content, further content can be obtained by scrolling -->
     <div class="flex flex-col h-screen">
       <Navbar />
 

src/styles/globals.css

@@ -2,64 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-
+@font-face {
-
+    font-family: 'Researcher';
-@layer base {
+    src: url('/fonts/Researcher.otf') format('opentype');
-  :root {
+    font-weight: normal;
-    --background: 0 0% 100%;
+    font-style: normal;
-    --foreground: 224 71.4% 4.1%;
+    font-display: swap;
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 262.1 83.3% 57.8%;
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 263.4 70% 50.4%;
-  }
 }
-
-
-
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-

tailwind.config.cjs

@@ -1,76 +1,18 @@
-/** @type {import('tailwindcss').Config} */
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
-  darkMode: ["class"],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  plugins: [require("daisyui")],
-  theme: {
+  daisyui: {
-    container: {
+    themes: [
-      center: true,
+      "light",
-      padding: "2rem",
+      "dark",
-      screens: {
+      "black",
-        "2xl": "1400px",
+      "cupcake",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+    ],
   },
-    },
+};
-    extend: {
-      fontFamily: {
-        mono: ["Researcher", ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-}