updated colorscheme and added dark mode

astro.config.mjs

@@ -1,8 +1,9 @@
 import { defineConfig } from 'astro/config';
-
 import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind(
+        {  applyBaseStyles: false }
+    )]
 });

package-lock.json

@@ -6099,9 +6099,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.5",
+      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-      "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==",
+      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",

src/components/DarkModeSwitch.astro

@@ -0,0 +1,38 @@
+---
+const {} = Astro.props;
+---
+<script>
+var theme:string;
+
+if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    theme = "dark"
+    localStorage.setItem("theme",theme);
+} else {
+    theme = "light"
+    localStorage.setItem("theme",theme);
+}
+
+const handleClick = () => {
+    theme == localStorage.getItem("theme")
+    if( theme === "dark") {
+        theme = "light"
+    } else {
+        theme = "dark"
+    }
+    localStorage.setItem("theme",theme)
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+};
+
+const button = document.getElementById("toggle")
+button.onclick = handleClick;
+
+</script>
+<button id="toggle">
+    <svg class="stroke-neutral-900 dark:stroke-neutral-300" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16.6799 12.3841L12.4609 17.4469C12.2211 17.7347 11.7789 17.7347 11.5391 17.4469L7.32009 12.3841C7.13467 12.1616 7.13467 11.8384 7.32009 11.6159L11.5391 6.55312C11.7789 6.26527 12.2211 6.26527 12.4609 6.55312L16.6799 11.6159C16.8653 11.8384 16.8653 12.1616 16.6799 12.3841Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22V20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 4V2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 12H2"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12H20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+</button>
+
+

src/components/EventElement.astro

@@ -8,11 +8,11 @@ interface Props {
 }
 const {name, time,location,description,past} = Astro.props;
 
-var border_class = "border-y-4 p-2 border-accent-400";
+var border_class = "border-y-4 p-2 border-accent-400 dark:border-accent-500";
-var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400";
+var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400 dark:decoration-primary-500";
 if (past) {
-    border_class = "border-y-4 p-2 border-primary-300";
+    border_class = "border-y-4 p-2 border-primary-300 dark:border-primary-600";
-    info_class = "underline underline-offset-4 decoration-4 decoration-accent-300";
+    info_class = "underline underline-offset-4 decoration-4 decoration-accent-300 dark:decoration-accent-600";
 }
 ---
 
