dev21w36f-b

public/assets/css/modal.css

@@ -14,7 +14,7 @@ body .modal.active ~ main .screen {
 }
 
 .modal.active + .modal {
-	z-index: 5;
+	z-index: 10;
 }
 
 /* -- Boilerplate -- */
@@ -154,12 +154,10 @@ body .modal.active ~ main .screen {
 	body .modal {
 		transition: var(--transition);
 		transition-delay: calc(var(--transition) / 2);
-		backdrop-filter: blur(0);
 	}
 	
 	body .modal.active {
 		transition-delay: 1ms;
-		backdrop-filter: blur(10px);
 	}
 
 	/* -- Boilerplate -- */
@@ -167,4 +165,15 @@ body .modal.active ~ main .screen {
 	.modal.card .inner {
 		align-self: unset;
 	}
+
+	.modal.dialog .inner {
+		width: unset;
+		min-width: 100px;
+		max-width: 50vw;
+	}
+
+	.modal.dialog .button {
+		align-self: unset;
+		width: clamp(100px,100%,500px);
+	}
 }

public/assets/css/style.css

@@ -168,6 +168,14 @@ body.dark .screen.dark {
     gap: var(--padding);
 }
 
+p.button {
+    padding: unset;
+    display: inline;
+    font-size: inherit;
+    color: var(--swatch-accent);
+    text-decoration: underline;
+}
+
 .button.solid {
     background-color: var(--swatch-contrast);
     color: var(--swatch-background);

public/assets/js/modules/Modals.mjs

@@ -10,6 +10,19 @@ class Modal extends Interaction {
 		let interactions = {
 			close: () => {
 				this.close();
+			},
+			openPage: (event) => {
+				let modal = undefined;
+				switch(event.target.dataset.type) {
+					case "card":
+						modal = new Card({});
+						break;
+					case "dialog":
+					default:
+						modal = new Dialog({});
+						break;
+				}
+				modal.openPage(event.target.dataset.value);
 			}
 		};
 		// Combine template and incoming interactions into one object

public/assets/js/script.js

@@ -54,12 +54,6 @@ const interactions = {
 					event.target.classList.remove("copied");
 					destroy(copied);
 				},1000);
-			},
-			showPgpKey: () => {
-				module.then(modals => {
-					const dialog = new modals.Dialog();
-					dialog.openPage("contact_email_pgp");
-				});
 			}
 		};
 

public/assets/pages/contact.html

@@ -23,7 +23,7 @@
 	}
 
 	.contact .item img {
-		height: 10vh;
+		height: 8vh;
 	}
 
 	@media (max-width: 300px) {

public/assets/pages/contact_email.html

@@ -50,9 +50,9 @@
 		}
 	}
 </style>
-<div class="button phantom" data-action="showPgpKey">
+<div class="button phantom" data-action="openPage" data-value="contact_email_pgp" data-type="card">
 	<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
-	<p>show PGP key</p>
+	<p>PGP key</p>
 </div>
 <p></p>
 <h1>hello@victorwesterlund.com</h1>

public/assets/pages/contact_email_pgp.html

@@ -2,37 +2,9 @@
 	
 </style>
 <h1>🔑 PGP Public Key</h1>
