site/src/components/Header.astro

71 lines
1.5 KiB
Plaintext

---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
---
<header>
<nav>
<h2><a href="/">{SITE_TITLE}</a></h2>
<div class="internal-links">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="https://8bit.frop.prof">8bit</HeaderLink>
</div>
<div class="social-links">
<a href="/rss.xml" target="_blank">
<span class="sr-only">RSS Feed</span>
<svg viewBox="0 0 20 20" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"
></path></svg
>
</a>
</div>
</nav>
</header>
<style>
header {
margin: 0;
padding: 0 1em;
background: white;
}
h2 {
margin: 0;
font-size: 1em;
}
h2 a,
h2 a.active {
text-decoration: none;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav a {
padding: 0.25em 0.5em;
color: rgb(var(--black));
text-decoration: none;
}
nav .internal-links a.active {
color: var(--accent);
text-decoration: none;
}
.social-links,
.social-links a {
display: flex;
}
.social-links a {
padding: 0.25em;
}
.social-links a svg {
height: 25px;
}
@media (max-width: 720px) {
.social-links {
display: none;
}
}
</style>