vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2026-04-13 01:39: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 f58d79ae77
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) { @media (min-width: 900px) {
header { header {
.buttons { .buttons {
gap: 10px; display: flex;
width: 100%;
display: grid;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
grid-template-columns: repeat(3, 100px); grid-template-columns: repeat(3, 100px);
button { button {
transition: 100ms border; display: flex;
border: dashed 1px rgba(255, 255, 255, .3); border-left: unset;
padding: 13px var(--padding);
border-radius: 6px;
&:hover { div {
border-color: var(--color-accent); width: 4px;
background-color: transparent; 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( :is(
@ -496,9 +506,30 @@ search-results .info :is(svg, img) {
[vv-page="/about"] a[href="/about"], [vv-page="/about"] a[href="/about"],
[vv-page="/contact"] a[href="/contact"] [vv-page="/contact"] a[href="/contact"]
) & { ) & {
color: var(--color-accent); background-color: transparent;
border-style: solid;
border-color: var(--color-accent); 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> <nav>
<p><a href="/">victor westerlund</a></p> <p><a href="/">victor westerlund</a></p>
<div class="buttons"> <div class="buttons">
<a href="/work"><button><p>/work</p></button></a> <a href="/work"><button>
<a href="/about"><button><p>/about</p></button></a> <div></div>
<a href="/contact"><button><p>/contact</p></button></a> <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> </div>
</nav> </nav>
<button class="search searchbox-open"> <button class="search searchbox-open">
@ -76,4 +85,4 @@
<?= VV::init() ?> <?= VV::init() ?>
<script><?= VV::js("public/assets/js/shell") ?></script> <script><?= VV::js("public/assets/js/shell") ?></script>
</body> </body>
</html> </html>