@@ -30,8 +30,8 @@ if (past) {
             </p>
         </div>
     </div>
-    <p class="font-normal text-neutral-800 p-2">
+    <div   class="text-neutral-800 dark:text-neutral-100 font-normal">
-        {description}
+        <Fragment set:html={description} />
-    <p>
+    </div>
 </div>
 

src/components/MinutesElement.astro

@@ -6,8 +6,8 @@ interface Props {
 }
 const {name, date, meeting_link} = Astro.props;
 
-var border_class = "hover:bg-neutral-300 border-y-4 p-2 border-accent-400";
+var border_class = "hover:bg-neutral-300 dark:hover:bg-neutral-800 border-y-4 p-2 border-accent-400 dark:border-accent-500";
-var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400";
+var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400 dark:decoration-primary-500";
 ---
 
 <div class={border_class}>

src/components/Navbar.astro

@@ -1,5 +1,6 @@
 ---
 import NavbarLink from './NavbarLink.astro';
+import  DarkModeSwitch from './DarkModeSwitch.astro'
 interface Props {
 current_page: string   
 }
@@ -8,6 +9,7 @@ const {current_page} = Astro.props;
 
 <div class=" top-0 inset-x-0 p-8 flex flex-wrap justify-center justify-items-center">
     <div>
+        <DarkModeSwitch/>
     </div>
     <!-- <h1 class=" content-desktop font-bold text-xl mx-4 justify-center ">CUBCAPS logo</h1>-->
     <div class="inline-flex inset-x-0 flex-wrap grow justify-center "> 
@@ -16,16 +18,18 @@ const {current_page} = Astro.props;
         <NavbarLink current_page={current_page == "Events"} text="Events" link="/events"/>
         <NavbarLink current_page={current_page == "Photos"} text="Photos" link="/photos"/>
         <NavbarLink current_page={current_page == "Meeting Minutes"} text="Meeting Minutes" link="/minutes"/>
-        <NavbarLink current_page={current_page == "Contact"} text="Contact" link="/contacts"/>
+        <NavbarLink current_page={current_page == "Contact"} text="Contact" link="/contact"/>
         <NavbarLink text="Links" link="https://linktr.ee/cubcaps"/>
     </div>
     <div 
         class="content-desktop inline-flex space-x-6">
-        <a href="discord">
+        <!--
+<a href="discord">
             <svg class="" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M5.5 16C10.5 18.5 13.5 18.5 18.5 16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 17.5L16.5 19.5C16.5 19.5 20.6713 18.1717 22 16C22 15 22.5301 7.85339 19 5.5C17.5 4.5 15 4 15 4L14 6H12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.52832 17.5L7.52832 19.5C7.52832 19.5 3.35699 18.1717 2.02832 16C2.02832 15 1.49823 7.85339 5.02832 5.5C6.52832 4.5 9.02832 4 9.02832 4L10.0283 6H12.0283" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.5 14C7.67157 14 7 13.1046 7 12C7 10.8954 7.67157 10 8.5 10C9.32843 10 10 10.8954 10 12C10 13.1046 9.32843 14 8.5 14Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 14C14.6716 14 14 13.1046 14 12C14 10.8954 14.6716 10 15.5 10C16.3284 10 17 10.8954 17 12C17 13.1046 16.3284 14 15.5 14Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-        </a>
+</a>
-        <a href="instagram">
+-->
-        <svg class="" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 16V8C3 5.23858 5.23858 3 8 3H16C18.7614 3 21 5.23858 21 8V16C21 18.7614 18.7614 21 16 21H8C5.23858 21 3 18.7614 3 16Z" stroke="#000000" stroke-width="1.5"></path><path d="M17.5 6.51L17.51 6.49889" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        <a aria-label="Instagram Link" href="https://www.instagram.com/cubcaps/">
+        <svg class="stroke-neutral-900 dark:stroke-neutral-300" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 16V8C3 5.23858 5.23858 3 8 3H16C18.7614 3 21 5.23858 21 8V16C21 18.7614 18.7614 21 16 21H8C5.23858 21 3 18.7614 3 16Z"  stroke-width="1.5"></path><path d="M17.5 6.51L17.51 6.49889" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
         </a>
     </div>
 </div>

src/components/NavbarLink.astro

@@ -5,9 +5,9 @@ interface Props {
     current_page?: boolean;
 }
 const { current_page, text, link} = Astro.props;
-var underline_class = "block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent-500"
+var underline_class = "block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent-500 dark:bg-accent-400"
 if (current_page) {
-    underline_class = "block max-w-full transition-all duration-500 h-0.5 bg-primary-600"
+    underline_class = "block max-w-full transition-all duration-500 h-0.5 bg-primary-600 dark:bg-primary-400"
 }
 ---
 

src/events/GA.md

@@ -1,8 +1,14 @@
 ---
 title: General Assembly
-date: September 2024
+date: 4th of October 2024
 past: false
-location: idk
+location: TBA
 ---
 
-For the love of all the gods please show up
+First General Assembly of the 2024-2025 year, new executive positions will be voted on, and plans for the followings year's events will be discussed.
+
+
+<br >
+
+## **Free pizza will be provided**
+

src/events/endyear_party.md

@@ -1,9 +1,8 @@
 ---
 title: End of the Year party
-date: May 4th 2024
+date: 4th of May 2024
 past: true
 location: Hive
 ---
 
-You should have been there
+Thank you everyone for being there! We have all enjoyed this year with you and are looking forward to the next.
-

src/layouts/defaultLayout.astro

@@ -0,0 +1,46 @@
+---
+import '../styles/tailwind.css';
+interface Props {
+    title: string;
+    curr_navpage: string;
+}
+import Navbar from "../components/Navbar.astro"
+const {title,curr_navpage} = Astro.props
+---
+
+
+<script is:inline>
+const theme = (() => {
+if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+return localStorage.getItem("theme");
+}
+if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+return "dark";
+}
+return "light";
+})();
+
+if (theme === "light") {
+document.documentElement.classList.remove("dark");
+} else {
+document.documentElement.classList.add("dark");
+}
+window.localStorage.setItem("theme", theme);
+</script>
+
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/png" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+	</head>
+    <body class="bg-neutral-300 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-200">
+        <Navbar current_page={curr_navpage}/>
+        <slot />
+
+	</body>
+        <slot name="after-body" />
+</html>

src/meetings/exec_meet_2.md

@@ -8,3 +8,5 @@ date: October 2024
 
 ## waa
 
