i18n/en.yaml

@@ -357,7 +357,7 @@
 - id: beta-alert-title
   translation: "Online version closed, beta access only"
 - id: beta-alert-text
-  translation: 'happyDomain is evolving: soon, continuously test your domains'' security and monitor every service exposed through DNS, with zero configuration. We''re rolling out this new version progressively to gather feedback and deliver the best possible service. <a href="/en/beta/">Learn more</a>.'
+  translation: 'happyDomain is evolving: soon, continuously test your domains'' security and monitor every service exposed through DNS — with zero configuration. We''re rolling out this new version progressively to gather feedback and deliver the best possible service. <a href="/en/beta/">Learn more</a>.'
 - id: beta-alert-button
   translation: "Join the beta"
 

layouts/partials/carousel.html

@@ -1,98 +1,28 @@
 {{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
-<div class="carousel-wrap position-relative">
+<section
-    <button
+    id="screenshots"
-        class="carousel-btn carousel-btn-left"
+    class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
-        type="button"
+    style="
-        aria-label="Défiler à gauche"
+        background-color: var(--hd-plum-600);
-        data-carousel-dir="-1"
+        gap: 1em 1em;
-    >
+        overflow-x: scroll;
-        <i class="bi bi-chevron-left"></i>
+    "
-    </button>
+>
-
+    {{ range sort .Site.Params.carousel "weight" }}
-    <section
+    <figure class="my-5 me-5 text-center" style="min-width: 65vw">
-        id="screenshots"
+        <a href="{{ .image }}">
-        class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
+            <img
-        style="
+                class="rounded img-thumbnail"
-            background-color: var(--hd-plum-600);
+                src="{{ .image }}"
-            gap: 1em 1em;
+                alt="{{ .title }}"
-            overflow-x: scroll;
+                loading="lazy"
-        "
+                style="max-height: 80vh"
-    >
+            />
-        {{ range sort .Site.Params.carousel "weight" }}
+        </a>
-        <figure class="my-5 me-5 text-center" style="min-width: 65vw">
+        <figcaption class="mt-2 text-center">
-            <a href="{{ .image }}">
+            {{ .description | markdownify }}
-                <img
+        </figcaption>
-                    class="rounded img-thumbnail"
+    </figure>
-                    src="{{ .image }}"
+    {{ end }}
-                    alt="{{ .title }}"
+</section>
-                    loading="lazy"
-                    style="max-height: 80vh"
-                />
-            </a>
-            <figcaption class="mt-2 text-center">
-                {{ .description | markdownify }}
-            </figcaption>
-        </figure>
-        {{ end }}
-    </section>
-
-    <button
-        class="carousel-btn carousel-btn-right"
-        type="button"
-        aria-label="Défiler à droite"
-        data-carousel-dir="1"
-    >
-        <i class="bi bi-chevron-right"></i>
-    </button>
-</div>
-
-<style>
-    .carousel-wrap .carousel-btn {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 10;
-        background: var(--hd-plum-600);
-        border: 2px solid rgba(255, 255, 255, 0.85);
-        border-radius: 50%;
-        width: 3rem;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
-        cursor: pointer;
-        font-size: 1.4rem;
-        color: white;
-        transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
-    }
-
-    .carousel-wrap .carousel-btn:hover {
-        background: var(--hd-plum-700, #4a1f5c);
-        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
-        transform: translateY(-50%) scale(1.08);
-    }
-
-    .carousel-wrap .carousel-btn-left {
-        left: 0.5rem;
-    }
-
-    .carousel-wrap .carousel-btn-right {
-        right: 0.5rem;
-    }
-</style>
-
-<script>
-    (function () {
-        var scroller = document.getElementById("screenshots");
-        if (!scroller) return;
-        var buttons = scroller.parentNode.querySelectorAll(".carousel-btn");
-        buttons.forEach(function (btn) {
-            btn.addEventListener("click", function () {
-                var dir = parseInt(btn.getAttribute("data-carousel-dir"), 10);
-                scroller.scrollBy({ left: dir * scroller.clientWidth * 0.7, behavior: "smooth" });
-            });
-        });
-    })();
-</script>
 {{ end }} {{ end }}