Tweaks to theme toggle and addition of contact page.
All checks were successful
Build Site / Build-Site (18.x) (push) Successful in 50s

This commit is contained in:
Thomas Cole 2023-07-18 15:17:24 -04:00
parent b76100ad06
commit 664fe17610
6 changed files with 40 additions and 47 deletions

View File

@ -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}> <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"> <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"> <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 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> <p>{subtitle}</p>

View File

@ -1,25 +1,5 @@
<!-- Could be remade as svelte component. <!-- Could be remade as svelte component.
For the 3 lines of javascript needed I think its okay to use a script tag --> 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> <script>
let theme = localStorage.getItem("theme"); let theme = localStorage.getItem("theme");
if (theme == "business") { if (theme == "business") {
@ -27,18 +7,13 @@ For the 3 lines of javascript needed I think its okay to use a script tag -->
} }
</script> </script>
<div class="flex items-center justify-center w-full"> <label class="swap swap-rotate transition ease-in-out hover:scale-125">
<span class="material-symbols-outlined mx-2"> <!-- 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 light_mode
</span> </span>
<label for="themetoggle" class="flex items-center cursor-pointer"> <span class="swap-on material-symbols-outlined mx-2">
<div class="relative"> dark_mode
<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> </span>
</div> </label>

View File

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

View File

@ -1,3 +1,7 @@
---
import ThemeToggle from "../misc/ThemeToggle.astro";
---
<div class="flex place-content-center mt-4"> <div class="flex place-content-center mt-4">
<a class="mx-2" href="https://git.thomaspcole.com/thomascole"> <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" <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> </g>
</svg> </svg>
</a> </a>
<ThemeToggle/>
</div> </div>

View File

@ -9,7 +9,7 @@ const { frontmatter } = Astro.props;
<main <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"> 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"> <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]"> <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span> <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a> </a>

17
src/pages/contact.astro Normal file
View File

@ -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>