From 7e01690936fc42924c8bc5d1590c0f994f91268a Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor@vlw.se>
Date: Sat, 8 Nov 2025 19:13:10 +0100
Subject: [PATCH] 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 | 46 ++++++++++++++++++++++++++++++++++++-
 public/shell.php            |  5 ++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css
index 6743c94..d77462d 100644
--- a/public/assets/css/shell.css
+++ b/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);
 		}
 	}
-}
\ No newline at end of file
+}
+
+@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);
+				}
+			}
+		}
+	}
+}
diff --git a/public/shell.php b/public/shell.php
index 2fd9cbc..a8eed79 100644
--- a/public/shell.php
+++ b/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") ?>