Merge branch 'master' into feat/new-search

assets/css/document.css

@@ -33,6 +33,33 @@ body {
 	font-size: 15px;
 }
 
+body::before {
+	transition: 1s opacity;
+	content: "";
+	position: absolute;
+	top: -5%;
+	right: 0;
+	width: 20%;
+	height: 5%;
+	border-radius: 100%;
+	z-index: 1000;
+	box-shadow:
+		0 0 30svh 10svh rgba(var(--primer-color-accent), .2),
+		0 0 30svh 60svh rgba(var(--primer-color-accent), .1),
+		0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
+	;
+	opacity: 0;
+}
+
+/* "enable" the corner glow effect on initial load when a page has been fully loaded */
+body[vv-page]::before {
+	opacity: 1;
+}
+
+body.search-dialog-open {
+	overflow: hidden;
+}
+
 a {
     display: contents;
     color: inherit;
@@ -226,6 +253,20 @@ searchbox > svg {
 /* # Size queries */
 
 @media (min-width: 700px) {
+	/* # Cornerstones */
+
+	body::before {
+		right: unset;
+		left: 0;
+		box-shadow:
+			0 0 30svh 10svh rgba(var(--primer-color-accent), .1),
+			0 0 30svh 60svh rgba(var(--primer-color-accent), .05),
+			0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
+		;
+	}
+
+	/* ## Header */
+
 	header {
 		grid-template-columns: 1fr 250px var(--running-size);
 	}
@@ -235,9 +276,9 @@ searchbox > svg {
 		margin: 0 calc(var(--padding) / 2);
 	}
 
-	/* # Menu */
+	/* ### Menu */
 
-	/* < Move the search box to the header */
+	/* Move the search box to the header */
 	header searchbox {
 		display: grid;
 	}

assets/css/pages/about.css

@@ -50,6 +50,8 @@ section.version {
 /* # Interests */
 
 div.interests {
+	--text-shadow-blur: 30px;
+	
 	transition: 300ms opacity;
 	position: fixed;
 	top: 0;
@@ -58,7 +60,7 @@ div.interests {
 	height: 100%;
 	font-weight: bold;
 	pointer-events: none;
-	font-size: 50px;
+	font-size: clamp(16px, 15vw, 50px);
 	color: var(--color-accent);
 	overflow: hidden;
 	opacity: 0;
@@ -70,9 +72,7 @@ div.interests.active {
 }
 
 div.interests p {
-	--text-shadow-blur: 30px;
-
-	transition: 300ms transform;
+	transition: 500ms transform cubic-bezier(.34,0,0,.99);
 	position: absolute;
 	text-shadow: 
 		0 0 var(--text-shadow-blur) black,

assets/css/pages/index.css

@@ -1,3 +1,9 @@
+/* # Overrides */
+
+body[vv-page="/"]::before {
+	opacity: 0;
+}
+
 /* # Main styles */
 
 /* ## Picture */

assets/js/pages/about.js

@@ -6,26 +6,35 @@ const randomIntFromInterval = (min, max) => {
 
 // Interest explosion effect from origin position
 const explodeInterests = (originX, originY) => {
-	// Elements can not translate more than negative- and positive from this number
-	const TRANS_LIMIT = 300;
-
 	const wrapper = document.querySelector("div.interests");
 	wrapper.classList.add("active");
 
+	// Elements can not expand further than positive or negative of these values
+	const transLimitX = window.innerWidth / 4;
+	const transLimitY = window.innerHeight / 3;
+
 	[...wrapper.querySelectorAll("p")].forEach(element => {
-		/*
-			Generate random visuals for current element
-		*/
+		const size = element.getBoundingClientRect();
+		
+		// Generate random HUE wheel rotation degrees
 		const hue = randomIntFromInterval(0, 360);
+		// Generate random element transform rotation
 		const rotate = randomIntFromInterval(-5, 5);
-		const transX = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT);
-		const transY = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT);
+
+		// Generate random offsets in each direction clamped to translation limit
+		let transX = randomIntFromInterval(transLimitX * -1, transLimitX);
+		let transY = randomIntFromInterval(transLimitY * -1, transLimitY);
+	
+		// Clamp translation to screen left and right X size
+		transX = Math.max(0 - originX, Math.min((window.innerWidth - originX) - size.width, transX));
+		// Clamp translation to top and bottom Y size
+		transY = Math.max(0 - originY, Math.min((window.innerHeight - originY) - size.height, transY));
 
 		// Set initial position
 		element.style.setProperty("top", `${originY}px`);
 		element.style.setProperty("left", `${originX}px`);
 
-		// Set random HUE rotation
+		// Set HUE rotation
 		element.style.setProperty("-webkit-filter", `hue-rotate(${hue}deg)`);
 		element.style.setProperty("filter", `hue-rotate(${hue}deg)`);
 
@@ -39,10 +48,8 @@ const implodeInterests = () => {
 	const wrapper = document.querySelector("div.interests");
 	wrapper.classList.remove("active");
 
-	[...wrapper.querySelectorAll("p")].forEach(element => {
-		// Reset to initial position
-		element.style.setProperty("transform", "translate(0, 0)");
-	});
+	// Reset to initial position
+	[...wrapper.querySelectorAll("p")].forEach(element => element.style.setProperty("transform", "translate(0, 0)"));
 };
 
 // Bind triggers for interests explosion and implotion
@@ -55,10 +62,7 @@ const implodeInterests = () => {
 		// Get absolute position of the trigger element
 		const size = interestsElement.getBoundingClientRect();
 
-		const x = size.x - 80;
-		const y = size.y - 10;
-
-		explodeInterests(x, y);
+		explodeInterests(size.x, size.y);
 	});
 
 	interestsElement.addEventListener(canHover ? "mouseleave" : "touchend", () => implodeInterests());

assets/js/pages/index.js

@@ -106,15 +106,3 @@ if (window.matchMedia("(hover: hover)")) {
 	// Reset color on navigation
 	document.querySelector(vv._env.MAIN).addEventListener(vv.Navigation.events.LOADED, () => updateColor(), { once: true });
 }
-
-// Open search box from mobile fullscreen menu
-{
-	// Open search dialog when searchbox is clicked
-	document.querySelector("menu searchbox").addEventListener("click", () => {
-		// Search box dialog element
-		document.querySelector("dialog.search").showModal();
-
-		// Close fullscreen menu
-		document.querySelector("menu").classList.remove("active");
-	});
-}