style: fix white timer style (#174)

gnoverse · Sep 26, 2023 · 9710d0b · 9710d0b
1 parent 05f5980
commit 9710d0b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"