Add initial project

index.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snappy</title>
+    <style>
+        html,
+        body {
+            /* Transitional from https://modernfontstacks.com/ */
+            font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+            font-weight: normal;
+            font-size: 1.25rem;
+            background-color: #f8f9fa;
+            color: #343a40;
+
+            @media (prefers-color-scheme: dark) {
+                background-color: #212529;
+                color: #f8f9fa;
+            }
+        }
+
+        body {
+            margin: 2rem;
+        }
+
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 1em;
+        }
+
+        .snappy-carousel {
+            counter-reset: snappy-slide;
+            max-height: 300px;
+        }
+
+        .snappy-slide {
+            counter-increment: snappy-slide;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 33%;
+            aspect-ratio: 3/2;
+            max-height: 400px;
+
+            background-color: #f1f3f5;
+            color: #343a40;
+
+            @media (prefers-color-scheme: dark) {
+                background-color: #495057;
+                color: #f8f9fa;
+            }
+        }
+
+        .snappy-slide:nth-child(even) {
+            background-color: #e9ecef;
+
+            @media (prefers-color-scheme: dark) {
+                background-color: #343a40;
+                color: #f8f9fa;
+            }
+        }
+
+        .snappy-slide:before {
+            content: counter(snappy-slide);
+        }
+
+        .snappy-controls {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            margin-top: 1rem;
+        }
+
+        .snappy-button {
+            width: 1.5rem;
+            height: 1.5rem;
+            font-size: 1rem;
+            border: none;
+            background-color: #f1f3f5;
+            color: #339af0;
+
+            &:hover,
+            &:active {
+                background-color: #dee2e6;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                background-color: #495057;
+
+                &:hover,
+                &:active {
+                    background-color: #868e96;
+                    color: #1971c2;
+                }
+            }
+        }
+
+        .snappy-pagination {
+            display: flex;
+        }
+
+        .snappy-pagination-dot {
+            width: 0.66rem !important;
+            height: 0.66rem !important;
+            border-radius: 0.33rem;
+            background-color: #dee2e6 !important;
+            margin: 0 0.25rem;
+
+            transition-property: width, background;
+            transition-duration: .8s;
+            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+
+            cursor: pointer;
+        }
+
+        .snappy-pagination-dot:hover {
+            background-color: #adb5bd !important;
+        }
+
+        .snappy-pagination-dot.is-active {
+            background-color: #1971c2 !important;
+            width: 2rem !important;
+        }
+    </style>
+    <link rel="stylesheet" href="dist/snappy.css">
+</head>
+
+<body>
+
+    <h1>Snappy</h1>
+
+    <!--
+        Options
+        -------
+
+        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"
+        
+        data-snap-align="center"
+        data-snap-align="start"
+        data-snap-align="end"
+    -->
+    <div id="demo-carousel" class="snappy-carousel" data-gap="1rem" data-snap-align="start">
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+        <div class="snappy-slide"></div>
+    </div>
+
+    <div class="snappy-controls">
+        <button class="snappy-button snappy-prev" data-carousel="demo-carousel">❮</button>
+        <button class="snappy-button snappy-next" data-carousel="demo-carousel">❯</button>
+        <div class="snappy-pagination" data-carousel="demo-carousel"></div>
+    </div>
+
+    <!-- Javascript is only needed for pagination and buttons -->
+    <script src="dist/snappy.js" defer></script>
+</body>
+
+</html>