Tweaks to theme toggle and addition of contact page.

src/components/misc/BlogProjectCard.astro

@@ -10,10 +10,10 @@ const { title, subtitle, image, link } = Astro.props;
 ---
 
 
-<div class="rounded-lg transition ease-in-out hover:scale-105">
+<div class="rounded-lg ">
     <a href={link}>
         <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
-            <img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
+            <img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="" loading="lazy">
             <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
                 <p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
                 <p>{subtitle}</p>

src/components/misc/ThemeToggle.astro

@@ -1,25 +1,5 @@
 <!-- Could be remade as svelte component. 
 For the 3 lines of javascript needed I think its okay to use a script tag -->
-
-<style>
-    #themetoggle~.dot {
-        background-color: #e2e2e2;
-    }
-
-    #themetoggle:checked~.dot {
-        transform: translateX(100%);
-        background-color: #202020;
-    }
-
-    #themetoggle~.capsule {
-        background-color: #181a2a;
-    }
-
-    #themetoggle:checked~.capsule {
-        background-color: #cecece;
-    }
-</style>
-
 <script>
     let theme = localStorage.getItem("theme");
     if (theme == "business") {
@@ -27,18 +7,13 @@ For the 3 lines of javascript needed I think its okay to use a script tag -->
     }
 </script>
 
-<div class="flex items-center justify-center w-full">
-    <span class="material-symbols-outlined mx-2">
+<label class="swap swap-rotate transition ease-in-out hover:scale-125">
+    <!-- this hidden checkbox controls the state -->
+    <input id="themetoggle" type="checkbox" data-toggle-theme="business,corporate" />
+    <span class="swap-off material-symbols-outlined mx-2">
         light_mode
     </span>
-    <label for="themetoggle" class="flex items-center cursor-pointer">
-        <div class="relative">
-            <input type="checkbox" id="themetoggle" class="sr-only" data-toggle-theme="business,corporate">
-            <div class="capsule block w-14 h-8 rounded-full"></div>
-            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
-        </div>
-    </label>
-    <span class="material-symbols-outlined mx-2">
-        nightlight
+    <span class="swap-on material-symbols-outlined mx-2">
+        dark_mode
     </span>
-</div>
+</label>

src/components/nav/Nav.astro

@@ -5,12 +5,11 @@
 
     import Divider from "../misc/Divider.astro";
     import SocialLinks from "./SocialLinks.astro";
-    import ThemeToggle from "../misc/ThemeToggle.astro";
 
     const { pageName } = Astro.props;
     let displayedName = "";
-    if(pageName){
-        displayedName = pageName.replace("|","").trim();
+    if (pageName) {
+        displayedName = pageName.replace("|", "").trim();
     }
 ---
 
@@ -55,8 +54,7 @@
             </a>
         </li>
         <li class="flex">
-            <a href="mailto:thomas.patrick.cole@gmail.com"
-                class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/contact" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                 <button class="p-2">Contact</button>
             </a>
         </li>
@@ -64,11 +62,9 @@
 
     <Divider />
     <div class="grow"></div>
-    <ThemeToggle />
 </div>
 
-<div
-    class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100">
+<div class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100">
     <button id="menubtn" class="w-12 h-12">
         <span class="material-symbols-outlined mt-1">
             menu
@@ -77,7 +73,7 @@
     <p class="my-auto mx-auto -translate-x-1/2 font-semibold text-xl">{displayedName}</p>
 </div>
 
-<div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50"/>
+<div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50" />
 
 <script is:inline>
     const btn = document.getElementById("menubtn");
@@ -93,7 +89,7 @@
     closebtn.addEventListener('click', closeMenu);
     draweroverlay.addEventListener('click', closeMenu);
 
-    function closeMenu(){
+    function closeMenu() {
         menu.dataset.shown = "false";
         draweroverlay.classList.add("hidden");
     }

src/components/nav/SocialLinks.astro

@@ -1,3 +1,7 @@
+---
+import ThemeToggle from "../misc/ThemeToggle.astro";
+---
+
 <div class="flex place-content-center mt-4">
     <a class="mx-2" href="https://git.thomaspcole.com/thomascole">
         <svg class="inline-block w-7 h-7 transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -34,4 +38,5 @@
             </g>
         </svg>
     </a>
+    <ThemeToggle/>
 </div>

src/layouts/BlogLayout.astro

@@ -9,7 +9,7 @@ const { frontmatter } = Astro.props;
     <main
         class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
         <div class="relative mb-4">
-            <img class="aspect-video object-cover" src={frontmatter.image} alt=""/>
+            <img class="aspect-video object-cover" src={frontmatter.image} alt="" loading="lazy"/>
             <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
                 <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
             </a>

src/pages/contact.astro

@@ -0,0 +1,17 @@
+---
+    import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title={" | Contact"}>
+    <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-5/6 mx-auto">
+        <div class="w-full lg:w-1/2 text-center">
+            <p>Picture here</p>
+        </div>
+        <div class="w-full lg:w-1/2 text-center flex flex-col gap-4">
+            <input type="text" placeholder="Name" class="input input-bordered w-full" />
+            <input type="text" placeholder="Email" class="input input-bordered w-full" />
+            <textarea class="textarea textarea-bordered w-full" placeholder="Message" style="resize:none"></textarea>
+            <button class="btn w-full">Submit</button>
+        </div>
+    </div>
+</Layout>