From 23b57038b5876075949f3a04cc5c2ace70ddc309 Mon Sep 17 00:00:00 2001
From: Leonard Goldstein <leonard-goldstein@outlook.de>
Date: Wed, 4 Mar 2020 07:37:36 +0100
Subject: [PATCH 1/2] css bg to mask, fixate mobile background position

because it stuttered
---
 .../card--projects__background.css            | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/blocks/card/card--projects__background/card--projects__background.css b/blocks/card/card--projects__background/card--projects__background.css
index f3944d2..71f7031 100644
--- a/blocks/card/card--projects__background/card--projects__background.css
+++ b/blocks/card/card--projects__background/card--projects__background.css
@@ -1,35 +1,58 @@
+.card--projects__background {
+    --__bg-size: var(--_bg-size, var(--_w) auto);
+    --_pos: var(--projects--scroll-top, 0) 0;
+
+    background-color: var(--c1);
+    -webkit-mask: 
+        var(--_card-background) repeat 
+        var(--_pos) /
+        var(--__bg-size);
+    mask:
+        var(--_card-background) repeat 
+        var(--_pos) /
+        var(--__bg-size);
+    -webkit-mask-composite: xor;
+    mask-composite: subtract;
+}
+
+@media screen and (orientation: portrait) {
+    .card--projects__background {
+        --_pos: 0 0;
+    }
+}
+
 .card--projects__background--portfolio {
-    background: url("/blocks/card/card--projects__background/goldstein web.svg") repeat;
-    background-size: calc(0.3 * var(--_w)) auto;
+    --_card-background: url("/blocks/card/card--projects__background/goldstein web.svg");
+    --_bg-size: calc(0.3 * var(--_w)) auto;
 }
 
 .card--projects__background--sincos {
-    background: url("/blocks/card/card--projects__background/sincos.svg") repeat;
-    background-size: calc(0.3 * var(--_w)) auto;
+    --_card-background: url("/blocks/card/card--projects__background/sincos.svg");
+    --_bg-size: calc(0.3 * var(--_w)) auto;
 }
 
 .card--projects__background--cyp {
-    background: url("/blocks/card/card--projects__background/cyp.svg") repeat;
-    background-size: calc(var(--_w)) auto;
+    --_card-background: url("/blocks/card/card--projects__background/cyp.svg");
+    --_bg-size: calc(var(--_w)) auto;
 }
 
 .card--projects__background--todograph {
-    background: url("/blocks/card/card--projects__background/todograph.svg") repeat;
-    background-size: calc(0.5 * var(--_w)) auto;
+    --_card-background: url("/blocks/card/card--projects__background/todograph.svg");
+    --_bg-size: calc(0.5 * var(--_w)) auto;
 }
 
 .card--projects__background--bfs {
-    background: url("/blocks/card/card--projects__background/bfs.svg") repeat;
-    background-size: calc(0.75 * var(--_w)) auto;
+    --_card-background: url("/blocks/card/card--projects__background/bfs.svg");
+    --_bg-size: calc(0.75 * var(--_w));
 }
 
 .card--projects__background--empty {
-    background:
+    --_card-background:
         repeating-linear-gradient(
             45deg,
             var(--c1) 0,
-            var(--c0) 40px,
+            transparent 40px,
             var(--c1) 80px
         );
-    background-size: 114px;
+    --_bg-size: 114px;
 }
\ No newline at end of file

From f9630bed31c0e47b5a9e50dd9019415a78ef7ec1 Mon Sep 17 00:00:00 2001
From: Leonard Goldstein <leonard-goldstein@outlook.de>
Date: Wed, 4 Mar 2020 08:01:00 +0100
Subject: [PATCH 2/2] hover fx on project bg

---
 blocks/card/CardMouseShadowed.js                 |  2 +-
 .../card--projects__background.css               | 16 +++++++++++++++-
 blocks/projects/projects.css                     |  8 --------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/blocks/card/CardMouseShadowed.js b/blocks/card/CardMouseShadowed.js
index 10ade6d..64360d5 100644
--- a/blocks/card/CardMouseShadowed.js
+++ b/blocks/card/CardMouseShadowed.js
@@ -24,7 +24,7 @@ export default class CardMouseShadowed extends MC {
         super(
             document.body,
             ['card'],
-            `.card${modifier} > .card__inner`
+            `.card${modifier}`
         );
 
         /**
diff --git a/blocks/card/card--projects__background/card--projects__background.css b/blocks/card/card--projects__background/card--projects__background.css
index 71f7031..1e32835 100644
--- a/blocks/card/card--projects__background/card--projects__background.css
+++ b/blocks/card/card--projects__background/card--projects__background.css
@@ -2,7 +2,21 @@
     --__bg-size: var(--_bg-size, var(--_w) auto);
     --_pos: var(--projects--scroll-top, 0) 0;
 
-    background-color: var(--c1);
+    background-image:
+        radial-gradient(
+            circle at
+            calc(
+                var(--card__inner--mouse-shadow-left, -100%)
+                / var(--_hover-scale)
+            )
+            calc(
+                var(--card__inner--mouse-shadow-top, -100%) /
+                var(--_hover-scale)
+            ),
+            var(--_c0) 0,
+            var(--_c1) calc(0.1 * var(--_w))
+        );
+
     -webkit-mask: 
         var(--_card-background) repeat 
         var(--_pos) /
diff --git a/blocks/projects/projects.css b/blocks/projects/projects.css
index b68bb0a..e58221f 100644
--- a/blocks/projects/projects.css
+++ b/blocks/projects/projects.css
@@ -37,10 +37,6 @@
     width: var(--h);
 }
 
-.projects__project-card .card--projects__background {
-    background-position: var(--projects--scroll-top) 0;
-}
-
 .projects__project-card:last-of-type {
     margin-bottom: 0;
 }
@@ -146,8 +142,4 @@
         margin-left: 0;
         width: auto;
     }
-
-    .projects__project-card .card--projects__background {
-        background-position: 0 var(--projects--scroll-top);
-    }
 }