Get carousel ready for JS

src/index.liquid

@@ -29,33 +29,34 @@
   </header>
 
   <main class="Main">
-    {% for project in portfolio %}
-      <div class="Carousel-item">
-        {% if project.img %}
-          <img src="/portfolio/{{ project.img }}"
-            alt="Screenshot of punkfairie.net" class="Carousel-img">
-        {% endif %}
+    <div class="Carousel">
+        <div class="Carousel-item">
+          {% if project.img %}
+            <img src="/portfolio/{{ project.img }}"
+              alt="Screenshot of punkfairie.net" class="Carousel-img">
+          {% endif %}
 
 
-        <div class="Carousel-title">
-          <a href="{{ project.github }}" target="_blank"><i
-              class="fa-brands fa-github" title="Github"></i></a> /
+          <div class="Carousel-title">
+            <a href="{{ project.github }}" target="_blank"><i
+                class="fa-brands fa-github" title="Github"></i></a> /
 
-          {{ project.title }}
+            {{ project.title }}
 
-          {% if project.live %}
-            / <a href="{{ project.live }}" target="_blank"><i
-              class="fa-solid fa-link" title="Visit project"></i></a>
+            {% if project.live %}
+              / <a href="{{ project.live }}" target="_blank"><i
+                class="fa-solid fa-link" title="Visit project"></i></a>
+            {% endif %}
+          </div>
+
+          <p class="Carousel-text">{{ project.description }}</p>
+
+          {% if project.tech %}
+            <p class="Carousel-text">{{ project.tech }}</p>
           {% endif %}
         </div>
-
-        <p class="Carousel-text">{{ project.description }}</p>
-
-        {% if project.tech %}
-          <p class="Carousel-text">{{ project.tech }}</p>
-        {% endif %}
-      </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
 
     <button class="Carousel-controls Carousel-controls--left"
       id="carousel-left">

src/style/Carousel.css

@@ -1,14 +1,29 @@
 @layer components {
+  .Carousel {
+    display: flex;
+    overflow: scroll;
+    inline-size: 70%;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+  }
+
+  .Carousel::-webkit-scrollbar {
+    /* stylelint-disable plugin/use-logical-properties-and-values */
+    width: 0;
+    height: 0;
+    /* stylelint-enable plugin/use-logical-properties-and-values */
+  }
+
   .Carousel-item {
     display: flex;
+    flex: 1 0 100%;
     flex-direction: column;
     gap: var(--space-xs);
     align-items: center;
     justify-content: center;
     margin: auto;
-    block-size: 100%;
-    inline-size: 70%;
     text-align: center;
+    inline-size: 100%;
   }
 
   /* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
@@ -25,8 +40,9 @@
   }
 
   .Carousel-controls {
-    --Carousel-controls-translateY: -100%;
+    --Carousel-controls-translateY: -70%;
 
+    flex-grow: 1;
     font-size: var(--t-step-2);
     cursor: pointer;
     background: none;
@@ -36,10 +52,12 @@
 
   .Carousel-controls--left {
     order: -100;
+    text-align: start;
   }
 
   .Carousel-controls--right {
     order: 100;
+    text-align: end;
   }
 
   @media (prefers-reduced-motion: reduce) {

src/style/layout/Main.css

@@ -4,5 +4,6 @@
     flex-grow: 1;
     align-items: center;
     inline-size: 90%;
+    transform: translateY(-3%);
   }
 }