mirror of
https://github.com/YouHaveTrouble/youhavetrouble.github.io.git
synced 2026-05-12 06:16:55 +00:00
83 lines
1.5 KiB
Plaintext
83 lines
1.5 KiB
Plaintext
---
|
|
const { current = '' } = Astro.props;
|
|
---
|
|
|
|
<style>
|
|
|
|
@media (orientation: portrait) {
|
|
nav {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nav-buttons {
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
font-family: var(--font-family-sans);
|
|
font-weight: 700;
|
|
justify-content: flex-end;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
padding: 10px 5px;
|
|
display: block;
|
|
position: relative;
|
|
margin-left: 20px;
|
|
min-width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
a:not(.selected) {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
a::before {
|
|
content: '';
|
|
position: absolute;
|
|
transition: transform .3s ease;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--text-secondary);
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
a:hover::before,
|
|
.selected::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.selected::before {
|
|
background: var(--primary-color);
|
|
}
|
|
|
|
.theme-toggle-container {
|
|
width: 75px;
|
|
}
|
|
</style>
|
|
|
|
<nav>
|
|
<div class="nav-buttons">
|
|
<a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
|
|
<a data-astro-prefetch class={current === "projects" ? "selected" : ""} href='/projects'>projects</a>
|
|
<a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
|
|
</div>
|
|
</nav>
|