Optimization pass

index.html

@@ -35,22 +35,28 @@
         .snappy-carousel {
             .scroll-container {
                 max-height: 300px;
+                gap: 0.5rem;
             }
 
             .slide {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 33%;
+                width: 75%;
                 aspect-ratio: 3/2;
+                min-height: 200px;
                 max-height: 400px;
+                border-radius: 1rem;
+                border: 1px solid #ced4da;
 
                 background-color: #f1f3f5;
                 color: #343a40;
+                transition: box-shadow 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 
                 @media (prefers-color-scheme: dark) {
                     background-color: #495057;
                     color: #f8f9fa;
+                    border-color: #868e96;
                 }
             }
 
@@ -63,6 +69,10 @@
                 }
             }
 
+            .slide.is-active {
+                box-shadow: inset 0 0 0 4px #339af0;
+            }
+
             .prev,
             .next {
                 width: 1.5rem;
@@ -89,7 +99,8 @@
             }
 
             .pagination {
-                display: flex;
+                display: inline-flex;
+                margin-top: 1rem;
             }
 
             .pagination .dot {
@@ -127,15 +138,11 @@
         Options
         -------
 
-        https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
+        See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
 
         data-direction="x" 
         data-direction="y" 
         
-        data-gap="var(--size-1)"
-        data-gap="10px"
-        data-gap="1rem"
-        
         data-snap-stop="always"
         data-snap-stop="normal"
         
@@ -143,7 +150,7 @@
         data-snap-align="start"
         data-snap-align="end"
     -->
-    <div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
+    <div class="snappy-carousel">
         <div class="scroll-container">
             <div class="slide">1</div>
             <div class="slide">2</div>