+
+[ok](what_about_links)

src/pages/about.astro

@@ -1,35 +1,21 @@
 ---
-import Navbar from "../components/Navbar.astro"
+import DefaultLayout from "../layouts/defaultLayout.astro"
 ---
-
+<DefaultLayout title="About CUBCAPS" curr_navpage="About">
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="About"/>
-        <!-- <div class="my-20 flex justify-center">
-            	<h2 class="text-6xl">CUBCAPS (this should be a better logo)</h2>
-</div> -->
 
     <div class=" py-20 justify-center align-middle md:mx-40 mx-12 text-lg font-semibold">
-            <p class="text-center"> 
+        <h1 class="text-center">
-
+            Hello Everyone!
-                explanation who we are
+        </h1>
+        <br>
+        <p class="py-4 ">
+            We are CUBCAPS,<br> <br><b>C</b>oncordia<br> <b>U</b>ndergraduate <br><b>B</b>iochemistry, <br>
+            <b>C</b>hemistry,<br> <b>A</b>nd <br><b>P</b>hysics<br> <b>S</b>ociety,<br> a member association for students of these departments under ASFA.
         </p>
-            </br>
         <p>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum.
+            We run an array of <a class="decoration-accent-500 max-w-full underline-4 underline underline-offset-4 decoration-2" href="/events">Events</a> thorughout the year.
-
+            With some being social, like tabletop game or movie nights, but also research symposiums, 2 conferences one in the Fall and another in the Winter semester.
-Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis.
-
-Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus.
-
         </p>
+
     </div>
-	</body>
+</DefaultLayout>
-</html>

src/pages/contact.astro

@@ -0,0 +1,25 @@
+---
+import DefaultLayout from "../layouts/defaultLayout.astro"
+---
+
+<DefaultLayout title="Cubcaps" curr_navpage="Contact" >
+
+
+
+    <div class="font-normal py-20 justify-center align-middle mx-12 md:mx-40 text-lg">
+            <h1 class="helv text-3xl text-left">     
+                Our Contact information:
+            </h1>
+
+    <p class="py-10">
+        Or if you would like, sign up for our mailing list
+    <div class=" flex justify-center py-12">
+        <a href="https://listmonk.cubcaps.org/subscription/form" target="_blank" class="text-xl text-neutral-100 bg-accent-500 hover:bg-primary-500 rounded-xl px-12 py-6 shrink">
+            Subscribe
+        </a>
+
+    </div>
+    </div>
+
+</DefaultLayout>
+

src/pages/events.astro

@@ -1,20 +1,10 @@
 ---
 import EventElement from "../components/EventElement.astro"
-import Navbar from "../components/Navbar.astro"
+import DefaultLayout from "../layouts/defaultLayout.astro";
-
 const events = await Astro.glob('../events/*.md');
 ---
 
-<html lang="en">
+<DefaultLayout title="CUBCAPS Events" curr_navpage="Events" >
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="Events"/>
 
         <div class=" py-20 justify-center align-middle mx-12 md:mx-40 text-lg font-semibold">
 
@@ -30,12 +20,12 @@ events.filter((event) => !event.frontmatter.past).map((event) =>
     name={event.frontmatter.title} 
     time={event.frontmatter.date} 
     location={event.frontmatter.location} 
-    description={event.rawContent()} 
+    description={event.compiledContent()} 
-    past={event.frontmatter.past}/></br>
+    past={event.frontmatter.past}/><br>
 )
 }
 
-            </br></br>
+            <br><br>
             <h1 class="helv text-3xl text-left"> 
                 
                 Past Events:
@@ -48,10 +38,12 @@ events.filter((event) => !event.frontmatter.past).map((event) =>
     name={event.frontmatter.title} 
     time={event.frontmatter.date} 
     location={event.frontmatter.location} 
-    description={event.rawContent()} 
+    description={event.compiledContent()} 
-    past={event.frontmatter.past}/></br>
+    past={event.frontmatter.past}/><br/>
 )}
 
         </div>
-	</body>
+
-</html>
+
+</DefaultLayout>
+

src/pages/index.astro

@@ -1,17 +1,11 @@
 ---
-import Navbar from "../components/Navbar.astro"
+import DefaultLayout from "../layouts/defaultLayout.astro"
 ---
 
