composer.json

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

composer.lock

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

public/assets/css/shell.css

@@ -89,6 +89,32 @@ 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 {
@@ -112,7 +138,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)
 	;
@@ -366,7 +392,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)
 		;
@@ -460,7 +486,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)
 			;
@@ -473,32 +499,22 @@ search-results .info :is(svg, img) {
 @media (min-width: 900px) {
 	header {
 		.buttons {
-			display: flex;
+			gap: 10px;
+			width: 100%;
+			display: grid;
 			white-space: nowrap;
 			align-items: center;
 			grid-template-columns: repeat(3, 100px);
 
 			button {
-				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%;
+				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(
@@ -506,30 +522,9 @@ search-results .info :is(svg, img) {
 					[vv-page="/about"] a[href="/about"],
 					[vv-page="/contact"] a[href="/contact"]
 				) & {
-					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;
-						}
-					}
+					color: var(--color-accent);
+					border-style: solid;
+					border-color: var(--color-accent);
 				}
 			}
 		}

public/shell.php

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