83 lines
2.6 KiB
Plaintext
83 lines
2.6 KiB
Plaintext
---
|
|
import '@styles/main.css';
|
|
import '@fontsource-variable/baskervville-sc';
|
|
import ThemeSwitcher from '@components/ThemeSwitcher.astro';
|
|
---
|
|
|
|
<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 explicitPref = localStorage.getItem('theme-preference');
|
|
if (explicitPref) {
|
|
document.documentElement.dataset.theme = explicitPref;
|
|
} else {
|
|
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
document.documentElement.dataset.theme = isLight ? 'light' : 'dark';
|
|
}
|
|
</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: 'Figtree Variable';
|
|
font-weight: 500;
|
|
font-size: 1.3rem;
|
|
color: var(--nav-link-color);
|
|
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.5rem;
|
|
text-decoration-color: transparent;
|
|
transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
|
|
|
|
&.home {
|
|
font-family: 'Baskervville SC Variable';
|
|
font-size: 2rem;
|
|
text-decoration-thickness: 0.125rem;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
text-decoration-color: var(--accent-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.switcher-container {
|
|
align-self: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="/" class="home" data-astro-prefetch>Joe's Blog</a>
|
|
<div class="switcher-container">
|
|
<ThemeSwitcher />
|
|
</div>
|
|
<a href="/posts" data-astro-prefetch>Posts</a>
|
|
<a href="/about" data-astro-prefetch>About</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
</body>
|
|
</html>
|