-<pre>
+<p></p>
------BEGIN PGP PUBLIC KEY BLOCK-----
-
-mQENBF/K6MkBCACkRMhMfYdeNP+M3XQoZHQVJgippQvYZ4QqH6F6brWD5989Xy5W
-kDCvLbmPJ66boqB0dHExswOvMlhfFha65pRmfP6lIoIxZlZKwll1XASP2osS8f6r
-63T7hAbL3V2Dkm49tiH1tk578xGomDrxOrd4izpH4mn9AyBIL4M+5j34bKFVZKQ+
-QfMu7tduF/1oQHfDaXJeLXSfn5cNTy8DlLcLJKUSk4cjabf1D88gMVszqAAC5o1a
-fI0YxoyZ+Fv+CmyrQm2iIZ3+MyDU9JAvoImtlp1h5aNgbFRDi2vKcSlv158Hq97Z
-XlH1ttRZuFZiJzb8iukgUUFi4RORoXWt2rtNABEBAAG0LlZpY3RvciBXZXN0ZXJs
-dW5kIDxoZWxsb0B2aWN0b3J3ZXN0ZXJsdW5kLmNvbT6JATUEEAEIACkFAl/K6MkG
-CwkIBwMCCRBb4MsL47tp2gQVCAIKAxYCAQIZAQIbAwIeAQAAJ5MIAKDl9yHjwTO7
-20sDrPa6ECsSBU/FwkvkWecuauvY19/OqtacNk8dEeiITLeUeBXkvNzN+P0y8hoF
-ABZeir59dsY00iIp8gm03eLalhcblR5jYe3c08HssJH8PksczP3kitRNLvPAf2nU
-BYg3zca5Ka21/4BPRLFb9SAQGxfHyZdy3Poug+o+pokbeK2wLqqfSMtH+waBB6Lg
-2dRXuEnaZorUpNBpsahxastvNehv31Ke41Brvft15VKpO25GKZDPhm0odXMth1/J
-pzWRQtndazY2guB0Ft+5wujv28HFCgVgZn2fKiQVytAetO+/wzPijBkGRvdIE+Zb
-VRd3Nc0mHI65AQ0EX8royQEIALcoWEurmyXD2LoGvR+sYW+YPAPM6KG8KF4cWUn8
-8+kZ6F4FH9OW64di2npYe3x+zR7DgQ1yHXcmalAsP0nN4JWTavLwsSO+JAv8NpL5
-bgDs6fGaEQFl+X4fYOpkBkBmb1JrbnBk1a2u3qsEw8t7+wW1LG9z/Si5+G1KQko8
-x/PEaZ2ZVv7L51ZfIQRnMtl4vL5X23BPVsDywotvuFqlTiSjGP4CR0lVa5CRv3DJ
-FSmHxAxeI0vMMlwbIIUTrtwJR320sZvh2cRiwAXHQXm6l0ojzRnl46mmXnB3N6q9
-PyWOaUgPrMFjT24wtgopIOwbFAT3xTr1Un0FbdeaG9JhdJ8AEQEAAYkBHwQYAQgA
-EwUCX8royQkQW+DLC+O7adoCGwwAAIV/B/9OLYeQOxbXh1/hvW7/oTvN1py8wfFq
-buvQSrb/MZKm6lZgG+kQy3DWjGTi/xvNqDHfBiObFSGso8RHSbHFldzEuMgrgoWW
-/4JH1GDiKOp+rmBxfG30/DzOoFSfVcUfP5r8xNQby4Bh6zJhKPKVB3sZjO8cHNZD
-HcNAqT3Gh5yFzsUna+ZjvPF7iU5RF1YP46dsIdvuo4xFbHpEPoZs7wgZijf+vmKO
-lP61UFvKuXzwcLiI6s919EBJ9+7je8ZAxe6BCaazk+AhxXeokVvDgwQ150DNk4up
-1ftWZI0LHqEpVGNejQ09uu+TdC/ISy/Ti0XKlJDER1eUL577YRUl876Y
-=2qWm
------END PGP PUBLIC KEY BLOCK-----</pre>
 <h2>5466 B1EB 2F44 6D3D DC34 E9F7 5BE0 CB0B E3BB 69DA</h2>
+<p class="button" data-action="openPage" data-value="contact_email_pgp_view" data-type="dialog">show key</p>
 <a href="https://storage.googleapis.com/public.victorwesterlund.com/publickey.gpg"><div class="button solid">
 	<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/></svg>
 	<p>download .gpg</p>

public/assets/pages/contact_email_pgp_view.html

