mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
dev21w37a
This commit is contained in:
parent
78f2732f3d
commit
1209187148
6 changed files with 104 additions and 34 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 →</p>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="button phantom" data-action="newCard" data-value="contact">
|
||||
<p>contact me</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue