From c9a74204141e31ee6330c43db22ae60dc160ce24 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@outlook.com>
Date: Sun, 21 Jul 2024 00:22:05 +0100
Subject: [PATCH] feat: redesign

---
 web/images/cat-0.png      | Bin 0 -> 922 bytes
 web/images/cat-1.png      | Bin 0 -> 928 bytes
 web/images/cat-2.png      | Bin 0 -> 927 bytes
 web/images/cat-3.png      | Bin 0 -> 932 bytes
 web/images/eeping-cat.png | Bin 0 -> 919 bytes
 web/index.html            |  18 ++++++-----
 web/style.css             |  64 +++++++++++++++++++++++++-------------
 7 files changed, 54 insertions(+), 28 deletions(-)
 create mode 100644 web/images/cat-0.png
 create mode 100644 web/images/cat-1.png
 create mode 100644 web/images/cat-2.png
 create mode 100644 web/images/cat-3.png
 create mode 100644 web/images/eeping-cat.png

diff --git a/web/images/cat-0.png b/web/images/cat-0.png
new file mode 100644
index 0000000000000000000000000000000000000000..c19734f1836913adacf0995adf7682aef5472387
GIT binary patch
literal 922
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5ln6+T@J#ddWzYh$IT)B2
zg&3HDEJh$?XwPI|0katxfF=O}^8!YM>;fjZEYAXF1RJD~@!}O{1_maB%#etZ2wxwo
z<osN{#FYG`RK1Ga0+0d*n+hu+GdHy)QK2F?C$HG5!d3~a!V1U+3F|8<fR&VF+bTu)
z1}He^7o{qg=^5x5DA{o-C@9zzrKDK}xwt{K19`Se86_nJR{Hwo<>h+i#(Mch>H3D2
zmX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F7L;V>=P7{9O-#x!EwNQn0$BtH
z5O=0lWFl<JD~5Ut=s|sujJ~0sfj%~EC7EeBw1H$G+Q9yTSZ4z=%qk$WA~h${B{MfQ
zuNdewJ3}KIuq_x82zMfBjKHN4NdjG?bAC>KQE)+Ga;lvn)Gj0;B-J2STlp7drUC;L
z6l@^n7-CTMHu|72MG9j`1cF6@F=)qSqYqCFc3cN!S)+gnq}S8MF+@YOH!zT^!GPoL
zqT4*L)Jj*E&TEoglJI}G=f@uNBUvgPziM8U+}nG?f=~THt-a0VBUVh;j_t6Ru%bh8
zuj;FcSaaE~|CWq5E9b?WixjbY@}0%UIdC(>-L+S=4H{K<CU7)vC^>$0mUYOsB0KJq
z@}v7>?@5_0Rf+PNXuo0G<JmvoxtlXrh)ArFjJwq3#>nQq+yj(!Jzf1=);T3K0RV^e
B5(fYP

literal 0
HcmV?d00001

diff --git a/web/images/cat-1.png b/web/images/cat-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7df83270c5869007a28ffd639e8c265f1c5b0e21
GIT binary patch
literal 928
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5ln6+T@J#ddWzYh$IT)B2
zg&3HDEJh$?XwPI|0katxfF=O}^8!YM>;fjZEYAXF1RJD~@!}O{1_maB%#etZ2wxwo
z<osN{#FYG`RK1Ga0+0d*n+hu+GdHy)QK2F?C$HG5!d3~a!V1U+3F|8<fR&VF+bTu)
z1}He^7o{qg=^5x5DA{o-C@9zzrKDK}xwt{K19`Se86_nJR{Hwo<>h+i#(Mch>H3D2
zmX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F7L;V>=P7{9O-#x!EwNQn0$BtH
z5O=0lWFl<JD~5Ut=s|sujJ~0sfj%~EC7EeBw1H$G+Q9yTSZ4z=%qk$WA~h${B{MfQ
zuNdewJ3}KIuq_x82zMfBjKHN4NdjG?bAC>KQE)+Ga;lvn)Gj0;B-J2STlp7drUC;L
z6l@^n7-CTMHu|72MG9j`1cF6@F=)qSqYqCFc3cN!S)+gnWU{A=V~B=mZ@_KN1_Pd)
zqq$tWI?pX;zEY`GGJ)&wd$m)ndQ%o1bvW_#Q=h56(fP}~R!dJC`Q#~FjC#-CtfEzO
z;)dF_I*#<WT>s`Yyx66u_FRXH=cg^><$x=?4&TGRaPvIykb5ylS@-V8t?zhe#WKcr
z)~Bs`=jW$8DY@rUaYTlu>z`|UcPj6j=U!l*w)%m>qqu|2{u_LLSEp)5fD*8$tDnm{
Hr-UW|w9^(!

literal 0
HcmV?d00001

diff --git a/web/images/cat-2.png b/web/images/cat-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b436b6b18b749de651fae2a27ea03adab4f5c300
GIT binary patch
literal 927
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5ln6+T@J#ddWzYh$IT)B2
zg&3HDEJh$?XwPI|0katxfF=O}^8!YM>;fjZEYAXF1RJD~@!}O{1_maB%#etZ2wxwo
z<osN{#FYG`RK1Ga0+0d*n+hu+GdHy)QK2F?C$HG5!d3~a!V1U+3F|8<fR&VF+bTu)
z1}He^7o{qg=^5x5DA{o-C@9zzrKDK}xwt{K19`Se86_nJR{Hwo<>h+i#(Mch>H3D2
zmX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F7L;V>=P7{9O-#x!EwNQn0$BtH
z5O=0lWFl<JD~5Ut=s|sujJ~0sfj%~EC7EeBw1H$G+Q9yTSZ4z=%qk$WA~h${B{MfQ
zuNdewJ3}KIuq_x82zMfBjKHN4NdjG?bAC>KQE)+Ga;lvn)Gj0;B-J2STlp7drUC;L
z6l@^n7-CTMHu|72MG9j`1cF6@F=)qSqYqCFc3cN!S)+gnWRj<gV~B=mZ@_KN1_Pd)
zqq$tWI?pX;eqqBU>$33w-6chhlO?uDaGZ?2_wk+UuYKAJ`X7JcnVjtrv0G=gvyiC7
zrCTn&+jFl6{5j9r(f9a4kk_IQiu=_Qq`FqIzQ}v}kBQl05__9~hj)3++N#5I*UCh8
z+K27AeAiTef1jb42G`5yb6BIbg`ZVcnXGI)eldUb%}3mRyFC8#hM6XS(yynhpUXO@
GgeCy^0u{Re

literal 0
HcmV?d00001

diff --git a/web/images/cat-3.png b/web/images/cat-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a96119249b9e8a9bd6d9a848d573529b452b676a
GIT binary patch
literal 932
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5ln6+T@J#ddWzYh$IT)B2
zg&3HDEJh$?XwPI|0katxfF=O}^8!YM>;fjZEYAXF1RJD~@!}O{1_maB%#etZ2wxwo
z<osN{#FYG`RK1Ga0+0d*n+hu+GdHy)QK2F?C$HG5!d3~a!V1U+3F|8<fR&VF+bTu)
z1}He^7o{qg=^5x5DA{o-C@9zzrKDK}xwt{K19`Se86_nJR{Hwo<>h+i#(Mch>H3D2
zmX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F7L;V>=P7{9O-#x!EwNQn0$BtH
z5O=0lWFl<JD~5Ut=s|sujJ~0sfj%~EC7EeBw1H$G+Q9yTSZ4z=%qk$WA~h${B{MfQ
zuNdewJ3}KIuq_x82zMfBjKHN4NdjG?bAC>KQE)+Ga;lvn)Gj0;B-J2STlp7drUC;L
z6l@^n7-CTMHu|72MG9j`1cF6@F=)qSqYqCFc3cN!S)+gnWV)w|V~B=mZ@_KN1_Pco
zM{~J$b<TBXzfdV+)#3DicV|(f_Qo(nfvTOS7kegaUHg8Qv+90-n~|mWqMGNGh8~NQ
z+qR}I>bqWgdEtZWoB?~~eR=|AB)(NMEnE0vGs9i))8PvmRCg{Y?%Psw{Hk5~iJM#z
z^Lz`LO25x;YZ7qUXKrA#R3+wT)Sv8GZinmd?+R_&W1<%Ng}szf>a@?#m(v+mfD*B%
LtDnm{r-UW|S)UmR

literal 0
HcmV?d00001

diff --git a/web/images/eeping-cat.png b/web/images/eeping-cat.png
new file mode 100644
index 0000000000000000000000000000000000000000..a792cc4f8b719a9789800706487af835a070f9b5
GIT binary patch
literal 919
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~c!3HEhl+{lMQY`6?zK#qG8~eHcB(ehe3dtTp
zz6=aiY77hwEes65fI<x~7#K<o7#Ln9FfdrnU|<k0n6oR;1}G7b8sVAd>&u`8WOFbu
zF$ys-16hnf$k3k2zyfA7FaS*g0_Fvb2-yWpa9M!`%y2dbNMV^o^LhpbCjHEih>{3j
zAFJg2T)o7U{G?R9irfN_0tTB3D<CsBwIorYA~z?m*s8)-39P~j$OZ}PD=C1Llw{i~
zMfe6NIOi9oDwydR=ou*4aVaP$*c7FtSp~VcLA3*Uwn`Z#B?VUc`sL;2dgaD?`9<ma
zhL)C=`UXb&Mn<|o6}rWhc_oPzx_QOQ5JO<*xTF>*7iAWdWaj57fXq!y$}cUkRZ;?3
z1P2gzrdDJkY|1N!dJE`5eUOa4p`L+0Hf<%DX*jfjWFXqW{(@L%12W7iAhRMhC(<P|
zH#M&q=rlVE8?Yr9;s|FV>5D+<Gc-fih$Mlo(K$aSzbLpMF*()F5UK@92uU@_(N_LN
znW@0=1ce$%IffWiy^TI7NRfgV5`SP(U<BH6+33R)gB{lz(J)W~?DlkV4ABtn4QS+S
zFyOg;B%ke9=e@^#7pg_dPV7mT|H8<Fv*|^GN#<nJGduf@`wq9RHhNoXRdM+BF3VW~
z2P><X)}HTGWZC|{-HWH%S@gn+N0sw@n$8;P9V@omtJ)CRyKI%i?;|xkR3D_x(qLLX
z!PvKvMYl}z=_6mwt?}%~4?mc*(Y<eHectnB`@ga+ogVkH_<+!AP`dSW^>bP0l+XkK
D1_~8*

literal 0
HcmV?d00001

diff --git a/web/index.html b/web/index.html
index d98131b..77d218d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,13 +5,17 @@
 		<link rel="stylesheet" href="/style.css">
 	</head>
 	<body>
-		<main class="container">
-			<h1 class="header">infinifi</h1>
-			<h2>infinite lo-fi music in the background</h2>
-			<div class="button-container">
-				<button id="play-btn" class="button">play</button>
-			</div>
-		</main>
+		<div class="container">
+			<main>
+				<h1 class="header">infinifi</h1>
+				<h2>infinite lo-fi music in the background</h2>
+				<div class="button-container">
+					<button id="play-btn" class="button">play</button>
+				</div>
+			</main>
+			<img class="cat" src="/images/cat-0.png" />
+			<img class="eeping-cat" src="/images/eeping-cat.png" />
+		</div>
 		<script type="text/javascript" src="/script.js"></script>
 	</body>
 </html>
diff --git a/web/style.css b/web/style.css
index 611f00e..dda5d7c 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,6 +1,8 @@
 :root {
   font-family: monospace;
   --text: #4c4f69;
+  --surface0: #ccd0da;
+  --surface1: #bcc0cc;
   --base: #eff1f5;
   --background-color: #f0f0f0;
 }
@@ -8,6 +10,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --text: #cdd6f4;
+    --surface1: #45475a;
     --base: #1e1e2e;
   }
 }
