thomascole/Personal-Site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/misc/BlogProjectCard.astro
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}>
<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>

39
src/components/misc/ThemeToggle.astro
View File

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

8
src/components/nav/Nav.astro
View File

@ -5,7 +5,6 @@
import Divider from "../misc/Divider.astro";
import SocialLinks from "./SocialLinks.astro";
import ThemeToggle from "../misc/ThemeToggle.astro";
const { pageName } = Astro.props;
let displayedName = "";
@ -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

5
src/components/nav/SocialLinks.astro
View File

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

2
src/layouts/BlogLayout.astro
View File

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

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>