From 564d60f78fd1b3a288a8a5519cddd70d35dbd477 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Fri, 8 Nov 2024 22:30:05 -0800
Subject: [PATCH] move arrows over frontpage video in mobile resolution

---
 src/components/marquee/Marquee.astro | 13 ++++---
 src/styles/components/marquee.css    | 58 +++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index 2e00021..1a6e2ba 100644
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@@ -21,12 +21,13 @@ const videos = [
 ---
 <div class="marquee">
   <div class="marquee-scroll">
-    <div id="marquee-scroll-left" class="marquee-scroll-arrow">
-      <div><Icon name="caret-left"/></div>
-    </div>
-    <div class="marquee-item-spacing"/>
-    <div id="marquee-scroll-right" class="marquee-scroll-arrow">
-      <div><Icon name="caret-right"/></div>
+    <div class="marquee-item-spacing">
+      <div id="marquee-scroll-left" class="marquee-scroll-arrow">
+        <div><Icon name="caret-left"/></div>
+      </div>
+      <div id="marquee-scroll-right" class="marquee-scroll-arrow">
+        <div><Icon name="caret-right"/></div>
+      </div>
     </div>
   </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
diff --git a/src/styles/components/marquee.css b/src/styles/components/marquee.css
index 5ac2fa8..6f7a014 100644
--- a/src/styles/components/marquee.css
+++ b/src/styles/components/marquee.css
@@ -43,12 +43,15 @@
   transform: translateX(var(--scroll));
   display: flex;
   justify-content: center;
+  padding-inline: 1rem;
 }
 
 .marquee-item-spacing {
   width: 75svw;
   max-width: 75rem;
   aspect-ratio: 16 / 9;
+  display: flex;
+  justify-content: space-between;
 }
 
 .marquee-item-content {
@@ -58,7 +61,6 @@
 .marquee-scroll {
   position: absolute;
   width: 100%;
-  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,25 +69,61 @@
   user-select: none;
   align-items: stretch;
   pointer-events: none;
+  padding-inline: 1rem;
 }
 
 .marquee-scroll-arrow {
-  flex-grow: 1;
   max-width: 8rem;
   font-size: 2rem;
   pointer-events: all;
-}
-
-.marquee-scroll-arrow > div {
-  height: 100%;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  opacity: 0.5;
-  transition: opacity 0.3s ease;
+  align-items: center;
+
+  & > div {
+    width: 2.5rem;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+  }
 
   &:hover {
-    opacity: 0.9;
     cursor: pointer;
+    & > div { opacity: 0.9 }
+  }
+}
+
+#marquee-scroll-left {
+  left: -4rem;
+}
+
+#marquee-scroll-right {
+  right: -4rem;
+}
+
+@media not (min-width: 40rem) {
+  .marquee-item-spacing {
+    width: 100%;
+    align-items: center;
+  }
+
+  .marquee-scroll-arrow {
+    height: unset;
+    & > div {
+      background-color: #55555580;
+      border-radius: 0.2rem;
+    }
+  }
+
+  #marquee-scroll-left {
+    left: 2rem;
+  }
+
+  #marquee-scroll-right {
+    right: 2rem;
   }
 }