Update margins

layouts/partials/carousel.html

@@ -1,7 +1,7 @@
 {{ if isset .Site.Params "carousel" }}
 {{ if gt (len .Site.Params.carousel) 0 }}
 <div class="anchor" id="features"></div>
-<div class="carousel text-light p-3 pt-5 d-flex flex-nowrap" style="gap: 1em 1em; overflow-x: scroll">
+<div class="carousel text-light p-4 pt-5 d-flex flex-nowrap" style="gap: 1em 1em; overflow-x: scroll">
   {{ range sort .Site.Params.carousel "weight" }}
   <figure class="" style="min-width: 40vw">
     <a href="{{ .image }}">

layouts/partials/jumbo.html

@@ -7,58 +7,58 @@
       happy<strong>Domain</strong>
       {{ i18n "lead" | markdownify }}
     </p>
-    <p>
+    <p class="mt-4">
       <a class="btn btn-primary mt-2" data-umami-event="jumbo-tryit" href="/join">{{ i18n "tryit" }} &#187;</a>
       <a class="btn btn-outline-secondary mt-2" data-umami-event="jumbo-downloads" href="#downloads">{{ i18n "downloadit" }} &#187;</a>
     </p>
   </div>
 
-  <hr class="my-4">
+  <hr class="my-5">
 
   <div class="container">
-    <h4 class="text-center mb-4">
+    <h4 class="text-center mb-5">
       {{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
     </h4>
     <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5">
       <div class="col mb-4">
-        <div class="card h-100">
-          <a href="{{ ref . "/use-happyDomain/freelance" }}" class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-freelance">
-            <img src="/img/screenshots/users/freelance.svg" alt="{{ i18n "freelance" }}" class="w-100 mb-3 flex-grow-1">
+        <a href="{{ ref . "/use-happyDomain/freelance" }}" class="card h-100">
+          <img src="/img/screenshots/users/freelance.webp" alt="{{ i18n "freelance" }}" class="img-top flex-grow-1">
+          <div class="card-body pt-3 list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-freelance">
             <span>{{ i18n "freelance" }}</span>
+          </div>
         </a>
       </div>
-      </div>
       <div class="col mb-4">
-        <div class="card h-100">
-          <a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-sysadmin">
-            <img src="/img/screenshots/users/sysadmin.svg" alt="{{ i18n "sysadmin" }}" class="w-100 mb-3 flex-grow-1">
+        <a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card h-100">
+          <div class="card-body pt-3 list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-sysadmin">
             <span>{{ i18n "sysadmin" }}</span>
+          </div>
+          <img src="/img/screenshots/users/sysadmin.webp" alt="{{ i18n "sysadmin" }}" class="img-top flex-grow-1">
         </a>
       </div>
-      </div>
       <div class="col mb-4">
-        <div class="card h-100">
-          <a class="card-body list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column" data-umami-event="learnmore-devops">
-            <img src="/img/screenshots/users/devops.svg" alt="{{ i18n "devops" }}" class="w-100 mb-3 flex-grow-1">
+        <a class="card h-100">
+          <img src="/img/screenshots/users/devops.webp" alt="{{ i18n "devops" }}" class="img-top flex-grow-1">
+          <div class="card-body list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column" data-umami-event="learnmore-devops">
             <span>{{ i18n "devops" }}</span>
+          </div>
         </a>
       </div>
-      </div>
       <div class="col mb-4">
-        <div class="card h-100">
-          <a href="{{ ref . "/use-happyDomain/cio" }}" class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-cio">
-            <img src="/img/screenshots/users/cio.svg" alt="{{ i18n "cio" }}" class="w-100 mb-3 flex-grow-1">
+        <a href="{{ ref . "/use-happyDomain/cio" }}" class="card h-100">
+          <div class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-cio">
             <span>{{ i18n "cio" }}</span>
-          </a>
           </div>
+          <img src="/img/screenshots/users/cio.webp" alt="{{ i18n "cio" }}" class="img-top flex-grow-1">
+        </a>
       </div>
       <div class="col mb-4">
-        <div class="card h-100">
-          <a href="{{ ref . "/use-happyDomain/geek" }}" class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-geek">
-            <img src="/img/screenshots/users/geek.svg" alt="{{ i18n "geek" }}" class="w-100 mb-3 flex-grow-1">
+        <a href="{{ ref . "/use-happyDomain/geek" }}" class="card h-100">
+          <img src="/img/screenshots/users/geek.webp" alt="{{ i18n "geek" }}" class="img-top flex-grow-1">
+          <div class="card-body list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column" data-umami-event="learnmore-geek">
             <span>{{ i18n "geek" }}</span>
-          </a>
           </div>
+        </a>
       </div>
     </div>
   </div>