From bb0d98c5601ec6e3f1d9f6ec8a011cb887ff878a Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor@victorwesterlund.com>
Date: Mon, 14 Feb 2022 08:41:38 +0100
Subject: [PATCH] wip(22w7a): add card backdrop-filter

---
 public/assets/css/style.css             | 18 +++++++++++-------
 public/assets/js/modules/Background.mjs |  2 +-
 public/assets/js/modules/Glitch.mjs     |  2 +-
 public/assets/js/search.mjs             |  4 ----
 public/index.html                       |  1 +
 5 files changed, 14 insertions(+), 13 deletions(-)
 delete mode 100755 public/assets/js/search.mjs

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index e0773e0..883c9b1 100755
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -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);
     }
 }
 
diff --git a/public/assets/js/modules/Background.mjs b/public/assets/js/modules/Background.mjs
index fe163d5..4d1e686 100644
--- a/public/assets/js/modules/Background.mjs
+++ b/public/assets/js/modules/Background.mjs
@@ -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
diff --git a/public/assets/js/modules/Glitch.mjs b/public/assets/js/modules/Glitch.mjs
index 62d54e2..d1bc3c2 100755
--- a/public/assets/js/modules/Glitch.mjs
+++ b/public/assets/js/modules/Glitch.mjs
@@ -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);
 	}
 }
\ No newline at end of file
diff --git a/public/assets/js/search.mjs b/public/assets/js/search.mjs
deleted file mode 100755
index 60c35b1..0000000
--- a/public/assets/js/search.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { default as Glitch } from "./modules/Glitch.mjs";
-
-const image = "";
-const glitch = new Glitch()
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 9378ced..9a516dc 100755
--- a/public/index.html
+++ b/public/index.html
@@ -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)">