From 330086f09f341eb53629e9264374cc600e24e415 Mon Sep 17 00:00:00 2001
From: RGBCube <RGBCube@users.noreply.github.com>
Date: Mon, 18 Dec 2023 10:23:59 +0300
Subject: [PATCH] Eliminate images and use gradients instead

---
 .gitignore        |   2 --
 back.png          | Bin 5551 -> 0 bytes
 bottom.png        | Bin 5551 -> 0 bytes
 front.png         | Bin 5554 -> 0 bytes
 generate_sides.py |  70 ----------------------------------------------
 index.html        |  52 +++++++++++++++++++++++++++++-----
 left.png          | Bin 5550 -> 0 bytes
 right.png         | Bin 5551 -> 0 bytes
 top.png           | Bin 5551 -> 0 bytes
 9 files changed, 45 insertions(+), 79 deletions(-)
 delete mode 100644 back.png
 delete mode 100644 bottom.png
 delete mode 100644 front.png
 delete mode 100644 generate_sides.py
 delete mode 100644 left.png
 delete mode 100644 right.png
 delete mode 100644 top.png

diff --git a/.gitignore b/.gitignore
index 573d61e..6f51f5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,4 @@
 
 !*.html
 !*.md
-!*.png
-!*.py
 !*.woff2
diff --git a/back.png b/back.png
deleted file mode 100644
index 88c1211238512a9d497d74d457342ef35a1333d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5551
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&mU+53hE&XXdwU~qgMk2x
zWAlsssgsq&8N{rGEmagF=Kh;eY~!2%{zmoW^B=x_<F2T#|8(z(@t(c+YvwaEFq{xz
zU|<kXVqjoUaA9Cza5%A5?hpe5!~ax928IR!Mg|53MUY)icR-RItPBhcP9P_=a4;}1
za1=6w<i$WtLAWtTco`TNS|Z>kb})cUG6%^gjT$-{rl2G<nxq&;a})!E!!RpQz$Ivh
zasmSb$3}2@2`>7;g=ikAJUjwQ_mJ`wT!`)fmxtV-@)BI0f(y|{Y@k9`2UK1niscSz
zP$4^ND1!r}IvEX92F1}N#h@^nqhJlR;ai}93sLt23=9IJ?Z?qJIk@Bp)uW>gsNvUu
z8tpsMtLqHTMtu#8qg5!VEE#Q+!^U++yCe(^0;4@L2FL*4Xor+R0Be8z1n;i^Hkqze
S?Y9gJ3=E#GelF{r5}E)FFKPY&

diff --git a/bottom.png b/bottom.png
deleted file mode 100644
index ff7fe4c9530f6ccb4591476cefdbeee63370d207..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5551
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&mU+53hE&XXdwU~qgM$Fe
z#%h=Uy3So13<AmS@{<I5!nUXN?Tom0Z{v4&yTi9{>pyt=_tbCY`48XzeNrvWz@XsF
zz`)?p!N9=KAi&7Lz@Yg1Er$dH!w*Al1_p)}4h9AW4nYP627yOx3=9lTIv}PJ0|SGC
z3s{>pNPZ)ji7+7#B!2|tLPZea1aflA4n~j-qlS)#DJaQ|CaKXJH5>~RaCs-g$jso-
z!3rub!9^dq5G`Z|6|Q3N#1Ae+kMM#D*$7a12`Nv(g{V2GkWB)Ym*5f^Z0H?uAv<a)
z1Ee|`4O0e=(Imydpg5YNpbfO)TcCgoQ41zEh6aJr_Ty;#5nhFkc1cEiWTPEY1_5x%
z4{1LV-yerGpjdcDtI*LF#ISEcjCP(zJET<ZI{V$4#mV(!!<i-q1_lOCS3j3^P6<r_
Dq+n?)

diff --git a/front.png b/front.png
deleted file mode 100644
index dc29fd9171a0a92b95f0b934753ae479ca9e435e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5554
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&R(iTPhE&XXds|Vc#XyAh
zV9TR_;e2B4%_5iADupG4`Rx5wyv8(d+4k}`drziURR89#sILEX?}_oAz4vS6nHd;P
z2rw`(2q-ZyFetb%Ffcfru)OxUpMjyFeglZt!N9=KAi&7Lz@V51QgQ@jvm%Ia0y(8+
z2O~(Hn}LC$g@b{CfkO~v*dsOu1_mb`5EEf;hcrlj<EWtyqhUIlq(*bp@GMZk<=qiM
z0|thc2vB(mE>a;G-W*gOCV|UKaO{H%(L3PskQG#3g3D8IAzH``DsRO=<t4a0g&4{U
zDr83ug;rCeVam`TFq)(o1V(cdtTr9C1q!4PRZd`F;23Q`GK{t#8DJ@Xv`fOEFxn$y
zU>NO?GBA+b9|!mB-48H~R-vP9a_A7xux&vc8SOlcc1Wq)AAiC$-;Iki<GkR01_lNO
MPgg&ebxsLQ0BU7yWdHyG

diff --git a/generate_sides.py b/generate_sides.py
deleted file mode 100644
index 9f9639e..0000000
--- a/generate_sides.py
+++ /dev/null
@@ -1,70 +0,0 @@
-from PIL import Image, ImageDraw
-
-width, height = 1024, 1024
-
-canvas = Image.new("RGB", (width, height))
-draw   = ImageDraw.Draw(canvas)
-
-sides = {
-    "front": [
-        (000, 255, 255),
-        (255, 255, 255),
-        (000, 000, 255),
-        (255, 000, 255),
-    ],
-    "top": [
-        (000, 255, 000),
-        (255, 255, 000),
-        (000, 255, 255),
-        (255, 255, 255),
-    ],
-    "back": [
-        (255, 255, 000),
-        (000, 255, 000),
-        (255, 000, 000),
-        (000, 000, 000),
-    ],
-    "bottom": [
-        (000, 000, 255),
-        (255, 000, 255),
-        (000, 000, 000),
-        (255, 000, 000),
-    ],
-    "right": [
-        (255, 255, 255),
-        (255, 255, 000),
-        (255, 000, 255),
-        (255, 000, 000),
-    ],
-    "left": [
-        (000, 255, 000),
-        (000, 255, 255),
-        (000, 000, 000),
-        (000, 000, 255),
-    ],
-}
-
-for side, colors in sides.items():
-    top_left, top_right = colors[0], colors[1]
-    bottom_left, bottom_right = colors[2], colors[3]
-
-    for y in range(height):
-        left = (
-            int((bottom_left[0] - top_left[0]) * y / height) + top_left[0],
-            int((bottom_left[1] - top_left[1]) * y / height) + top_left[1],
-            int((bottom_left[2] - top_left[2]) * y / height) + top_left[2]
-        )
-        right = (
-            int((bottom_right[0] - top_right[0]) * y / height) + top_right[0],
-            int((bottom_right[1] - top_right[1]) * y / height) + top_right[1],
-            int((bottom_right[2] - top_right[2]) * y / height) + top_right[2]
-        )
-
-        for x in range(width):
-            r = int((right[0] - left[0]) * x / width) + left[0]
-            g = int((right[1] - left[1]) * x / width) + left[1]
-            b = int((right[2] - left[2]) * x / width) + left[2]
-
-            draw.point((x, y), fill=(r, g, b))
-
-    canvas.save(f"{side}.png")
diff --git a/index.html b/index.html
index 034e4b6..24eeffa 100644
--- a/index.html
+++ b/index.html
@@ -104,34 +104,72 @@
       position: absolute;
     }
 
+    .face::after {
+      z-index: -1;
+      content: "";
+      width: inherit;
+      height: inherit;
+      position: absolute;
+    }
+
     .front {
       transform: rotateY(0deg) translateZ(2.5em);
-      background-image: url(front.png);
+      background: linear-gradient(to bottom, cyan, blue);
+    }
+
+    .front::after {
+      background: linear-gradient(to bottom, white, magenta);
+      mask-image: linear-gradient(to left, magenta, transparent);
     }
 
     .top {
       transform: rotateX(90deg) translateZ(2.5em);
-      background-image: url(top.png);
+      background: linear-gradient(to bottom, lime, cyan);
+    }
+
+    .top::after {
+      background: linear-gradient(to bottom, yellow, white);
+      mask-image: linear-gradient(to left, white, transparent);
     }
 
     .back {
       transform: rotateY(180deg) translateZ(2.5em);
-      background-image: url(back.png);
+      background: linear-gradient(to bottom, yellow, red);
+    }
+
+    .back::after {
+      background: linear-gradient(to bottom, lime, black);
+      mask-image: linear-gradient(to left, black, transparent);
     }
 
     .bottom {
       transform: rotateX(-90deg) translateZ(2.5em);
-      background-image: url(bottom.png);
+      background: linear-gradient(to bottom, blue, black);
+    }
+
+    .bottom::after {
+      background: linear-gradient(to bottom, magenta, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .right {
       transform: rotateY(90deg) translateZ(2.5em);
-      background-image: url(right.png);
+      background: linear-gradient(to bottom, white, magenta);
+    }
+
+    .right::after {
+      background: linear-gradient(to bottom, yellow, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .left {
       transform: rotateY(-90deg) translateZ(2.5em);
-      background-image: url(left.png);
+      background: linear-gradient(to bottom, lime, black);
+    }
+
+    .left::after {
+      background: linear-gradient(to bottom, cyan, blue);
+      mask-image: linear-gradient(to left, blue, transparent);
     }
   </style>
 
@@ -315,4 +353,4 @@
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/left.png b/left.png
deleted file mode 100644
index ec4644f6b62f7d3c7d0a9a51a7dbca7f5610fcf2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5550
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&mU_B4hE&XXds~sO!9axd
z;IxAO+RbWTFKjSgCDeRl&mYTmA5He|O@8ldclh>g{ReOVo~)jH{=>Jr_q99>3<}N+
z3=9q(3=9kn0*nj{42sW-Sa=v1{!C+KU|?_pS=PeAz`(#!$PAJc12F{|7#IYU7#J87
zj_@)tFtkK~m@Wuo%t7)=jBpb{PIbBimLD~AG)zHBW;98S=BVLVpnyxzz6M4Hg(IL+
zPZ2~w3eg?l@{k*z_`!wfBQ{VWs{<-8!R0BW5S0cMvKztWC8Ai)0~NBPhB7dWhAFIG
z9!*jV4FaP%iUHC<8@>e!xDb_LWM**a7;Qg}wjbeD=xCROfkAP!N5;SbF8aU?sL>87
zvHfvy&)$NGZL|s<Z9xqC7Q|@hX|zKMYDH49?`VE)9Vb_Me@-6*0|SGntDnm{r-UW|
DJECh6

diff --git a/right.png b/right.png
deleted file mode 100644
index 2895be55fe636b13266cfdf9159054237bb09477..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5551
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&mU+53hE&XXdwU~qgM$Ez
zp~IK^p9Gy5KP0_*;Vjg2@zuAPH}j6&w*D6P#CXr%zfAY;&EF&blPCZE_j||L7#LDG
z7#J8h1Q{3@1e6#U7!;n=%sa@y!0<nnk%6H>fRTZLK@nt^(;Wr|28Rw-1_lNvkP}+K
z+6tLL@?xka9N}ePU}%W|8Ri1k!~inM9Arb%sG*}_3Q97gNs3`KM-9IM1ybHAConK@
zY(x}&;6gMHR307yrF%$u3NA!<fXhQ}P<aV1Pr=3TBQ{VWs{<-8!6h=pP-##hJ8CF{
zLkGAz84Xhg#nB|ipfH-FU=6h4TcCh5y!!zL27%G`<7k^4T=IkJ(a{Ff@M}Pg_8sZf
zbp~gnz6Qq8Dil<fjJC;P<2s{V5{3qW(H<ECWPoq9L&_k4wLgA>_1GzP>74xc!3+!x
N44$rjF6*2UngEQGZYlr(

diff --git a/top.png b/top.png
deleted file mode 100644
index 9c72643e0cf51ae900db3490285e9ba03643390c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5551
zcmeAS@N?(olHy`uVBq!ia0y~yU||4Z4kiW$h7a|7t}rl&mU+53hE&XXds~sO!9axd
z;IxAO+Rdsf+uP;_PL(+F?CJT!-sLaf%2wxplDv1Xjxqne|Gn8YZQH-kexJ<1z#s`S
z$q8g?3kL%O1Bc~wZwUs52itWR7#IYU7#J87To@P_96F>yk{iKH1_p)(0Y(M}2E{y(
z{1K1|iXZ}F%nnA7JU0Ua1H?o@kV%i&7#J9wMhzVeQ&5r_O;V#dYB&}s;1aZug@=Jb
zQ4CaGf{Q+IA$o)tR31hk5<j>QH3t=qN#ODlT%Ljp(L3NmmK9W9B8ufgW>9%MYA6H8
zXqZClkkKT?z|b<9qhJlRVOyYpGyEeCiP84sX!99b^o_P3N869XvHeKDt}~=jDrhiT
sg^so$hJ6cSwDUCDA*FKHc_*XXRG#kzd#$S(7#J8lUHx3vIVCg!09n&&ssI20