feat: add main page nav buttons to desktop header

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