vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2026-01-12 06:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add main page navigation buttons to desktop header (#58)

Browse source 
![image](/attachments/0d1ea431-0714-4e7d-a88e-8d299247160e)

In this PR we add some simple main page navigation buttons that appear in the header on screen sizes that can accommodate them. The header looked pretty empty before on desktop screens, so this at least adds some functionality to that space.

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/58
This commit is contained in:
Victor Westerlund 2025-11-08 19:13:10 +01:00
parent 53995932f5
commit 26b8c85779
2 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
public/assets/css/shell.css
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;
}
@ -486,3 +495,38 @@ search-results .info :is(svg, img) {
}
}
}
@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);
}
}
}
}
}

5
public/shell.php
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") ?>