fix font reference in css

app.js

@@ -9,11 +9,10 @@ const bodyTop = document.getElementById("top");
 document.querySelector('.value-block').addEventListener('toggle', function() {
   if (this.open) {
     // Scroll to contents of value block when it is opened
-    valueBlock.scrollIntoView({ behavior: "smooth" });
+    setTimeout(() => {
-  } else {
+  		valueBlock.scrollIntoView({ behavior: "smooth" });
-    // Scroll to top of button list when value block is closed
+		}, 150);
-    bodyTop.scrollIntoView({ behavior: "smooth" });
+  }
- }
 });
 
 //
@@ -25,7 +24,7 @@ const ethadd = document.getElementById("ethwall").textContent;
 const dogeadd = document.getElementById("dogewall").textContent;
 
 // Watch for click on BTC wallet address
-document.getElementById("btcwall").addEventListener("click", function(){
+ document.getElementById("btcwall").addEventListener("click", function(){
         // Copy BTC address to clipboard
         navigator.clipboard.writeText(btcadd);
         // Display alert to confirm the address was added to clipboard
@@ -47,3 +46,89 @@ document.getElementById("dogewall").addEventListener("click", function(){
         // Display alert to confirm the address was added to clipboard
         alert("DOGE address copied to clipboard");
 });
+
+//
+// Display crypto QR code when link is clicked
+//
+// Prevent clicks on QR codes from functioning
+document.querySelector("#btc-qr-link a").addEventListener("click", function(event){
+  event.preventDefault()
+});
+document.querySelector("#eth-qr-link a").addEventListener("click", function(event){
+  event.preventDefault()
+});
+document.querySelector("#doge-qr-link a").addEventListener("click", function(event){
+  event.preventDefault()
+});
+
+// Watch for click on BTC QR code link
+document.querySelector("#btc-qr-link a").addEventListener("click", function(){
+        // Hide all other QR codes
+        if (document.contains(document.querySelector("#eth-js-qr"))) {
+            document.querySelector("#eth-js-qr").remove();
+	}
+	if (document.contains(document.querySelector("#doge-js-qr"))) {
+            document.querySelector("#doge-js-qr").remove();
+	}
+        // Display BTC QR code
+        if (document.contains(document.querySelector("#btc-js-qr"))) {
+            document.querySelector("#btc-js-qr").remove();
+	} else {
+	document.querySelector("#btcwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"btc-js-qr\"><img src=\"images/crypto/btc-qr.png\"></span>");
+	setTimeout(() => {
+  		document.querySelector("#btc-qr-link").scrollIntoView({ behavior: "smooth" });
+		}, 150);
+	}
+});
+
+// Watch for click on ETH QR code link
+document.querySelector("#eth-qr-link a").addEventListener("click", function(){
+        // Hide all other QR codes
+        if (document.contains(document.querySelector("#btc-js-qr"))) {
+            document.querySelector("#btc-js-qr").remove();
+	}
+	if (document.contains(document.querySelector("#doge-js-qr"))) {
+            document.querySelector("#doge-js-qr").remove();
+	}
+        // Display ETH QR code
+        if (document.contains(document.querySelector("#eth-js-qr"))) {
+            document.querySelector("#eth-js-qr").remove();
+	} else {
+	document.querySelector("#ethwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"eth-js-qr\"><img src=\"images/crypto/eth-qr.png\"></span>");
+	setTimeout(() => {
+  		document.querySelector("#eth-qr-link").scrollIntoView({ behavior: "smooth" });
+		}, 150);
+	}
+});
+
+// Watch for click on DOGE QR code link
+document.querySelector("#doge-qr-link a").addEventListener("click", function(){
+        // Hide all other QR codes
+        if (document.contains(document.querySelector("#btc-js-qr"))) {
+            document.querySelector("#btc-js-qr").remove();
+	}
+	if (document.contains(document.querySelector("#eth-js-qr"))) {
+            document.querySelector("#eth-js-qr").remove();
+	}
+        // Display DOGE QR code
+        if (document.contains(document.querySelector("#doge-js-qr"))) {
+            document.querySelector("#doge-js-qr").remove();
+	} else {
+	document.querySelector("#dogewall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"doge-js-qr\"><img src=\"images/crypto/doge-qr.png\"></span>");
+	setTimeout(() => {
+  		document.querySelector("#doge-qr-link").scrollIntoView({ behavior: "smooth" });
+		}, 150);
+	}
+});
+
+// An attempt at replacing the browser alert with something nicer
+// Watch for click on BTC wallet address
+//document.getElementById("btcwall").addEventListener("click", function(){
+//        // Copy BTC address to clipboard
+//        navigator.clipboard.writeText(btcadd);
+//        // Display alert to confirm the address was added to clipboard
+//        btcwall.insertAdjacentHTML("afterend", "<span id=\"btc-js-copy\" class=\"button button-v4v\" role=\"button\"><img class=\"icon\" aria-hidden=\"true\" src=\"images/icons/generic-bolt-icon.svg\" alt=\"\">Copied to Clipboard</span>");
+//        setTimeout(() => {
+//  		document.querySelector("#btc-js-copy").remove();
+//		}, 10000);
+//});

css/style.css

@@ -3,12 +3,12 @@
 
 @font-face {
     font-family: "IBM Plex Sans";
-    src: url(fonts/IBMPlexSans.ttf)
+    src: url(../fonts/IBMPlexSans.ttf)
 }
 
 @font-face {
     font-family: "IBM Plex Mono";
-    src: url(fonts/IBMPlexMono.ttf)
+    src: url(../fonts/IBMPlexMono.ttf)
 }
 
 /*
@@ -611,5 +611,21 @@ details:not([open]) {
 /* /end Fix v4v details block hover and open styles */
 
 p.value-explainer {
-  margin-top: 16px;
+  margin-top: 2rem;
+}
+
+details.value-block ul li {
+    margin-bottom:32px
+}
+details.value-block ul li img {
+    margin-left:auto;
+    margin-right:auto;
+}
+
+span.button.button-v4v {
+    margin-bottom:0;
+}
+
+span.crypto-js-qr img {
+    width: 150px;
 }

index.html

@@ -11,7 +11,7 @@
     <meta name="keywords" content="Mike Rockwell, Writer, Blogging, Happiness Engineer, Automattic">
     <meta rel="canonical" href="https://mdrockwell.net">
     <meta name="author" content="Mike Rockwell">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/min.css">
     <!-- Open Graph Tags -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Mike Rockwell" />
@@ -28,6 +28,7 @@
   </head>
 
 <body id="top" itemtype="https://schema.org/ProfilePage" itemscope>
+
     	<meta itemprop="dateModified" content="2025-07-24T16:00:00-05:00" />
 
     <div class="container" itemprop="mainEntity" itemtype="https://schema.org/Person" itemscope>
@@ -74,9 +75,9 @@
                 <a class="button button-paypal" href="https://www.paypal.com/donate/?business=LXMQTRPCCLAEG&no_recurring=0&item_name=Support+Initial+Charge%2C+%23OpenWeb%2C+and+my+other+projects+with+value+for+value.&currency_code=USD" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
                 
                 <ul>
-				          <li><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code><br>&nbsp;</li>
+				          <li id="btc-qr-link"><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code></li>
-				          <li><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code><br>&nbsp;</li>
+				          <li id="eth-qr-link"><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code></li>
-				          <li><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
+				          <li id="doge-qr-link"><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
 			          </ul>
               </details>
       </div>