noway.moe/src/components/Header.astro

91 lines
3 KiB
Text
Raw Normal View History

2023-12-25 20:01:37 -07:00
---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
---
2023-12-25 22:08:17 -07:00
<header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40">
<nav class="hidden select-none mx-auto md:flex justify-between items-center px-6 py-3.5 text-md md:text-lg leading-6">
<div class="flex items-center space-x-8">
2023-12-26 20:57:47 -07:00
<a href="https://git.mami2.moe/akemi/noway.moe" target="_blank">
<span class="sr-only">Forgejo</span>
<svg class="forgejo-logo" viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
<style>
.cls-1{fill:#000;}
svg.forgejo-logo path{stroke-width: 25}
svg.forgejo-logo circle{stroke-width: 15}
svg.forgejo-logo .light{fill: none; stroke: #aaa;}
svg.forgejo-logo .dark{fill: none; stroke: #000;}
svg.forgejo-logo:hover .light{stroke: var(--accent-color);}
</style>
<g transform="translate(6,6)">
<path class="light" d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
<path class="dark" d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
<circle class="light" cx="142" cy="20" r="18" />
<circle class="dark" cx="142" cy="88" r="18" />
<circle class="dark" cx="58" cy="180" r="18" />
</g>
</svg>
</a>
2023-12-25 21:21:39 -07:00
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/about">About</HeaderLink>
</div>
2023-12-25 22:08:17 -07:00
<div class="fun-quote" style="margin: 0">
2023-12-26 20:57:47 -07:00
<span style="font-family: PoetsenOne" class="text-2xl">ReLUwU activated</span>
2023-12-25 22:08:17 -07:00
</div>
<div class="social-links flex space-x-8 items-center">
2023-12-26 20:57:47 -07:00
<HeaderLink href="/about">Discord</HeaderLink>
<HeaderLink href="/about">GitHub</HeaderLink>
<HeaderLink
style="color:white;background-color:black;border-radius:8px;border:2px solid black;padding:2px 8px;text-decoration:none;"
href="/">
Resume
</HeaderLink>
2023-12-25 21:21:39 -07:00
</div>
</nav>
2023-12-25 20:01:37 -07:00
</header>
2023-12-25 22:08:17 -07:00
<!--
2023-12-25 20:01:37 -07:00
<style>
2023-12-25 21:21:39 -07:00
header {
margin: 0;
padding: 0 1em;
background: white;
box-shadow: 0 2px 8px rgba(var(--black), 5%);
}
h2 {
margin: 0;
font-size: 1em;
}
2023-12-25 20:01:37 -07:00
2023-12-25 21:21:39 -07:00
h2 a,
h2 a.active {
text-decoration: none;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav a {
padding: 1em 0.5em;
color: var(--black);
border-bottom: 4px solid transparent;
text-decoration: none;
}
nav a.active {
text-decoration: none;
border-bottom-color: var(--accent);
}
.social-links,
.social-links a {
display: flex;
}
@media (max-width: 720px) {
.social-links {
display: none;
}
}
2023-12-25 20:01:37 -07:00
</style>
2023-12-25 22:08:17 -07:00
-->