From 905c91ad80f11cd4fd71b4c54e2cb7ecb240de06 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Wed, 30 Oct 2024 16:20:04 -0700
Subject: [PATCH] restyle homepage showcase

---
 src/components/marquee/Marquee.astro | 21 +++++----
 src/icons/caret-left.svg             |  1 +
 src/icons/caret-right.svg            |  1 +
 src/styles/main-page.css             | 64 +++++++++++++++++-----------
 4 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 src/icons/caret-left.svg
 create mode 100644 src/icons/caret-right.svg

diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index e78afde..73d8ba2 100644
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components";
 
 function placeholders() {
   const word = "placeholder";
@@ -19,10 +20,19 @@ const ph = placeholders();
   <button id="button-overlay" class="marquee-button marquee-button-overlay">overlays</button>
 </div>
 <div class="marquee">
-  <div id="marquee-scroll-left" class="marquee-scroll marquee-scroll-left">left</div>
-  <div id="marquee-scroll-right" class="marquee-scroll marquee-scroll-right">right</div>
+  <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>
+  </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0">
-    {ph.map(item => <div class="marquee-item">{item}</div>)}
+    {ph.map(item => <div class="marquee-item">
+      <div class="marquee-item-spacing marquee-item-content">{item}</div>
+    </div>)}
   </div>
 </div>
 
@@ -32,11 +42,6 @@ const ph = placeholders();
   const marquee = document.getElementById("marquee-content")!;
   marquee.style.setProperty("--scroll", "0")
 
-  // go-to buttons
-  const buttonWidget = document.getElementById("button-widget")!;
-  const buttonPanel = document.getElementById("button-panel")!;
-  const buttonOverlay = document.getElementById("button-overlay")!;
-
   // left-right buttons
   const scrollLeft = document.getElementById("marquee-scroll-left")!;
   const scrollRight = document.getElementById("marquee-scroll-right")!;
diff --git a/src/icons/caret-left.svg b/src/icons/caret-left.svg
new file mode 100644
index 0000000..6de2213
--- /dev/null
+++ b/src/icons/caret-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#000000" viewBox="0 0 256 256"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>
diff --git a/src/icons/caret-right.svg b/src/icons/caret-right.svg
new file mode 100644
index 0000000..eef5bc5
--- /dev/null
+++ b/src/icons/caret-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#000000" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 8caec34..2318fd1 100644
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@@ -1,7 +1,6 @@
 .main-page_hero {
   position: relative;
   margin-block: 1.618rem;
-  margin-inline: 0.612rem;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -67,59 +66,74 @@
 
 .marquee {
   position: relative;
-  width: 80%;
-  aspect-ratio: 19 / 10;
-  background-color: hsla(var(--blue) 66 60 / 0.4);
+  width: 100%;
   margin-block: 1.817rem;
-  border-radius: 8px;
 }
 
 .marquee-content {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: inherit;
   display: flex;
 }
 
 .marquee-item {
   flex: 1 0 100%;
-  height: 100%;
-  border: 1px solid red;
-  border-radius: inherit;
-  transition: transform 0.3s linear;
+  transition: transform 0.3s cubic-bezier(.46,.03,.52,.96);
   transform: translateX(var(--scroll));
+  display: flex;
+  justify-content: center;
+}
+
+.marquee-item-spacing {
+  width: 75%;
+  max-width: 80rem;
+  aspect-ratio: 16 / 9;
+}
+
+.marquee-item-content {
+  border: 1px solid red;
+  border-radius: 8px;
+  background-color: gray;
 }
 
 .marquee-scroll {
   position: absolute;
-  width: 3rem;
+  width: 100%;
   height: 100%;
-  background-color: hsla(0 0 100 / 0.1);
-  border: 1px solid white;
-  border-radius: 8px;
-  opacity: 0.3;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: background-color 0.3s, opacity 0.3s;
   z-index: 10;
   user-select: none;
-
-  &:hover {
-    cursor: pointer;
-    opacity: 0.7;
-    background-color: hsla(0 0 100 / 0.2);
-  }
+  align-items: stretch;
 }
 
-.marquee-scroll-left {
-  left: -3.117rem;
+.marquee-scroll-arrow {
+  flex-grow: 1;
+  max-width: 8rem;
+  font-size: 2rem;
+}
+
+.marquee-scroll-arrow > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+
+  &:hover { opacity: 0.9 }
+}
+
+/*.marquee-scroll-left {
+  left: 3.117rem;
 }
 
 .marquee-scroll-right {
-  right: -3.117rem;
-}
+  right: 3.117rem;
+}*/
 
 .call-buttons {
   margin-bottom: 1.618rem;