rafactor: pieces changes: background image to mask

refusado · Aug 3, 2023 · 5327990 · 5327990
1 parent 908b932
commit 5327990
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 74 deletions.
diff --git a/css/block.css b/css/block.css
@@ -1,6 +1,7 @@
 #content {
   --block-size: 140px;
   --outline-color: var(--c-dark);
+  --shape-color: var(--outline-color);
 }
 
 .block-container {
@@ -112,11 +113,11 @@
 }
 
 .tile {
-  scroll-snap-align: start;
   width: 100%;
   height: 100%;
-  background: no-repeat center;
-  background-size: cover;
+  background-color: var(--shape-color);
+  scroll-snap-align: start;
+  mask-size: cover;
 }
 
 @-webkit-keyframes container-flip {

diff --git a/css/level/level-0.css b/css/level/level-0.css
@@ -7,27 +7,27 @@
 #b02 .tile:nth-child(4),
 #b03 .tile:nth-child(1),
 #b04 .tile:nth-child(3) {
-  background-image: var(--star-1);
+  mask-image: var(--star-1);
 }
 
 #b01 .tile:nth-child(1),
 #b02 .tile:nth-child(3),
 #b03 .tile:nth-child(4),
 #b04 .tile:nth-child(2) {
-  background-image: var(--star-2);
+  mask-image: var(--star-2);
 }
 
 #b01 .tile:nth-child(3),
 #b02 .tile:nth-child(2),
 #b03 .tile:nth-child(3),
 #b04 .tile:nth-child(1) {
-  background-image: var(--star-3);
+  mask-image: var(--star-3);
 }
 
 #b01 .tile:nth-child(2),
 #b02 .tile:nth-child(1),
 #b03 .tile:nth-child(2),
 #b04 .tile:nth-child(4) {
-  background-image: var(--star-4);
+  mask-image: var(--star-4);
 }
 
diff --git a/css/level/level-1.css b/css/level/level-1.css
@@ -11,7 +11,7 @@
 #b16 .tile:nth-child(5),
 #b17 .tile:nth-child(8),
 #b18 .tile:nth-child(1) {
-  background-image: var(--hexagon-1);
+  mask-image: var(--hexagon-1);
 }
 
 #b11 .tile:nth-child(8),
@@ -22,7 +22,7 @@
 #b16 .tile:nth-child(2),
 #b17 .tile:nth-child(5),
 #b18 .tile:nth-child(6) {
-  background-image: var(--hexagon-2);
+  mask-image: var(--hexagon-2);
 }
 
 #b11 .tile:nth-child(3),
@@ -33,7 +33,7 @@
 #b16 .tile:nth-child(6),
 #b17 .tile:nth-child(4),
 #b18 .tile:nth-child(5) {
-  background-image: var(--hexagon-3);
+  mask-image: var(--hexagon-3);
 }
 
 #b11 .tile:nth-child(6),
@@ -44,7 +44,7 @@
 #b16 .tile:nth-child(1),
 #b17 .tile:nth-child(2),
 #b18 .tile:nth-child(4) {
-  background-image: var(--hexagon-4);
+  mask-image: var(--hexagon-4);
 }
 
 #b11 .tile:nth-child(4),
@@ -55,7 +55,7 @@
 #b16 .tile:nth-child(3),
 #b17 .tile:nth-child(7),
 #b18 .tile:nth-child(7) {
-  background-image: var(--hexagon-5);
+  mask-image: var(--hexagon-5);
 }
 
 #b11 .tile:nth-child(1),
@@ -66,7 +66,7 @@
 #b16 .tile:nth-child(7),
 #b17 .tile:nth-child(3),
 #b18 .tile:nth-child(2) {
-  background-image: var(--hexagon-6);
+  mask-image: var(--hexagon-6);
 }
 
 #b11 .tile:nth-child(5),
@@ -77,7 +77,7 @@
 #b16 .tile:nth-child(8),
 #b17 .tile:nth-child(6),
 #b18 .tile:nth-child(3) {
-  background-image: var(--hexagon-7);
+  mask-image: var(--hexagon-7);
 }
 
 #b11 .tile:nth-child(2),
@@ -88,6 +88,6 @@
 #b16 .tile:nth-child(4),
 #b17 .tile:nth-child(1),
 #b18 .tile:nth-child(8) {
-  background-image: var(--hexagon-8);
+  mask-image: var(--hexagon-8);
 }
 
diff --git a/css/level/level-2.css b/css/level/level-2.css
@@ -12,7 +12,7 @@
 #b27 .tile:nth-child(7),
 #b28 .tile:nth-child(8),
 #b29 .tile:nth-child(1) {
-  background-image: var(--octagon-1);
+  mask-image: var(--octagon-1);
 }
 
 #b21 .tile:nth-child(7),
@@ -24,7 +24,7 @@
 #b27 .tile:nth-child(1),
 #b28 .tile:nth-child(7),
 #b29 .tile:nth-child(5) {
-  background-image: var(--octagon-2);
+  mask-image: var(--octagon-2);
 }
 
 #b21 .tile:nth-child(1),
@@ -36,7 +36,7 @@
 #b27 .tile:nth-child(4),
 #b28 .tile:nth-child(4),
 #b29 .tile:nth-child(7) {
-  background-image: var(--octagon-3);
+  mask-image: var(--octagon-3);
 }
 
 #b21 .tile:nth-child(3),
