vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 11:33: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 { body > div {
padding: var(--padding); padding: calc(var(--padding) / 2);
} }
/* --- */ /* --- */
@ -72,10 +72,11 @@ body > div {
#intro { #intro {
--font-tar: 13vw; --font-tar: 13vw;
--font-max: 6vh; --font-max: 6vh;
padding: calc(var(--padding) / 2);
} }
#intro a { #intro a {
padding: 15px 30px; padding: 17px 40px;
border-radius: 100px; border-radius: 100px;
border: solid 4px rgba(var(--color-contrast), .3); border: solid 4px rgba(var(--color-contrast), .3);
margin: var(--padding) 0; margin: var(--padding) 0;
@ -97,15 +98,16 @@ body > div {
} }
#card { #card {
--portrait-size: 128px; --portrait-size: calc(128px, 15vw, 11vh);
gap: var(--padding); gap: var(--padding);
position: relative; position: relative;
max-width: 500px; max-width: 600px;
background-color: rgb(var(--color-base));
padding: var(--padding); padding: var(--padding);
padding-top: calc(var(--portrait-size) - (var(--padding) / 2)); padding-top: calc(var(--portrait-size) - (var(--padding) / 2));
border-radius: 18px; 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 { #card > img {
@ -114,14 +116,15 @@ body > div {
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
top: calc((var(--portrait-size) / 2) * -1); 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 { #card a {
width: 100%; width: 100%;
padding: 15px 0; padding: 17px 0;
border-radius: 9px; border-radius: 9px;
background-color: rgba(var(--color-contrast), .13); 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 -- */ /* -- Media Queries -- */
@ -133,6 +136,7 @@ body > div {
#card a:hover { #card a:hover {
background-color: rgba(var(--color-contrast), .2); 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.image = null;
this.target = target ? target : document.body; this.target = target ? target : document.body;
this.updateBg = setInterval(() => this.randBg(), 2000); this.updateBg = setInterval(() => this.randBg(), 5000);
} }
// Update the target CSS background // 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() { glitch() {
const image = this.image.replaceAll(this.randStr(), this.randStr()); const image = this.image.replaceAll(this.randStr(), this.randStr());
this.setBg(image); 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> <title>Victor Westerlund</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack web developer from Stockholm, Sweden."> <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:no-preference)">
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)"> <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)"> <link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">