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

![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

public/assets/css/shell.css

@@ -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);
+				}
+			}
+		}
+	}
+}

public/shell.php

@@ -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") ?>