dev21w37a

public/assets/css/modal.css

@@ -1,26 +1,36 @@
 /* -- Transition overrides -- */
 
 body main .screen {
-	transition: var(--transition) transform;
+	transition: var(--transition) transform, var(--transition) filter;
 	transition-delay: calc(var(--transition) / 2);
 }
 
+.modal.active + .modal:nth-child(n+2),
 body .modal.active ~ main .screen {
 	transition: var(--transition);
 	transition-delay: 1ms;
 	transform: scale(.95);
-	opacity: .5;
 	pointer-events: none;
+	filter: blur(2px);
 }
 
 .modal.active + .modal {
 	z-index: 10;
 }
 
+.modal:first-child {
+	z-index: 15;
+}
+
+.modal.active + .modal:nth-child(n+2) {
+	filter: blur(2px) brightness(.5);
+	z-index: 5;
+}
+
 /* -- Boilerplate -- */
 
 .modal {
-	transition: var(--transition) background-color;
+	transition: var(--transition) transform, var(--transition) filter;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -29,13 +39,11 @@ body .modal.active ~ main .screen {
 	z-index: 10;
 	pointer-events: none;
 	box-sizing: border-box;
-	background-color: rgba(var(--palette-inverted),0);
 	padding: var(--padding);
 }
 
 .modal.active {
 	pointer-events: all;
-	background-color: rgba(var(--palette-inverted),.4);
 }
 
 .modal .button {
@@ -117,11 +125,11 @@ body .modal.active ~ main .screen {
 
 .modal.card .inner {
 	align-self: flex-end;
-	transform: translateY(1vh);
+	transform: scale(.99) translateY(1vh);
 }
 
 .modal.card.active .inner {
-	transform: translateY(0);
+	transform: scale(1) translateY(0);
 }
 
 .modal.card .button[data-action="close"] {
@@ -141,18 +149,7 @@ body .modal.active ~ main .screen {
 @media (min-aspect-ratio: 14/9) {
 	/* -- Transition overrides -- */
 
-	body main .screen {
-		transition: unset;
-	}
-	
-	body .modal.active ~ main .screen {
-		transition: unset;
-		transform: unset;
-		opacity: unset;
-	}
-
 	body .modal {
-		transition: var(--transition);
 		transition-delay: calc(var(--transition) / 2);
 	}
 	
@@ -164,6 +161,7 @@ body .modal.active ~ main .screen {
 
 	.modal.card .inner {
 		align-self: unset;
+		transform: scale(.99) translateY(10px);
 	}
 
 	.modal.dialog .inner {

public/assets/css/style.css

@@ -78,6 +78,7 @@ body {
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background-color: var(--swatch-background);
 }
 
 main {
@@ -168,6 +169,7 @@ body.dark .screen.dark {
     gap: var(--padding);
 }
 
+a.button,
 p.button {
     padding: unset;
     display: inline;
@@ -325,14 +327,14 @@ header .logo {
     flex: 0;
 }
 
-.screen.menu .button[data-action="openContactCard"] {
+.screen.menu .button[data-value="contact"] {
     margin-top: auto;
 }
 
 /* -- Media queries -- */
 
 /* Wide-screen */
-@media (min-aspect-ratio: 14/9) {
+@media (min-aspect-ratio: 14/9) and (min-height: 300px) {
     /* -- Cornerstones -- */
 
     header {
@@ -367,9 +369,72 @@ header .logo {
 
     /* -- Screens > Menu -- */
 
+    body:not(.dark) .screen.menu {
+        /* Component colors */
+        --palette-background: 255,255,255;
+        --palette-inverted: 0,0,0;
+        --palette-contrast: 33,33,33;
+        --palette-accent: 33,33,33;
+
+        /* Compiled colors */
+        --swatch-background: rgb(var(--palette-background));
+        --swatch-inverted: rgb(var(--palette-inverted));
+        --swatch-contrast: rgb(var(--palette-contrast));
+        --swatch-accent: rgb(var(--palette-accent));
+
+        background: var(--background-pattern);
+        background-size: var(--background-pattern-size);
+    }
+
     .screen.menu .content {
         padding-top: calc(var(--padding) * 1.5);
     }
+
+    .screen.menu .wide {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: clamp(var(--padding),5vw,10vh);
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .screen.menu .wide .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--padding);
+    }
+
+    .screen.menu .wide .logo {
+        --size: clamp(20px,3.5vw,10vh);
+    }
+
+    .screen.menu .wide h1 {
+        margin: 0;
+        font-size: clamp(20px,3vw,10vh);
+    }
+
+    .screen.menu .wide p {
+        margin: 0;
+        font-size: clamp(20px,2vw,2vh);
+    }
+
+    .screen.menu .wide nav {
+        display: flex;
+        margin-top: calc(var(--padding) * 2);
+        gap: clamp(var(--padding),3vw,500px);
+    }
+
+    .screen.menu .wide nav p {
+        display: inline-block;
+        padding: var(--padding);
+    }
+
+    .screen.menu .button[data-value="contact"] {
+        display: none;
+    }
 }
 
 /* Narrow display */

public/assets/js/script.js

@@ -33,7 +33,7 @@ const interactions = {
 		// Remove transition CSS when finished. Wonky resize effects otherwise
 		setTimeout(() => menu.style.removeProperty("transition"),transition + 1);
 	},
-	openContactCard: () => {
+	newCard: (event) => {
 		const module = import("./modules/Modals.mjs");
 		const interactions = {
 			getContact: (event) => {
@@ -59,7 +59,7 @@ const interactions = {
 
 		module.then(modals => {
 			const card = new modals.Card(interactions);
-			card.openPage("contact");
+			card.openPage(event.target.dataset.value);
 		});
 	}
 }

public/assets/pages/contact_email.html

@@ -29,12 +29,12 @@
 		100% { transform: translateY(calc(var(--padding) * -1)); opacity: 0; }
 	}
 
-	#interaction {
+	a.button {
 		color: var(--swatch-accent);
 		cursor: pointer;
 	}
 
-	#interaction::before {
+	a.button::before {
 		content: "tap ";
 	}
 
@@ -45,7 +45,7 @@
 	}
 
 	@media (pointer: fine) {
-		#interaction::before {
+		a.button::before {
 			content: "click ";
 		}
 	}
@@ -56,7 +56,7 @@
 </div>
 <p></p>
 <h1>hello@victorwesterlund.com</h1>
-<p>You can also <a id="interaction" href="mailto:hello@victorwesterlund.com?subject=Hello Victor!">here</a> to send a mail directly from your mail app</p>
+<p>You can also <a class="button" href="mailto:hello@victorwesterlund.com?subject=Hello Victor!">here</a> to send a mail directly from your mail app</p>
 <p></p>
 <div class="button solid" data-action="copyText">
 	<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H9V4h9v12zM3 15v-2h2v2H3zm0-5.5h2v2H3v-2zM10 20h2v2h-2v-2zm-7-1.5v-2h2v2H3zM5 22c-1.1 0-2-.9-2-2h2v2zm3.5 0h-2v-2h2v2zm5 0v-2h2c0 1.1-.9 2-2 2zM5 6v2H3c0-1.1.9-2 2-2z"/></svg>

public/assets/pages/contact_email_pgp.html

@@ -1,9 +1,6 @@
-<style>
-	
-</style>
 <h1>🔑 PGP Public Key</h1>
 <p></p>
-<h2>5466 B1EB 2F44 6D3D DC34 E9F7 5BE0 CB0B E3BB 69DA</h2>
+<p>5466 B1EB 2F44 6D3D DC34 E9F7 5BE0 CB0B E3BB 69DA</p>
 <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>

public/index.html

@@ -44,11 +44,21 @@
                 <div class="logo"></div>
                 <p>victor westerlund</p>
             </header>
-            <div class="wide">
-                <h1>victor westerlund</h1>
-            </div>
             <div class="content">
-                <div class="button phantom" data-action="openContactCard">
+                <div class="wide">
+                    <div class="logo"></div>
+                    <div class="group">
+                        <h1>victor westerlund</h1>
+                        <p>I create things with code. The things I've created for the public reside as open-source repositories on GitHub, the rest you'll be lucky to hear about some day.</p>
+                        <p>Other topics (seemingly irrelevant to programming) I find facinating include but is in no way limited to astronomy, psychology, sociology, economics, ...</p>
+                    </div>
+                    <nav>
+                        <p class="button" data-action="newCard" data-value="contact_signal">signal</p>
+                        <p class="button" data-action="newCard" data-value="contact_email">email</p>
+                        <p class="button">github&nbsp;→</p>
+                    </nav>
+                </div>
+                <div class="button phantom" data-action="newCard" data-value="contact">
                     <p>contact me</p>
                 </div>
             </div>