@@ -0,0 +1,30 @@
+<pre>
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQENBF/K6MkBCACkRMhMfYdeNP+M3XQoZHQVJgippQvYZ4QqH6F6brWD5989Xy5W
+kDCvLbmPJ66boqB0dHExswOvMlhfFha65pRmfP6lIoIxZlZKwll1XASP2osS8f6r
+63T7hAbL3V2Dkm49tiH1tk578xGomDrxOrd4izpH4mn9AyBIL4M+5j34bKFVZKQ+
+QfMu7tduF/1oQHfDaXJeLXSfn5cNTy8DlLcLJKUSk4cjabf1D88gMVszqAAC5o1a
+fI0YxoyZ+Fv+CmyrQm2iIZ3+MyDU9JAvoImtlp1h5aNgbFRDi2vKcSlv158Hq97Z
+XlH1ttRZuFZiJzb8iukgUUFi4RORoXWt2rtNABEBAAG0LlZpY3RvciBXZXN0ZXJs
+dW5kIDxoZWxsb0B2aWN0b3J3ZXN0ZXJsdW5kLmNvbT6JATUEEAEIACkFAl/K6MkG
+CwkIBwMCCRBb4MsL47tp2gQVCAIKAxYCAQIZAQIbAwIeAQAAJ5MIAKDl9yHjwTO7
+20sDrPa6ECsSBU/FwkvkWecuauvY19/OqtacNk8dEeiITLeUeBXkvNzN+P0y8hoF
+ABZeir59dsY00iIp8gm03eLalhcblR5jYe3c08HssJH8PksczP3kitRNLvPAf2nU
+BYg3zca5Ka21/4BPRLFb9SAQGxfHyZdy3Poug+o+pokbeK2wLqqfSMtH+waBB6Lg
+2dRXuEnaZorUpNBpsahxastvNehv31Ke41Brvft15VKpO25GKZDPhm0odXMth1/J
+pzWRQtndazY2guB0Ft+5wujv28HFCgVgZn2fKiQVytAetO+/wzPijBkGRvdIE+Zb
+VRd3Nc0mHI65AQ0EX8royQEIALcoWEurmyXD2LoGvR+sYW+YPAPM6KG8KF4cWUn8
+8+kZ6F4FH9OW64di2npYe3x+zR7DgQ1yHXcmalAsP0nN4JWTavLwsSO+JAv8NpL5
+bgDs6fGaEQFl+X4fYOpkBkBmb1JrbnBk1a2u3qsEw8t7+wW1LG9z/Si5+G1KQko8
+x/PEaZ2ZVv7L51ZfIQRnMtl4vL5X23BPVsDywotvuFqlTiSjGP4CR0lVa5CRv3DJ
+FSmHxAxeI0vMMlwbIIUTrtwJR320sZvh2cRiwAXHQXm6l0ojzRnl46mmXnB3N6q9
+PyWOaUgPrMFjT24wtgopIOwbFAT3xTr1Un0FbdeaG9JhdJ8AEQEAAYkBHwQYAQgA
+EwUCX8royQkQW+DLC+O7adoCGwwAAIV/B/9OLYeQOxbXh1/hvW7/oTvN1py8wfFq
+buvQSrb/MZKm6lZgG+kQy3DWjGTi/xvNqDHfBiObFSGso8RHSbHFldzEuMgrgoWW
+/4JH1GDiKOp+rmBxfG30/DzOoFSfVcUfP5r8xNQby4Bh6zJhKPKVB3sZjO8cHNZD
+HcNAqT3Gh5yFzsUna+ZjvPF7iU5RF1YP46dsIdvuo4xFbHpEPoZs7wgZijf+vmKO
+lP61UFvKuXzwcLiI6s919EBJ9+7je8ZAxe6BCaazk+AhxXeokVvDgwQ150DNk4up
+1ftWZI0LHqEpVGNejQ09uu+TdC/ISy/Ti0XKlJDER1eUL577YRUl876Y
+=2qWm
+-----END PGP PUBLIC KEY BLOCK-----</pre>