Publish 2024-09-27

Author: alexanderby

images/plus-screen-1.png

@@ -42,66 +42,10 @@ <h3 class="slogan">
 
     <div class="carousel">
         <div class="carousel-wrapper">
-            <template id="carousel-card-template">
-                <div class="carousel-card__name">
-                    Dark Reader Times
-                </div>
-                <div class="carousel-card__date">
-                    September 25, 2024
-                </div>
-                <div class="carousel-card__heading">
-                    Incredible Dark Mode
-                </div>
-                <div class="carousel-card__article">
-                    Trusted by <strong>9,000,000 users</strong>.
-                    Rating 4.7 ★★★★★.
-                    Developed since 2014.
-                </div>
-                <div class="carousel-card__heading">
-                    Custom Colors
-                </div>
-                <div class="carousel-card__article">
-                    Set background and text color <strong>comfortable</strong> for your eyes.
-                </div>
-                <div class="carousel-card__heading">
-                    Premium Themes
-                </div>
-                <div class="carousel-card__article">
-                    Choose from professionally configured <strong>theme presets</strong>.
-                </div>
-            </template>
-            <script>
-                function insertCarouselCard() {
-                    /** @type {HTMLTemplateElement} */
-                    const template = document.getElementById('carousel-card-template');
-                    const clone = template.content.cloneNode(true);
-                    const script = document.currentScript;
-                    script.parentElement.insertBefore(clone, script.nextElementSibling);
-                }
-            </script>
-            <div class="carousel-card" style="--bg: hsl(260, 30%, 10%); --text: hsl(255, 25%, 60%);">
-                <script>
-                    insertCarouselCard();
-                </script>
-            </div>
-            <div class="carousel-card" style="--bg: hsl(210, 25%, 10%); --text: hsl(80, 25%, 50%);">
-                <script>
-                    insertCarouselCard();
-                </script>
-                <div class="carousel-card__app">
-                    <img src="/images/plus-palette.png">
-                </div>
-            </div>
-            <div class="carousel-card" style="--bg: hsl(31, 15%, 54%); --text: hsl(0, 0%, 0%);">
-                <script>
-                    insertCarouselCard();
-                </script>
-            </div>
-            <div class="carousel-card" style="--bg: hsl(0, 0%, 0%); --text: hsl(200, 5%, 55%);">
-                <script>
-                    insertCarouselCard();
-                </script>
-            </div>
+            <img class="carousel-screenshot" src="/images/plus-screen-1.png">
+            <img class="carousel-screenshot" src="/images/plus-screen-3.png">
+            <img class="carousel-screenshot" src="/images/plus-screen-2.png">
+            <img class="carousel-screenshot" src="/images/plus-screen-4.png">
         </div>
     </div>
 
@@ -121,4 +65,4 @@ <h3 class="slogan">
 
 </body>
 
-</html>
+</html>

images/plus-screen-2.png

@@ -143,6 +143,7 @@ footer {
     overflow: auto;
     padding-bottom: 1rem;
     scroll-snap-type: x mandatory;
+    touch-action: pan-x;
     width: 20rem;
 }
 
@@ -151,80 +152,14 @@ footer {
     flex-direction: row;
     flex-wrap: nowrap;
     gap: 1rem;
+    touch-action: pan-x;
 }
 
-.carousel-card {
-    background-color: var(--bg);
+.carousel-screenshot {
     border: 1px solid rgb(49, 46, 58);
     border-radius: 1rem;
     box-shadow: inset 0 0 0 0.25rem black;
-    color: var(--text);
+    display: inline-block;
     flex: none;
-    height: 20rem;
-    overflow: hidden;
-    position: relative;
-    scroll-snap-align: start;
     width: 12rem;
 }
-
-.carousel-card__name {
-    font-family: serif;
-    font-weight: 900;
-    font-size: 1rem;
-    font-style: italic;
-    margin-top: 1rem;
-    text-align: center;
-}
-
-.carousel-card__date {
-    background-color: color-mix(in srgb, var(--bg), var(--text) 10%);
-    font-family: system-ui;
-    font-weight: bold;
-    font-size: 0.5rem;
-    line-height: 0.5rem;
-    margin: 0.5rem 0.25rem;
-    padding: 0.5rem 0.75rem;
-    position: relative;
-    text-align: left;
-
-    &::after {
-        content: "☰";
-        display: inline-block;
-        font-size: 0.75rem;
-        line-height: 0.5rem;
-        position: absolute;
-        right: 1rem;
-    }
-}
-
-.carousel-card__heading {
-    font-family: system-ui;
-    font-weight: bold;
-    font-size: 1rem;
-    margin: 0.5rem 1rem;
-    text-align: left;
-}
-
-.carousel-card__article {
-    color: color-mix(in srgb, var(--text), var(--bg) 20%);
-    font-family: system-ui;
-    font-weight: normal;
-    font-size: 0.75rem;
-    margin: 0 1rem;
-    text-align: left;
-}
-
-.carousel-card__app {
-    background-color: black;
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-
-    img {
-        border-top: 1px solid rgb(49, 46, 58);
-        display: inline-block;
-        width: 95%;
-    }
-}