testing

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+    "name": "ieeeucsd",
     "type": "module",
     "version": "0.0.1",
     "scripts": {

src/components/global/Navbar.astro

@@ -1,41 +1,74 @@
----
-import logo_with_text from '';
----
-
 <style>
     .grid-cols-custom {
-      grid-template-columns: 1fr auto 1fr; /* This makes the side columns take up equal space, regardless of content, while the center column takes the width of the content */
+        grid-template-columns: 1fr auto 1fr;
     }
-  </style>
+    .nav-background {
+        position: relative;
+        z-index: 1;
+        background-image: url("/backgrounds/fa21qp.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center 45%;
+    }
+    .nav-background::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0; /* Cover the parent */
+        background-color: rgba(
+            0,
+            51,
+            102,
+            0.9
+        ); /* This is a guess of the ieee-blue color with 50% opacity, adjust as necessary */
+        z-index: -1;
+    }
+</style>
 
-<nav class="mt-2">
+<nav class="nav-background flex-inline max-w-80 mx-auto">
-    <div class="hidden xl:grid grid-flow-col auto-cols-max justify-center items-center gap-4 h-32 grid-cols-custom">
+    <div
-        <div class="flex justify-center space-x-12 sm:space-x-14 md:space-x-16 lg:space-x-18">
+        class="hidden xl:grid grid-flow-col auto-cols-max justify-center items-center gap-4 h-32 grid-cols-custom text-white"
+    >
+        <div
+            class="flex justify-center space-x-12 sm:space-x-14 md:space-x-16 lg:space-x-18"
+        >
             <!-- Left content here -->
-            <a href="/" class="text-2xl hover:scale-110 transition text-ieee-blue font-bold">Home</a>
+            <a href="/" class="text-2xl hover:scale-110 transition font-bold"
-            <a href="/" class="text-2xl text-ieee-blue font-bold">About Us</a>
+                >Home</a
-            <a href="/" class="text-2xl text-ieee-blue font-bold">Project Space</a>
+            >
+            <a href="/" class="text-2xl font-bold">About Us</a>
+            <a href="/" class="text-2xl font-bold">Project Space</a>
             <!-- You can add more items here, and they will be centered -->
         </div>
 
         <!-- Centered image -->
         <div class="flex justify-center">
-            <img src="/icons/logo_with_text.svg" alt="description of image" class="h-24" />
+            <img
+                src="/icons/logo_with_text.svg"
+                alt="description of image"
+                class="h-24"
+            />
         </div>
 
-        <div class="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12">
+        <div
+            class="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12"
+        >
             <!-- Right content here -->
-            <a href="/" class="text-2xl text-ieee-blue font-bold">Events</a>
+            <a href="/" class="text-2xl font-bold">Events</a>
-            <a href="/" class="text-2xl text-ieee-blue font-bold">Projects</a>
+            <a href="/" class="text-2xl font-bold">Projects</a>
-            <a href="/" class="text-2xl text-ieee-blue font-bold">Contact Us</a>
+            <a href="/" class="text-2xl font-bold">Contact Us</a>
             <!-- You can add more items here, and they will be centered -->
         </div>
     </div>
-    <div class="grid xl:hidden items-center h-32" >
+    <div class="grid xl:hidden items-center h-32">
-        <div class="flex justify-left">
+        <div class="flex justify-left content-center">
-            <img src="/icons/logo_with_full_text.svg" alt="description of image" class="h-24 scale-50" />
+            <img
+                src="/icons/logo_with_full_text.svg"
+                alt="description of image"
+                class="h-24 scale-50"
+            />
         </div>
     </div>
 </nav>
-
-  

src/pages/index.astro

@@ -3,4 +3,13 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 ---
 
-<Layout title="Home" />
+<Layout title="Home">
+    <iframe
+        src="https://discord.com/widget?id=1041800035370811545&theme=dark"
+        width="350"
+        height="500"
+        allowtransparency="true"
+        frameborder="0"
+        sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+    ></iframe>
+</Layout>

tailwind.config.mjs

@@ -2,10 +2,11 @@
 module.exports = {
     darkMode: ["class"],
     content: [
-    './pages/**/*.{ts,tsx}',
+        "./pages/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
+        "./components/**/*.{ts,tsx}",
-    './app/**/*.{ts,tsx}',
+        "./app/**/*.{ts,tsx}",
-    './src/**/*.{ts,tsx}',
+        "./src/**/*.{ts,tsx}",
+        "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
     ],
     theme: {
         container: {
@@ -50,6 +51,9 @@ module.exports = {
                     DEFAULT: "hsl(var(--card))",
                     foreground: "hsl(var(--card-foreground))",
                 },
+                ieee: {
+                    blue: "#00629B",
+                },
             },
             borderRadius: {
                 lg: "var(--radius)",
@@ -72,5 +76,15 @@ module.exports = {
             },
         },
     },
-  plugins: [require("tailwindcss-animate")],
+    plugins: [require("daisyui"), require("tailwindcss-animate")],
-}
+    daisyui: {
+        themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+        darkTheme: "light", // name of one of the included themes for dark mode
+        base: true, // applies background color and foreground color for root element by default
+        styled: true, // include daisyUI colors and design decisions for all components
+        utils: true, // adds responsive and modifier utility classes
+        rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
+        prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    },
+};