-<html lang="en">
+<DefaultLayout title="Cubcaps" curr_navpage="Home" >
-	<head>
+
-		<meta charset="utf-8" />
+
-		<link rel="icon" type="image/png" href="/favicon.png" />
+
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="Home"/>
     <div class="my-20 flex justify-center">
         <h2 class="text-6xl">CUBCAPS (this should be a better logo)</h2>
     </div>
@@ -29,5 +23,6 @@ import Navbar from "../components/Navbar.astro"
             not sure yet
         </p>
     </div>
-	</body>
+
-</html>
+</DefaultLayout>
+

src/pages/meetings/[meeting_param].astro

@@ -1,5 +1,6 @@
 ---
 import Navbar from '../../components/Navbar.astro';
+import DefaultLayout from '../../layouts/defaultLayout.astro';
 
 export async function getStaticPaths() {
 
@@ -20,20 +21,11 @@ export async function getStaticPaths() {
 const { meeting_param } = Astro.params;
 const { meeting } = Astro.props;
 ---
-<html lang="en">
+<DefaultLayout title="CUBCAPS meeting notes" curr_navpage="Meeting Minutes">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="Meeting Minutes"/>
 
         <div class="font-normal py-20 justify-center align-middle mx-12 md:mx-40 text-lg">
 
-        <div class="py-12 font-normal">
+        <div class="my-6 py-6 font-normal border-b-4 p-2 border-primary-400">
             <h1 class="helv text-3xl text-left">     
                 {meeting.frontmatter.name} 
             </h1>
@@ -41,7 +33,8 @@ const { meeting } = Astro.props;
                 {meeting.frontmatter.date} 
             </h1>
         </div>
+        <br>
             <Fragment set:html={meeting.compiledContent()}/>
         </div>
-	</body>
+
-</html>
+</DefaultLayout>

src/pages/minutes.astro

@@ -1,20 +1,10 @@
 ---
-import Navbar from "../components/Navbar.astro"
+import DefaultLayout from "../layouts/defaultLayout.astro";
 import MinutesElement from "../components/MinutesElement.astro"
 
 const meetings = await Astro.glob('../meetings/*.md');
 ---
-
+<DefaultLayout title="CUBCAPS Meeting Minutes Archive" curr_navpage="Meeting Minutes">
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="Meeting Minutes"/>
 
     <div class=" py-20 justify-center align-middle mx-12 md:mx-40 text-lg font-semibold">
 
@@ -26,14 +16,15 @@ const meetings = await Astro.glob('../meetings/*.md');
 
 
         {
-meetings.reverse().map((meeting) => (
+        meetings.reverse().map((meeting) => (
-            <MinutesElement name={meeting.frontmatter.name} date={meeting.frontmatter.date} meeting_link={meeting.file.split("/meetings/")[1].split(".")[0]} /><br>
+        <MinutesElement 
+            name={meeting.frontmatter.name} 
+            date={meeting.frontmatter.date} 
+            meeting_link={meeting.file.split("/meetings/")[1].split(".")[0]} />
+        <br>
         ))
         }
 
-            <!--            <MinutesElement name="what" date="what" meeting_link="/"/>-->
-
 
     </div>
-	</body>
+</DefaultLayout>
-</html>

src/pages/photos.astro

@@ -1,35 +1,21 @@
 ---
-import Navbar from "../components/Navbar.astro"
+import DefaultLayout from "../layouts/defaultLayout.astro"
 ---
-
+<DefaultLayout title="CUBCAPS Photos" curr_navpage="Photos">
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>CUBCAPS</title>
-	</head>
-    <body class="bg-neutral-200">
-        <Navbar current_page="Photos"/>
-        <div class="my-20 flex justify-center">
-		<h2 class="text-6xl">CUBCAPS (this should be a better logo)</h2>
-        </div>
 
     <div class=" py-20 justify-center align-middle md:mx-40 mx-12 text-lg font-semibold">
         <p class="text-center"> 
 
-                Some landing page i still not sure about what it should be.
+            explanation who we are
         </p>
         </br>
         <p>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum.
 
-Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis.
+            Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis.
 
-Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus.
+            Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus.
 
         </p>
     </div>
-	</body>
+</DefaultLayout>
-</html>

src/styles/tailwind.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    p {
+        @apply font-normal
+    }
+  h1 {
+    @apply text-4xl;
+  }
+  h2 {
+    @apply text-2xl;
+  }
+    h3 {
+        @apply text-xl
+    }
+
+    ol,ul {
+        @apply list-decimal;
+    }
+}

tailwind.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: 'class',
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
         extend: {