restyle homepage showcase

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 class="marquee-scroll">
-  <div id="marquee-scroll-right" class="marquee-scroll marquee-scroll-right">right</div>
+    <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")!;

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>

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>

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%;
+  width: 100%;
-  aspect-ratio: 19 / 10;
-  background-color: hsla(var(--blue) 66 60 / 0.4);
   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%;
+  transition: transform 0.3s cubic-bezier(.46,.03,.52,.96);
-  border: 1px solid red;
-  border-radius: inherit;
-  transition: transform 0.3s linear;
   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;
-
+  align-items: stretch;
-  &:hover {
-    cursor: pointer;
-    opacity: 0.7;
-    background-color: hsla(0 0 100 / 0.2);
-  }
 }
 
-.marquee-scroll-left {
+.marquee-scroll-arrow {
-  left: -3.117rem;
+  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;