From 9710d0beac00a061d132862e75163a2b074fdfe5 Mon Sep 17 00:00:00 2001
From: Alexis Colin <alexis@jaunebleu.co>
Date: Tue, 26 Sep 2023 20:32:17 +0200
Subject: [PATCH] style: fix white timer style (#174)

---
 web/assets/js/routes/home.ts            | 24 ++++++++++++++++++------
 web/layouts/index.html                  |  2 +-
 web/layouts/partials/canvas/canvas.html |  4 +---
 web/layouts/partials/gui/banner.html    |  2 +-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/assets/js/routes/home.ts b/web/assets/js/routes/home.ts
index a8cb8ab4..e4787a51 100644
--- a/web/assets/js/routes/home.ts
+++ b/web/assets/js/routes/home.ts
@@ -35,12 +35,24 @@ const onEnter = function (next?: any) {
       classPrefix: 'char char'
     });
   });
-  gsap.to('#js-background', {
-    x: '50%',
-    scaleY: 1,
-    autoAlpha: 1,
-    scaleX: 1.1,
-    duration: 1
+  let mm = gsap.matchMedia();
+  mm.add('(max-width: 779px)', () => {
+    gsap.to('#js-background', {
+      x: '0%',
+      scaleY: 1,
+      autoAlpha: 1,
+      scaleX: 1.1,
+      duration: 1
+    });
+  });
+  mm.add('(min-width: 780px)', () => {
+    gsap.to('#js-background', {
+      x: '50%',
+      scaleY: 1,
+      autoAlpha: 1,
+      scaleX: 1.1,
+      duration: 1
+    });
   });
   gsap.to(container.querySelectorAll('.js-title .char > span'), {
     y: '-10%',
diff --git a/web/layouts/index.html b/web/layouts/index.html
index 62f77517..36473d1e 100644
--- a/web/layouts/index.html
+++ b/web/layouts/index.html
@@ -15,7 +15,7 @@ <h1 class="js-title opacity-0 lg:col-span-5 md:col-span-6 sm:col-span-12 col-spa
       {{ partial "gui/banner.html" .}}
     </div>
     <h2
-      class="js-subtitle row-start-3 md:col-span-5 sm:col-span-10 col-span-12 mt-2 opacity-0 lg:text-200 text-300 text-grey-600"
+      class="js-subtitle row-start-3 md:col-span-5 sm:col-span-10 col-span-12 mt-2 opacity-0 lg:text-200 text-300 md:text-grey-600"
     >
       {{.Params.subtitle}}
     </h2>
diff --git a/web/layouts/partials/canvas/canvas.html b/web/layouts/partials/canvas/canvas.html
index e29a3e9e..ad4afa5a 100644
--- a/web/layouts/partials/canvas/canvas.html
+++ b/web/layouts/partials/canvas/canvas.html
@@ -4,9 +4,7 @@
       id="js-background"
       class="absolute opacity-0 h-[calc(100vh-2vw)] w-[calc(100vw-2vw)] top-[1vw] left-[1vw] rounded-xl translate-x-full scale-x-110 origin-left overflow-hidden"
     >
-      <div
-        class="absolute w-full h-full bg-grey-200 md:opacity-100 opacity-0"
-      ></div>
+      <div class="absolute w-full h-full bg-grey-200 opacity-100"></div>
     </div>
     <div class="absolute z-max opacity-50 md:opacity-100">
       <canvas id="webgl-bg" class="absolute z-max opacity-0"></canvas>
diff --git a/web/layouts/partials/gui/banner.html b/web/layouts/partials/gui/banner.html
index 8e252044..7fbefa23 100644
--- a/web/layouts/partials/gui/banner.html
+++ b/web/layouts/partials/gui/banner.html
@@ -1,5 +1,5 @@
 <div
-  class="js-banner | opacity-0 rounded-full flex px-6 py-2 bg-grey-200 text-100 w-fit items-center"
+  class="js-banner | opacity-0 shadow rounded-full flex px-6 py-2 md:bg-grey-200 bg-grey-400 text-100 w-fit items-center"
 >
   <span
     class="relative font-bold font-termina mr-4 text-grey-50 after:absolute after:-right-2 after:top-1/2 after:w-px after:h-2/3 after:bg-grey-50 after:-translate-y-1/2"