vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 03:23:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip(22w7a): add card backdrop-filter

Browse source
This commit is contained in:
Victor Westerlund 2022-02-14 08:41:38 +01:00
parent a610af6ce6
commit bb0d98c560
5 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/assets/css/style.css
View file

@ -64,7 +64,7 @@ body {
}
body > div {
padding: var(--padding);
padding: calc(var(--padding) / 2);
}
/* --- */
@ -72,10 +72,11 @@ body > div {
#intro {
--font-tar: 13vw;
--font-max: 6vh;
padding: calc(var(--padding) / 2);
}
#intro a {
padding: 15px 30px;
padding: 17px 40px;
border-radius: 100px;
border: solid 4px rgba(var(--color-contrast), .3);
margin: var(--padding) 0;
@ -97,15 +98,16 @@ body > div {
}
#card {
--portrait-size: 128px;
--portrait-size: calc(128px, 15vw, 11vh);
gap: var(--padding);
position: relative;
max-width: 500px;
background-color: rgb(var(--color-base));
max-width: 600px;
padding: var(--padding);
padding-top: calc(var(--portrait-size) - (var(--padding) / 2));
border-radius: 18px;
backdrop-filter: saturate(100) brightness(.3);
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
#card > img {
@ -114,14 +116,15 @@ body > div {
position: absolute;
border-radius: 100%;
top: calc((var(--portrait-size) / 2) * -1);
box-shadow: 0 0 0 15px rgb(var(--color-base));
box-shadow: 0 10px 20px rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23);
}
#card a {
width: 100%;
padding: 15px 0;
padding: 17px 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);
}
/* -- Media Queries -- */
@ -133,6 +136,7 @@ body > div {
#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);
}
}

2
public/assets/js/modules/Background.mjs
View file

@ -8,7 +8,7 @@ export default class Background {
this.image = null;
this.target = target ? target : document.body;
this.updateBg = setInterval(() => this.randBg(), 2000);
this.updateBg = setInterval(() => this.randBg(), 5000);
}
// Update the target CSS background

2
public/assets/js/modules/Glitch.mjs
View file

@ -32,6 +32,6 @@ export default class Glitch extends Background {
glitch() {
const image = this.image.replaceAll(this.randStr(), this.randStr());
this.setBg(image);
this.interval.next = this.randInt(100, 3500);
this.interval.next = this.randInt(1500, 5000);
}
}

4
public/assets/js/search.mjs
View file

@ -1,4 +0,0 @@
import { default as Glitch } from "./modules/Glitch.mjs";
const image = "";
const glitch = new Glitch()

1
public/index.html
View file

@ -5,6 +5,7 @@
<title>Victor Westerlund</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<meta name="theme-color" content="#000000">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">