graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final toggle style

Browse Source
This commit is contained in:
Graham Hall
2025-11-06 10:45:29 -05:00
parent e802d6238e
commit 8818ee6497
8 changed files with 40 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.astro/content-assets.mjs
+2 -2
View File
@@ -1,10 +1,10 @@
import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
src/assets/svg/moon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4c4f69" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

src/assets/svg/paintbrush.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 562 B

src/assets/svg/sun.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#cdd6f4" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

src/components/Header/Header.astro
+2 -2
View File
@@ -1,7 +1,7 @@
---
import Drawer from "./Drawer.astro";
import Nav from "./Nav.astro";
import ThemeMenu from "./ThemeMenu.astro";
import ThemeToggle from "./ThemeToggle.astro";
---
<header>
@@ -9,7 +9,7 @@ import ThemeMenu from "./ThemeMenu.astro";
<a href="/">ghall.space</a>
<div>
<Nav />
<ThemeMenu />
<ThemeToggle />
<Drawer />
</div>
</div>
src/components/Header/ThemeMenu.astro
-90
View File
@@ -1,90 +0,0 @@
---
import BrushIcon from "../../assets/svg/paintbrush.svg";
---
<div
class="container"
x-data="{ menuOpen: false }"
@keydown.escape="menuOpen = false"
>
<button id="theme-button" type="button" @click="menuOpen = ! menuOpen"
><BrushIcon width={24} height={24} /></button
>
<div class="overlay" @click="menuOpen = !menuOpen" x-show="menuOpen"></div>
<div
class="theme-menu"
x-show="menuOpen"
x-transition:enter-start="hidden-menu"
x-transition:enter-end="visible-menu"
x-transition:leave-start="visible-menu"
x-transition:leave-end="hidden-menu"
>
<legend>Select a theme:</legend>
<div>
<input
type="radio"
id="system"
name="theme"
value="system"
x-model="theme"
/>
<label for="system">System</label>
<input
type="radio"
id="light"
name="theme"
value="light"
x-model="theme"
/>
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="dark" x-model="theme" />
<label for="dark">Dark</label>
</div>
</div>
</div>
<style>
.container {
display: inline;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
.theme-menu {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--background);
padding: 20px;
width: 300px;
z-index: 4;
border: var(--border);
transition: var(--transition);
}
.hidden-menu {
opacity: 0;
scale: 0.9;
}
#theme-button {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--text);
}
#theme-button:hover {
opacity: 0.75;
}
</style>
src/components/Header/ThemeToggle.astro
+28
View File
@@ -0,0 +1,28 @@
---
import BrushIcon from "../../assets/svg/paintbrush.svg";
---
<input type="checkbox" x-model="darkMode" />
<style>
input {
appearance: none;
height: 24px;
width: 24px;
background-image: url(../../assets/svg/moon.svg);
background-size: 24px;
padding: 10px;
border-radius: 100%;
transition: var(--transition);
transform: rotate(0deg) translateY(-2px);
}
input:hover {
opacity: 0.7;
}
input:checked {
background-image: url(../../assets/svg/sun.svg);
transform: rotate(180deg) translateY(2px);
}
</style>
src/layouts/Layout.astro
+2 -9
View File
@@ -37,16 +37,9 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
class="layout-simple"
x-data="{
drawerOpen: false,
theme: $persist('system'),
isDark() {
const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true;
return false;
}
darkMode: $persist(false)
}"
:class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}"
:class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode}"
>
<Header />
<main transition:animate="initial">