feat(landing): a little better landing

assets/sass/general.scss

@@ -174,4 +174,23 @@ img {
     display: flex;
     justify-content: flex-end;
     padding-bottom: 1.5rem;
+    padding-top: 1rem;
+}
+
+figure {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.layout-two-spaced {
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem 0;
+}
+
+@media (max-width: $md-breakpoint) {
+    .layout-two-spaced {
+        display: block;
+    }
 }

assets/sass/landing.scss

@@ -266,6 +266,11 @@
 .history-component__content {
 }
 
+
+.history-carousel {
+    background: rgba(1, 1, 1, 0.05);
+}
+
 .history-container {
     .double-horizontal-image-container {
         display: grid;

assets/sass/page_container.scss

@@ -39,10 +39,12 @@
 @media (max-width: $sm-breakpoint) {
     .page-container {
         width: 100%;
-        padding: 0 .8rem;
+        padding-left: .8rem;
+        padding-right: .8rem;
     }
     .page-full {
-        padding: 0 .8rem;
+        padding-left: .8rem;
+        padding-right: .8rem;
     }
 }
 

layouts/index.html

@@ -18,7 +18,7 @@
     <div class="accent-separator">
     </div>
 
-    <div class="page-container" style="padding: 2rem 0; display: flex; justify-content: space-between"> 
+    <div class="page-container layout-two-spaced"> 
         <p>Campagne d'adhésion 2024, nous avons besoin de vous !</p>
         <a href="/adhesion" class="button">Adhérer !</a>
     </div>
@@ -41,7 +41,7 @@
             <div class="page-container">
                 <h2>La chapelle au fil du temps</h2>
             </div>
-            <div class="carousel" aria-label="Histoire de la chapelle">
+            <div class="carousel history-carousel" aria-label="Histoire de la chapelle">
                 <ol class="carousel__viewport">
 
                     <li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
@@ -229,13 +229,13 @@
                                         <p>
                                     </div>
                                     <div class="image-container">
-                                        {{ $image := resources.Get "images/assemblee_constitutive_ensemble.jpg" }}
+                                        {{ $image := resources.Get "images/activites/visite_28_fev_2023_randonneurs.jpg" }}
                                         <figure class="slide-image image-with-caption">
                                             <img
                                                 alt="Photo de groupe de personnes impliqués dans l'association"
                                                 src="{{ $image.RelPermalink }}"
                                             />
-                                            <figcaption>L'assemblée générale fondatrice de 2022</figcaption>
+                                            <figcaption>Visite de la chapelle par des randonneurs</figcaption>
                                         </figure>
                                     </div>
                                 </div>