From b94b6b02499a2fdda0f3fe9b5b68707d6c88f2ca Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Mon, 21 Aug 2023 13:16:00 +0200
Subject: [PATCH] Make lightbar wider on mobile, move to top

---
 src/components/layout/Navigation.tsx |   2 +-
 src/components/utils/Lightbar.css    | 103 ++++++++++++++++-----------
 2 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 2227cabd..7138ed35 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -19,7 +19,7 @@ export function Navigation(props: NavigationProps) {
   return (
     <>
       <div className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center">
-        <div className="absolute inset-x-0 mt-20 flex items-center sm:mt-0">
+        <div className="absolute inset-x-0 -mt-[22%] flex items-center sm:mt-0">
           <Lightbar />
         </div>
       </div>
diff --git a/src/components/utils/Lightbar.css b/src/components/utils/Lightbar.css
index d2eb265c..0850c1f0 100644
--- a/src/components/utils/Lightbar.css
+++ b/src/components/utils/Lightbar.css
@@ -1,61 +1,78 @@
 .lightbar, .lightbar-visual {
-    position: absolute;
-    top: 0;
-    width: 150vw;
-    height: 800px;
-    pointer-events: none;
-    user-select: none;
+  position: absolute;
+  top: 0;
+  width: 500vw;
+  height: 800px;
+  pointer-events: none;
+  user-select: none;
 }
 
 .lightbar {
+  left: 50vw;
+  transform: translateX(-50%);
+}
+
+@screen sm {
+  .lightbar, .lightbar-visual {
+    width: 150vw;
+  }
+
+  .lightbar {
     left: -25vw;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-    --d: 3s;
-    --animation: cubic-bezier(.75,-0.00,.25,1);
-    animation: boot var(--d) var(--animation) forwards;
+    transform: initial;
+  }
+}
+
+.lightbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --d: 3s;
+  --animation: cubic-bezier(.75, -0.00, .25, 1);
+  animation: boot var(--d) var(--animation) forwards;
 }
 
 .lightbar-visual {
-    left: 0;
-    --top: theme('colors.background.main');
-    --bottom: theme('colors.lightBar.light');
-    --first: conic-gradient(from 90deg at 80% 50%,var(--top),var(--bottom));
-    --second: conic-gradient(from 270deg at 20% 50%,var(--bottom),var(--top));
-    mask-image: radial-gradient(100% 50% at center center, black, transparent);
-	  background-image: var(--first), var(--second);
-    background-position-x: 1%, 99%;
-    background-position-y: 0%, 0%;
-    background-size: 50% 100%, 50% 100%;
-    opacity: 1;
-    transform: rotate(180deg) translateZ(0px) translateY(400px);
-    transform-origin: center center;
-    background-repeat: no-repeat;
-    animation: lightbarBoot var(--d) var(--animation) forwards;
+  left: 0;
+  --top: theme('colors.background.main');
+  --bottom: theme('colors.lightBar.light');
+  --first: conic-gradient(from 90deg at 80% 50%, var(--top), var(--bottom));
+  --second: conic-gradient(from 270deg at 20% 50%, var(--bottom), var(--top));
+  mask-image: radial-gradient(100% 50% at center center, black, transparent);
+  background-image: var(--first), var(--second);
+  background-position-x: 1%, 99%;
+  background-position-y: 0%, 0%;
+  background-size: 50% 100%, 50% 100%;
+  opacity: 1;
+  transform: rotate(180deg) translateZ(0px) translateY(400px);
+  transform-origin: center center;
+  background-repeat: no-repeat;
+  animation: lightbarBoot var(--d) var(--animation) forwards;
 }
 
 .lightbar canvas {
-	width: 40%;
-	height: 300px;
-	transform: translateY(-250px);
+  width: 40%;
+  height: 300px;
+  transform: translateY(-250px);
 }
 
 @keyframes boot {
-    from {
+  from {
 
-        opacity: 0.25;
-    }
-    to {
-        opacity: 1;
-    }
+    opacity: 0.25;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes lightbarBoot {
-    0% {
-        transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
-    }
-    100% {
-        transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
-    }
-}
+  0% {
+    transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
+  }
+
+  100% {
+    transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
+  }
+}
\ No newline at end of file