wip(22w7b): add visibilitychange event

public/assets/css/style.css

@@ -38,7 +38,9 @@ body {
     user-select: none;
 }
 
-a {
+:is(#intro, #card) a {
+    --padding-vert: 17px;
+
     display: inline-block;
     text-decoration: none;
     text-align: center;
@@ -76,7 +78,7 @@ body > div {
 }
 
 #intro a {
-    padding: 17px 40px;
+    padding: var(--padding-vert) 40px;
     border-radius: 100px;
     border: solid 4px rgba(var(--color-contrast), .3);
     margin: var(--padding) 0;
@@ -98,7 +100,7 @@ body > div {
 }
 
 #card {
-    --portrait-size: calc(128px, 15vw, 11vh);
+    --portrait-size: 128px;
 
     gap: var(--padding);
     position: relative;
@@ -121,30 +123,43 @@ body > div {
 
 #card a {
     width: 100%;
-    padding: 17px 0;
+    padding: var(--padding-vert) 0;
     border-radius: 9px;
     background-color: rgba(var(--color-contrast), .13);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+    box-shadow: 
+        inset 0 3px 16px rgba(0, 0, 0, 0),
+        0 1px 3px rgba(0, 0, 0, .12),
+        0 1px 2px rgba(0, 0, 0, .24);
 }
 
 /* -- Media Queries -- */
 
+@supports (not (backdrop-filter: saturate)) and (not (backdrop-filter: brightness)) {
+    #card {
+        background-color: rgba(var(--color-base), .2);
+    }
+}
+
 @media (pointer: fine) {
-    #intro a:hover {
-        background-color: rgba(var(--color-contrast), .1);
+    :is(#intro, #card) a {
+        --transition-speed: 200ms;
+        transition: var(--transition-speed) background-color, var(--transition-speed) box-shadow;
     }
 
-    #card a:hover {
+    :is(#intro, #card) a:hover {
         background-color: rgba(var(--color-contrast), .2);
-        box-shadow: 0 3px 6px rgba(0, 0, 0,.16), 0 3px 6px rgba(0, 0, 0, .23);
+        box-shadow: 
+            inset 0 3px 16px rgba(0, 0, 0, .16),
+            0 3px 6px rgba(0, 0, 0, .16),
+            0 3px 6px rgba(0, 0, 0, .23);
+    }
+
+    :is(#intro, #card) a:active {
+        background-color: rgba(var(--color-contrast), .15);
     }
 }
 
 @media (min-aspect-ratio: 14/9) and (min-height: 450px) {
-    #intro a {
-        width: unset;
-    }
-
     body {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
@@ -154,4 +169,16 @@ body > div {
         display: grid;
         align-items: center;
     }
+
+    body > div:last-of-type {
+        padding: calc(var(--padding) * 2);
+    }
+
+    #intro a {
+        width: unset;
+    }
+
+    #card {
+        min-width: 300px;
+    }
 }

public/assets/js/modules/Background.mjs

@@ -5,10 +5,22 @@ export default class Background {
 			count: 2
 		}
 
-		this.image = null;
-		this.target = target ? target : document.body;
+		this.image = null; // Will contain the original base64 image
+		this.target = target ? target : document.body; // Set `background-image` of this element
 
-		this.updateBg = setInterval(() => this.randBg(), 5000);
+		// Update the background with a new image every now and then
+		this.updateBg = {
+			_this: this,
+			_delay: 5000,
+			_interval: null,
+			set running (state = true) {
+				clearInterval(this._interval);
+				if(state) this._interval = setInterval(() => this._this.randBg(), this._delay);
+			},
+			set delay (delay) {
+				this._delay = delay;
+			}
+		}
 	}
 
 	// Update the target CSS background

public/assets/js/modules/Glitch.mjs

@@ -10,12 +10,17 @@ export default class Glitch extends Background {
 			// Queue the next glitch
 			set next (timeout) {
 				clearTimeout(this._interval);
-				this._interval = setTimeout(() => this._this.glitch(), timeout);
+				if(timeout !== false) this._interval = setTimeout(() => this._this.glitch(), timeout);
 			}
 		}
 
-		this.interval.next = 500;
-		this.randBg();
+		// Stop playback when page is not visible
+		document.addEventListener("visibilitychange",() => {
+			if(document.visibilityState === "visible") return this.start();
+			this.stop();
+		});
+
+		this.start();
 	}
 
 	// Generate random string of length from charset
@@ -28,10 +33,23 @@ export default class Glitch extends Background {
 		return output;
 	}
 
-	// Create a glitchy image
+	// Create a glitchy image and queue the next one
 	glitch() {
+		if(!this.image) return;
 		const image = this.image.replaceAll(this.randStr(), this.randStr());
 		this.setBg(image);
+		
 		this.interval.next = this.randInt(1500, 5000);
 	}
+
+	start() {
+		this.interval.next = 500;
+		this.updateBg.running = true;
+		this.randBg();
+	}
+
+	stop() {
+		this.interval.next = false;
+		this.updateBg.running = false;
+	}
 }

public/index.html

@@ -31,8 +31,7 @@
                 <p>Beyond computer science, I'm also a armchair rabbit-holer for engineering, astronomy and physics</p>
             </div>
             <div>
-                <h1>☕</h1>
-                <p>...and coffee, full-time</p>
+                <p>...and ☕, full-time</p>
             </div>
             <a href="#">stalk me 😬</a>
         </div>