feat: add main page nav buttons to desktop header

This commit is contained in:
Victor Westerlund 2025-11-08 19:10:39 +01:00
parent e8a81b789b
commit 3cca8b9cfd
Signed by: vlw
GPG key ID: D0AD730E1057DFC6
2 changed files with 50 additions and 1 deletions

View file

@ -208,11 +208,20 @@ header > * {
}
header nav {
gap: calc(var(--padding) * 2);
display: flex;
align-items: center;
padding: var(--padding);
}
header nav > p {
white-space: nowrap;
}
header .buttons {
display: none;
}
header .logo {
fill: none;
}
@ -485,4 +494,39 @@ search-results .info :is(svg, img) {
backdrop-filter: blur(15px);
}
}
}
}
@media (min-width: 900px) {
header {
.buttons {
gap: 10px;
width: 100%;
display: grid;
white-space: nowrap;
align-items: center;
grid-template-columns: repeat(3, 100px);
button {
transition: 100ms border;
border: dashed 1px rgba(255, 255, 255, .3);
padding: 13px var(--padding);
border-radius: 6px;
&:hover {
border-color: var(--color-accent);
background-color: transparent;
}
:is(
[vv-page="/work"] a[href="/work"],
[vv-page="/about"] a[href="/about"],
[vv-page="/contact"] a[href="/contact"]
) & {
color: var(--color-accent);
border-style: solid;
border-color: var(--color-accent);
}
}
}
}
}

View file

@ -47,6 +47,11 @@
<header>
<nav>
<p><a href="/">victor westerlund</a></p>
<div class="buttons">
<a href="/work"><button><p>/work</p></button></a>
<a href="/about"><button><p>/about</p></button></a>
<a href="/contact"><button><p>/contact</p></button></a>
</div>
</nav>
<button class="search searchbox-open">
<?= VV::embed("public/assets/media/icons/search.svg") ?>