feat: redesign of the navigation buttons in the header (#65)

In this PR we remove the loading spinner that we have between page loads. It might seem like a good thing to have, but the `vv-loading` attribute in the version of Vegvisir this site is running is broken and only displays the spinner for a few frames regardless if the page has been loaded or not. We really need #66. When that finally happens, I will design a better loading screen anyways.

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/67

composer.json

@@ -1,7 +1,7 @@
 {
     "require": {
-        "vlw/mysql": "dev-master",
-        "vlw/xenum": "dev-master"
+        "vlw/mysql": "3.5.*",
+        "vlw/xenum": "1.1.*"
     },
     "minimum-stability": "dev"
 }

composer.lock

@@ -4,17 +4,16 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a7ce20d192550ef2d037220b593b5eb9",
+    "content-hash": "c36d78f9e61db4f5ef380418afcc118b",
     "packages": [
         {
             "name": "vlw/mysql",
-            "version": "dev-master",
+            "version": "3.5.11",
             "source": {
                 "type": "git",
                 "url": "https://codeberg.org/vlw/php-mysql",
-                "reference": "0e367f797fa9348408881ed758976f21e8c667e4"
+                "reference": "73297feb826173cd0cd1a15e09e102618e060e2d"
             },
-            "default-branch": true,
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -32,17 +31,16 @@
                 }
             ],
             "description": "Abstraction library for common MySQL/MariaDB DML operations with php-mysqli",
-            "time": "2025-07-29T07:46:46+00:00"
+            "time": "2025-08-30T07:49:14+00:00"
         },
         {
             "name": "vlw/xenum",
-            "version": "dev-master",
+            "version": "1.1.3",
             "source": {
                 "type": "git",
                 "url": "https://codeberg.org/vlw/php-xenum",
                 "reference": "ba3f43a9e2787bf938cfbfcb85ea87e5062df294"
             },
-            "default-branch": true,
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -66,10 +64,7 @@
     "packages-dev": [],
     "aliases": [],
     "minimum-stability": "dev",
-    "stability-flags": {
-        "vlw/mysql": 20,
-        "vlw/xenum": 20
-    },
+    "stability-flags": [],
     "prefer-stable": false,
     "prefer-lowest": false,
     "platform": [],

public/assets/css/shell.css

@@ -89,32 +89,6 @@ h3 {
 	font-size: 25px;
 }
 
-/* ## Page transition */
-
-[vv-loading] * {
-	transition: 200ms opacity;
-}
-
-[vv-loading="true"] * {
-	opacity: 0;
-	pointer-events: none;
-}
-
-[vv-loading="true"]::after {
-	content: "";
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	width: 45px;
-	height: 49px;
-	background-size: contain;
-	image-rendering: pixelated;
-	transform: translate(-50%, -50%);
-	background-image: url("/assets/media/spinner.gif");
-	-webkit-filter: hue-rotate(var(--hue-accent));
-	filter: hue-rotate(var(--hue-accent));
-}
-
 /* ## Buttons */
 
 button {
@@ -138,7 +112,7 @@ button.inline {
 }
 
 button.inline:not(.solid) {
-	box-shadow: 
+	box-shadow:
 		0 0 0 2px rgba(var(--primer-color-accent), .1),
 		10px 7px 40px 3px rgba(var(--primer-color-accent), .06)
 	;
@@ -392,7 +366,7 @@ search-results .info :is(svg, img) {
 	}
 
 	button.inline:not(.solid):hover {
-		box-shadow: 
+		box-shadow:
 			0 0 0 2px rgba(var(--primer-color-accent), 1),
 			10px 7px 30px 3px rgba(var(--primer-color-accent), .07)
 		;
@@ -486,7 +460,7 @@ search-results .info :is(svg, img) {
 			width: 50%;
 			height: calc(100svh - 100px);
 			background-color: rgba(0, 0, 0, .8);
-			box-shadow: 
+			box-shadow:
 				inset 0 0 100px 200px rgba(0, 0, 0, 1),
 				0 0 100px 200px rgba(0, 0, 0, 1)
 			;
@@ -499,22 +473,32 @@ search-results .info :is(svg, img) {
 @media (min-width: 900px) {
 	header {
 		.buttons {
-			gap: 10px;
-			width: 100%;
-			display: grid;
+			display: flex;
 			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;
+				display: flex;
+				border-left: unset;
+
+				div {
+					width: 4px;
+					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(
@@ -522,9 +506,30 @@ search-results .info :is(svg, img) {
 					[vv-page="/about"] a[href="/about"],
 					[vv-page="/contact"] a[href="/contact"]
 				) & {
-					color: var(--color-accent);
-					border-style: solid;
-					border-color: var(--color-accent);
+					background-color: transparent;
+
+					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;
+						}
+					}
 				}
 			}
 		}

public/shell.php

@@ -48,9 +48,18 @@
 		<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>
+				<a href="/work"><button>
+					<div></div>
+					<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>
 		</nav>
 		<button class="search searchbox-open">
@@ -76,4 +85,4 @@
 	<?= VV::init() ?>
 	<script><?= VV::js("public/assets/js/shell") ?></script>
 </body>
-</html>
+</html>