vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2026-04-13 17:59:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: redesign of the navigation buttons in the header (#65)

Browse source
This commit is contained in:
Victor Westerlund 2026-03-14 08:32:29 +01:00
parent aa884a10bf
commit 4cc732e0f7
Signed by: vlw
GPG key ID: 5DAF14C317AA7719
2 changed files with 57 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
public/assets/css/shell.css
View file

@ -473,22 +473,32 @@ search-results .info :is(svg, img) {
@media (min-width: 900px) {
header {
.buttons {
gap: 10px;
width: 100%;
display: grid;
display: flex;
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;
display: flex;
border-left: unset;
&:hover {
border-color: var(--color-accent);
background-color: transparent;
div {
width: 4px;
height: 2em;
transform: rotate(20deg);
transition:
200ms background-position ease,
500ms box-shadow ease
;
background: linear-gradient(
0deg,
rgb(var(--primer-color-accent)) 0%,
rgb(var(--primer-color-accent)) 50%,
rgba(255, 255, 255, .3) 50%,
rgba(255, 255, 255, .3) 100%
);
background-size: 100% 200%;
background-position: 0% 0%;
}
:is(
@ -496,9 +506,30 @@ search-results .info :is(svg, img) {
[vv-page="/about"] a[href="/about"],
[vv-page="/contact"] a[href="/contact"]
) & {
color: var(--color-accent);
border-style: solid;
border-color: var(--color-accent);
background-color: transparent;
div {
background-position: 0% 100%;
box-shadow: 0 0 10px 0 var(--color-accent);
}
p {
color: white;
}
}
@media (hover: hover) {
&:hover {
background-color: transparent;
div {
background-position: 0% 100%;
}
p {
color: white;
}
}
}
}
}

17
public/shell.php
View file

@ -48,9 +48,18 @@
<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>
<a href="/work"><button>
<div></div>
<p>work</p>
</button></a>
<a href="/about"><button>
<div></div>
<p>about</p>
</button></a>
<a href="/contact"><button>
<div></div>
<p>contact</p>
</button></a>
</div>
</nav>
<button class="search searchbox-open">
@ -76,4 +85,4 @@
<?= VV::init() ?>
<script><?= VV::js("public/assets/js/shell") ?></script>
</body>
</html>
</html>