@@ -18,27 +21,18 @@ body {
 }
 
 body {
-  height: 100vh;
+  width: calc(100% - 4rem - 1px);
+  height: calc(100vh - 4rem - 1px);
+  padding: 2rem;
   margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f0f0f0;
+  background-color: var(--base);
   opacity: 1;
-  background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px);
+  background-image: radial-gradient(var(--surface1) 1px, var(--base) 1px);
+  background-opacity: 0.8;
   background-size: 10px 10px;
   color: var(--text);
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #1e1e2e;
-    opacity: 1;
-    background-image: radial-gradient(#585b70 0.5px, #1e1e2e 0.5px);
-    background-size: 10px 10px;
-  }
-}
-
 h1,
 h2,
 h3,
@@ -49,25 +43,53 @@ h6 {
   font-weight: 400;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  margin: 4rem;
+}
+
+.container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: end;
+  justify-content: start;
+  border: 1px solid var(--text);
+  border-radius: 2px;
+}
+
 .header {
   font-weight: 800;
   margin-bottom: 1rem;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
+.cat {
+  position: absolute;
+  bottom: 0px;
+  right: 10%;
+  image-rendering: pixelated;
+  height: 30px;
+}
+
+.eeping-cat {
+  position: absolute;
+  image-rendering: pixelated;
+  top: -16px;
+  right: 50%;
+  height: 15px;
 }
 
 @media (min-width: 768px) {
-  .container {
+  main {
     width: 80%;
   }
 }
 
 @media (min-width: 1024px) {
-  .container {
+  main {
     width: 50%;
   }
 }