wip: 2025-01-31T16:07:49+0100 (1738336069)

public/assets/css/pages/about.css

@@ -3,6 +3,7 @@
 :root {
 	--primer-color-accent: 148, 255, 21;
 	--color-accent: rgb(var(--primer-color-accent));
+	--hue-accent: 390deg;
 
 	--primer-color-go: 0, 173, 216;
 	--primer-color-php: 79, 93, 149;

public/assets/css/pages/contact.css

@@ -3,6 +3,7 @@
 :root {
 	--primer-color-accent: 255, 195, 255;
 	--color-accent: rgb(var(--primer-color-accent));
+	--hue-accent: 200deg;
 }
 
 vv-shell {
@@ -28,10 +29,6 @@ section.center {
 	text-align: center;
 }
 
-section.fade {
-	opacity: .3;
-}
-
 /* ## Social */
 
 section.social {
@@ -81,11 +78,12 @@ section.pgp {
 	max-width: 800px;
 	position: relative;
 	display: flex;
+	border-radius: 12px;
 	flex-direction: column;
 	gap: var(--padding);
 	text-align: center;
 	background-color: rgba(var(--primer-color-accent), .15);
-	padding: calc(var(--padding) * 1.5);
+	padding: var(--padding);
 	transform: rotate(-1.5deg);
 }
 
@@ -108,10 +106,6 @@ section.pgp .buttons {
 	gap: var(--padding);
 }
 
-section.pgp .buttons .download svg.chevron {
-	transform: unset;
-}
-
 /* ## Contact form */
 
 section.form :is(input, textarea) {
@@ -200,6 +194,10 @@ section.form-message.sent + section.form {
 /* # Size queries */
 
 @media (min-width: 460px) {
+	section.pgp {
+		padding: calc(var(--padding) * 1.5);
+	}
+
 	section.pgp .buttons {
 		flex-direction: row;
 		justify-content: center;

public/assets/css/pages/work.css

@@ -3,9 +3,10 @@
 :root {
 	--primer-color-accent: 3, 255, 219;
 	--color-accent: rgb(var(--primer-color-accent));
+	--hue-accent: 90deg;
 
-	--color-reflect: 220, 26, 0;
+	--primer-color-reflect: 220, 26, 0;
-	--color-vegvisir: 0, 128, 255;
+	--primer-color-vegvisir: 0, 128, 255;
 }
 
 vv-shell {
@@ -22,7 +23,7 @@ vv-shell {
 /* ## Hero */
 
 section.hero {
-	--color-accent: rgba(255, 255, 255);
+	--color-accent: rgb(255, 255, 255);
 
 	display: grid;
 	gap: var(--padding);
@@ -65,19 +66,21 @@ section.hero .actions {
 /* ### Vegivisr */
 
 section.hero .item.vegvisir {
-	--color-accent: var(--color-vegvisir);
+	--primer-color-accent: var(--primer-color-vegvisir);
+	--color-accent: rgb(var(--primer-color-vegvisir));
 
-	color: rgb(var(--color-vegvisir));
+	color: var(--color-vegvisir);
-	background-color: rgba(var(--color-vegvisir), .1);
+	background-color: rgba(var(--primer-color-vegvisir), .1);
 }
 
 /* ### Reflect */
 
 section.hero .item.reflect {
-	--color-accent: var(--color-reflect);
+	--primer-color-accent: var(--primer-color-reflect);
+	--color-accent: rgb(var(--primer-color-reflect));
 
-	color: rgb(var(--color-reflect));
+	color: var(--color-reflect);
-	background-color: rgba(var(--color-reflect), .2);
+	background-color: rgba(var(--primer-color-reflect), .2);
 }
 
 /* ## Heading */
@@ -90,7 +93,6 @@ section.heading {
 }
 
 section.heading svg {
-	fill: white;
 	height: 2em;
 }
 

public/assets/css/pages/work/timeline.css

@@ -3,6 +3,7 @@
 :root {
 	--primer-color-accent: 3, 255, 219;
 	--color-accent: rgb(var(--primer-color-accent));
+	--hue-accent: 90deg;
 }
 
 vv-shell {
@@ -27,7 +28,7 @@ section.git {
 	border-radius: 6px;
 }
 
-section.git svg {
+section.git > svg {
 	fill: white;
 	width: 60px;
 }

public/assets/css/pages/work/wip.css

@@ -3,6 +3,7 @@
 :root {
 	--primer-color-accent: 3, 255, 219;
 	--color-accent: rgb(var(--primer-color-accent));
+	--hue-accent: 90deg;
 }
 
 vv-shell {

public/assets/css/shell.css

@@ -12,6 +12,7 @@
 
 * {
 	margin: 0;
+	fill: inherit;
     box-sizing: border-box;
     font-family: "Roboto Mono", sans-serif;
     color: inherit;
@@ -88,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 {

public/assets/js/shell.js

@@ -2,6 +2,9 @@ import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
 
 const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
 
+// Set global Vegvisir naviation delay for page transition effect
+globalThis.vegvisir.globalNavigationDelayMs = 100;
+
 // Handle search box open/close buttons
 {
 	// Open search box
@@ -50,6 +53,4 @@ const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
 }
 
 // Scroll page to top on navigation
-{
 document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({ top: 0 }));
-}

public/work/wip.php

@@ -1,8 +1,18 @@
+<?php
+
+	use const VLW\DEFAULT_BUTTON_ICON;
+
+	require_once VV::root("src/Consts.php");
+
+?>
 <style><?= VV::css("public/assets/css/pages/work/wip") ?></style>
 <section class="disclaimer">
 	<h1>Soon, very soon!</h1>
 	<p>Bear with me as I cook up some texts about this project! Hopefully with some pictures too.</p>
 </section>
 <section class="actions">
-	<a href="/work"><button class="inline">to featured work</button></a>
+	<a href="/work"><button class="inline">
+		<p>to featured work</p>
+		<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+	</button></a>
 </section>