jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

settle on a dark theme and implement with override

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-08 10:55:41 -04:00
parent 0f5dadbf6f
commit 0070ed1c19
3 changed files with 98 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/layouts/BaseLayout.astro
View File

@@ -1,55 +1,71 @@
---
import '@styles/main.css';
import ThemeSwitcher from '@components/ThemeSwitcher.astro';
import '@fontsource-variable/baskervville';
import '@fontsource-variable/baskervville-sc';
---
<style>
header {
background-color: var(--primary-color-faded);
border-bottom: var(--header-border-width) solid var(--header-border-color);
}
nav {
max-width: 30rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
& a {
flex: 1;
max-width: 8rem;
padding: 0.25rem 1rem;
font-size: 1.75rem;
color: white;
text-decoration: none;
text-align: center;
&:hover {
background: var(--nav-hover);
color: var(--nav-hover-color);
}
}
}
</style>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- avoid FOUC by setting the color schme here in the header -->
<script>
const pref = localStorage.getItem('theme-preference');
if (pref) {
document.documentElement.dataset.theme = pref;
}
</script>
{/* Note: The styles are inside the document here because otherwise it breaks Astro's parsing */}
<style>
header {
background-color: var(--primary-color-faded);
padding: 0.5rem var(--content-padding);
}
nav {
max-width: var(--content-width);
margin: 0 auto;
display: flex;
gap: 1.5rem;
align-items: baseline;
& a {
font-family: 'Baskervville Variable';
font-weight: 600;
font-size: 1.3rem;
color: var(--nav-link-color);
text-decoration: underline;
text-underline-offset: 0.5rem;
/*border-bottom: 2px solid transparent;*/
text-decoration-color: transparent;
transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
&.home {
font-family: 'Baskervville SC Variable';
font-size: 2rem;
margin-right: auto;
}
&:hover, &:active {
text-decoration-color: var(--accent-color);
/*border-bottom-color: var(--accent-color);*/
}
}
}
</style>
</head>
<body>
<header>
<nav>
<a href="/" data-astro-prefetch>Home</a>
<a href="/" class="home" data-astro-prefetch>Joe's Blog</a>
<a href="/posts" data-astro-prefetch>Posts</a>
<a href="/about" data-astro-prefetch>About</a>
</nav>
</header>
<ThemeSwitcher />
<main>
<slot />
</main>