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: add nicer header nav button style

Browse source
This commit is contained in:
Victor Westerlund 2026-03-10 13:09:43 +01:00
parent f03800653d
commit 6c5a242b09
Signed by: vlw
GPG key ID: 5DAF14C317AA7719
2 changed files with 61 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -138,7 +138,7 @@ button.inline {
} }
button.inline:not(.solid) { button.inline:not(.solid) {
box-shadow: box-shadow:
0 0 0 2px rgba(var(--primer-color-accent), .1), 0 0 0 2px rgba(var(--primer-color-accent), .1),
10px 7px 40px 3px rgba(var(--primer-color-accent), .06) 10px 7px 40px 3px rgba(var(--primer-color-accent), .06)
; ;
@ -392,7 +392,7 @@ search-results .info :is(svg, img) {
} }
button.inline:not(.solid):hover { button.inline:not(.solid):hover {
box-shadow: box-shadow:
0 0 0 2px rgba(var(--primer-color-accent), 1), 0 0 0 2px rgba(var(--primer-color-accent), 1),
10px 7px 30px 3px rgba(var(--primer-color-accent), .07) 10px 7px 30px 3px rgba(var(--primer-color-accent), .07)
; ;
@ -486,7 +486,7 @@ search-results .info :is(svg, img) {
width: 50%; width: 50%;
height: calc(100svh - 100px); height: calc(100svh - 100px);
background-color: rgba(0, 0, 0, .8); background-color: rgba(0, 0, 0, .8);
box-shadow: box-shadow:
inset 0 0 100px 200px rgba(0, 0, 0, 1), inset 0 0 100px 200px rgba(0, 0, 0, 1),
0 0 100px 200px rgba(0, 0, 0, 1) 0 0 100px 200px rgba(0, 0, 0, 1)
; ;
@ -499,22 +499,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; div {
width: 4px;
&:hover { height: 2em;
border-color: var(--color-accent); transform: rotate(20deg);
background-color: transparent; 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(
@ -522,9 +532,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>