@@ -48,7 +48,7 @@
 #b27 .tile:nth-child(5),
 #b28 .tile:nth-child(3),
 #b29 .tile:nth-child(3) {
-  background-image: var(--octagon-4);
+  mask-image: var(--octagon-4);
 }
 
 #b21 .tile:nth-child(5),
@@ -60,7 +60,7 @@
 #b27 .tile:nth-child(2),
 #b28 .tile:nth-child(2),
 #b29 .tile:nth-child(6) {
-  background-image: var(--octagon-5);
+  mask-image: var(--octagon-5);
 }
 
 #b21 .tile:nth-child(6),
@@ -72,7 +72,7 @@
 #b27 .tile:nth-child(6),
 #b28 .tile:nth-child(9),
 #b29 .tile:nth-child(2) {
-  background-image: var(--octagon-6);
+  mask-image: var(--octagon-6);
 }
 
 #b21 .tile:nth-child(2),
@@ -84,7 +84,7 @@
 #b27 .tile:nth-child(3),
 #b28 .tile:nth-child(1),
 #b29 .tile:nth-child(8) {
-  background-image: var(--octagon-7);
+  mask-image: var(--octagon-7);
 }
 
 #b21 .tile:nth-child(4),
@@ -96,7 +96,7 @@
 #b27 .tile:nth-child(8),
 #b28 .tile:nth-child(6),
 #b29 .tile:nth-child(9) {
-  background-image: var(--octagon-8);
+  mask-image: var(--octagon-8);
 }
 
 #b21 .tile:nth-child(8),
@@ -108,6 +108,6 @@
 #b27 .tile:nth-child(9),
 #b28 .tile:nth-child(5),
 #b29 .tile:nth-child(4) {
-  background-image: var(--octagon-9);
+  mask-image: var(--octagon-9);
 }
 
diff --git a/css/level/level-3.css b/css/level/level-3.css
@@ -15,7 +15,7 @@
 #b310 .tile:nth-child(10),
 #b311 .tile:nth-child(12),
 #b312 .tile:nth-child(6) {
-  background-image: var(--cube-1);
+  mask-image: var(--cube-1);
 }
 
 #b31 .tile:nth-child(6),
@@ -30,7 +30,7 @@
 #b310 .tile:nth-child(1),
 #b311 .tile:nth-child(3),
 #b312 .tile:nth-child(5) {
-  background-image: var(--cube-2);
+  mask-image: var(--cube-2);
 }
 
 #b31 .tile:nth-child(10),
@@ -45,7 +45,7 @@
 #b310 .tile:nth-child(2),
 #b311 .tile:nth-child(10),
 #b312 .tile:nth-child(2) {
-  background-image: var(--cube-3);
+  mask-image: var(--cube-3);
 }
 
 #b31 .tile:nth-child(5),
@@ -60,7 +60,7 @@
 #b310 .tile:nth-child(8),
 #b311 .tile:nth-child(8),
 #b312 .tile:nth-child(9) {
-  background-image: var(--cube-4);
+  mask-image: var(--cube-4);
 }
 
 #b31 .tile:nth-child(9),
@@ -75,7 +75,7 @@
 #b310 .tile:nth-child(11),
 #b311 .tile:nth-child(6),
 #b312 .tile:nth-child(4) {
-  background-image: var(--cube-5);
+  mask-image: var(--cube-5);
 }
 
 #b31 .tile:nth-child(1),
@@ -90,7 +90,7 @@
 #b310 .tile:nth-child(5),
 #b311 .tile:nth-child(9),
 #b312 .tile:nth-child(3) {
-  background-image: var(--cube-6);
+  mask-image: var(--cube-6);
 }
 
 #b31 .tile:nth-child(4),
@@ -105,7 +105,7 @@
 #b310 .tile:nth-child(9),
 #b311 .tile:nth-child(2),
 #b312 .tile:nth-child(11) {
-  background-image: var(--cube-7);
+  mask-image: var(--cube-7);
 }
 
 #b31 .tile:nth-child(8),
@@ -120,7 +120,7 @@
 #b310 .tile:nth-child(6),
 #b311 .tile:nth-child(11),
 #b312 .tile:nth-child(1) {
-  background-image: var(--cube-8);
+  mask-image: var(--cube-8);
 }
 
 #b31 .tile:nth-child(12),
@@ -135,7 +135,7 @@
 #b310 .tile:nth-child(3),
 #b311 .tile:nth-child(5),
 #b312 .tile:nth-child(7) {
-  background-image: var(--cube-9);
+  mask-image: var(--cube-9);
 }
 
 #b31 .tile:nth-child(2),
@@ -150,7 +150,7 @@
 #b310 .tile:nth-child(4),
 #b311 .tile:nth-child(1),
 #b312 .tile:nth-child(12) {
-  background-image: var(--cube-10);
+  mask-image: var(--cube-10);
 }
 
 #b31 .tile:nth-child(11),
@@ -165,7 +165,7 @@
 #b310 .tile:nth-child(12),
 #b311 .tile:nth-child(7),
 #b312 .tile:nth-child(10) {
-  background-image: var(--cube-11);
+  mask-image: var(--cube-11);
 }
 
 #b31 .tile:nth-child(7),
@@ -180,6 +180,6 @@
 #b310 .tile:nth-child(7),
 #b311 .tile:nth-child(4),
 #b312 .tile:nth-child(8) {
-  background-image: var(--cube-12);
+  mask-image: var(--cube-12);
 }