Merge pull request #53 from goldst/projects-bg-mask

Projects bg mask

Author: goldst

blocks/card/CardMouseShadowed.js

@@ -24,7 +24,7 @@ export default class CardMouseShadowed extends MC {
         super(
             document.body,
             ['card'],
-            `.card${modifier} > .card__inner`
+            `.card${modifier}`
         );
 
         /**

blocks/card/card--projects__background/card--projects__background.css

@@ -1,35 +1,72 @@
+.card--projects__background {
+    --__bg-size: var(--_bg-size, var(--_w) auto);
+    --_pos: var(--projects--scroll-top, 0) 0;
+
+    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) /
+        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;
 }

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);
-    }
 }