fix(landing): various style corrections and add credit

assets/sass/article.scss

@@ -90,10 +90,6 @@
         .article__summary {
             padding-bottom: 1rem;
         }
-        .article__readmore {
-            border: 1px solid white;
-
-        }
     }
 
     &:hover {

assets/sass/button.scss

@@ -24,15 +24,18 @@
     }
 }
 
-.button-border {
+.button.button-border {
     border: 1px solid $accent-dark;
 }
 
 .button.button-transparent {
-    background-color: transparent;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid white;
 
     &:hover {
         background-color: transparent;
+        opacity: 0.5;
         color: white;
     }
 }

assets/sass/carousel.scss

@@ -114,10 +114,13 @@ $height: 30rem;
     z-index: 0;
 
     .slide-image {
+        width: 100%;
         padding: 0;
         margin: 0;
         img {
             border-radius: 2px;
+            object-fit: cover;
+            max-height: 22rem;
         }
         figcaption {
             font-size: .9rem;
@@ -343,6 +346,8 @@ $height: 30rem;
             img {
                 width: auto;
                 height: 100%;
+                max-height: initial !important;
+                object-fit: contain;
             }
         }
     }

assets/sass/general.scss

@@ -43,32 +43,6 @@ a:hover {
     opacity: 0.8;
 }
 
-
-.secondary-bg {
-    h2 {
-        color: white;
-    }
-    a {
-        color: white;
-    }
-    color: white;
-
-    .button {
-        background-color: $background-secondary;
-        color: white;
-        &:hover {
-            background-color: lighten($background-secondary, 14%);
-        }
-    }
-
-    background-color: darken($background-secondary, 15%);
-}
-
-.separation-section {
-    margin-top: 3rem;
-    padding: 1.2rem 0;
-}
-
 .w-100 {
     width: 100px;
 }
@@ -197,3 +171,19 @@ figure {
         display: block;
     }
 }
+
+.icon-twitter {
+    fill: lighten(#0C72B7, 20%) !important;
+}
+
+.icon-mastodon {
+    fill: lighten(#5C4CE2, 20%) !important;
+}
+
+.icon-youtube {
+    fill: lighten(#FF1A1A, 15%) !important;
+}
+
+.icon-facebook {
+    fill: lighten(#0866FF, 20%) !important;
+}

assets/sass/landing.scss

@@ -91,6 +91,42 @@
     }
 }
 
+.section-with-bg {
+    position: relative;
+    .section__bg {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100;
+        background-position-x: center;
+        background-size: cover;
+    }
+}
+
+.end-landing-section {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    .section__content {
+        h2 {
+            color: white;
+        }
+        a {
+            color: white;
+        }
+        color: white;
+
+        background-color: rgba(darken($background, 10%), .4);
+        padding: 1.2rem 0;
+        position: relative;
+        z-index: 1;
+    }
+    .section__bg {
+        // avoir l'etoile dans le cadre sur desktop
+        background-position-y: 28%;
+    }
+}
+
 .news-section {
     .side-icon {
         left: -50px;
@@ -137,9 +173,6 @@
     display: block;
 }
 
-.cover__backdrop {
-}
-
 .landing__title {
     font-weight: 2rem;
 }
@@ -152,11 +185,6 @@
 
 @import 'landing/timeline.scss';
 
-@media (max-width: $lg-breakpoint) {
-    .cover__back {
-    }
-}
-
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
@@ -164,7 +192,6 @@
     }
 }
 
-
 .compare-section {
     .compare-items {
         display: grid;
@@ -322,11 +349,6 @@
     }
 }
 
-
-.history-component__content {
-}
-
-
 .history-carousel {
     background: rgba(1, 1, 1, 0.05);
 }
@@ -347,12 +369,23 @@
 .organization-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    column-gap: 2rem;
+    column-gap: 3rem;
     padding-top: 2rem;
     padding-bottom: 2rem;
 
     img {
         border-radius: 3px;
+        object-fit: cover;
+        height: 20rem;
+    }
+}
+
+.organization__image {
+    figure {
+        margin: 0;
+    }
+    figcaption {
+        margin-top: .6rem;
     }
 }
 
@@ -360,13 +393,27 @@
     .cover__back {
         background-position-y: 0;
     }
-
-    .history-container {
-    }
-
     .side-icon {
         display: none;
     }
+
+    .cover__title {
+        font-size: 2.5rem;
+    }
+    
+    .trailer-section {
+        .end-action-container {
+            justify-content: space-between;
+            .button {
+                padding: 1rem 2rem;
+            }
+        }
+    }
+
+    .organization-content {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 }
 
 @media (min-width: $md-breakpoint) {

assets/sass/main.scss

@@ -11,7 +11,7 @@ $xs-breakpoint: 400px;
 // #A5A692
 // #BFB78F
 $background: #025E73; // primary
-$background-secondary: #BFB78F;
+$background-secondary: #7592A8;
 $secondary: #011F26;
 $tertiary: #A5A692;
 $accent: #F2A71B;

content/a-propos-du-site/index.md

@@ -12,6 +12,10 @@ Association loi 1901.
 - Responsable technique du site web : Matthieu Bessat
 - Siège : 7 allée des sources, Aubevoye, 27940 Le Val d'Hazey
 
+## Crédits
+
+- Page d'accueil : Photo de la chapelle vue du ciel, photographiée par [Francis Cormon](https://web.archive.org/web/20230314054530/http://www.photo-paramoteur.com/) depuis un paramoteur en 2008.
+
 ## Hébergement
 
 Ce site web est auto-hébergé.
@@ -32,4 +36,3 @@ Pour les curieux, ce site est réalisé avec [Hugo](https://gohugo.io/).
 
 Vous pouvez trouver [le code source de ce site web sur ce dépot en ligne](https://forge.lefuturiste.fr/etoiledebethleem/website).
 
-

layouts/index.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
-    <div class="cover__container">
     {{ $cover := (resources.Get (printf "%s" ("images/cover_1.jpg" | safeURL))) }}
+    {{ $cover = $cover.Resize "1920x" }}
+    <div class="cover__container">
         {{ with $cover }}
         <div class="cover__back" style="background-image: url('{{ .RelPermalink }}')">
             <!-- For now we are not going to show a video -->
@@ -119,7 +120,7 @@
                                     <div>
                                         <h3>Les Chartreux</h3>
                                         <p>
-                                            Le cardinal fit don du domaine aux Chartreux d'Aubevoye. Chaque Noël, ils se rendèrent en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle. 
+                                            Le cardinal fit don du domaine aux Chartreux d'Aubevoye. Chaque Noël, ils se rendaient en procession à la lueure des torches pour célébrer la messe de minuit dans la crypte. Ils demandèrent au Cardinal de créer un détachement de la chartreuse à la chapelle. 
                                         </p>
                                         <p>
                                             Ils s'occupèrent alors du domaine : les vignes des cotaux et la maintenance de la chapelle jusqu'à la révolution 1791 où ils furent chassés.
@@ -229,6 +230,7 @@
                                     </div>
                                     <div class="image-container">
                                         {{ $image := resources.Get "images/chapelle_2014_sud.jpg" }}
+                                        {{ $image := $image.Resize "800x" }}
                                         <figure class="slide-image image-with-caption">
                                             <img
                                                 alt="Chapelle en mauvaise état en hiver derrière les arbres."
@@ -380,7 +382,7 @@
                             src="{{ $image.RelPermalink }}"
                             alt="Photo de groupe de personnes impliqués dans l'association"
                         />
-                        <figcaption>Assemblée constituante 2022</figcaption>
+                        <figcaption>Les membres fondateurs à l'assemblée constituante</figcaption>
                     </figure>
                 </div>
                 <div class="organization__explain">
@@ -557,16 +559,25 @@
         </section>
 	</main>
 
-    <div class="separation-section secondary-bg">
+    <div class="section section-with-bg end-landing-section">
+        {{ with $cover }}
+        <div class="section__bg" style="background-image: url('{{ .RelPermalink }}')">
+        </div>
+        {{ end }}
+        <div class="section__content">
             <div class="page-container">
                 <h2>Rejoignez nous dans notre aventure !</h2>
-            <p>Déjà plus de 80 membres !<p>
+                <p>
-            <a href="/adhesion" class="button">Adhérer !</a>
+                    Déjà plus de 120 membres !
+                </p>
+                <div class="end-action-container">
+                    <a href="/adhesion" class="button button-transparent">
+                        Adhérer !
+                    </a>
+                </div>
             </div>
         </div>
-	<div class="page-container">
     </div>
-
 
     {{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
     <script defer src="{{ $js.Permalink }}"></script>

layouts/partials/footer.html

@@ -6,30 +6,35 @@
         <div class="site-footer__links">
             <ul class="site-footer-socials">
                 <li>
-                    <a href="{{ .Site.Params.socials.peertube }}">
+                    <a href="{{ .Site.Params.socials.facebook }}" title="Page Facebook">
-                        {{ partial "helpers/svg" (dict "path" "icons/peertube" "class" "site-footer-socials__logo") }}
+                        {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo icon-facebook") }}
                     </a>
                 </li>
                 <li>
-                    <a href="{{ .Site.Params.socials.mastodon }}">
+                    <a href="{{ .Site.Params.contact.helloasso }}" title="Page HelloAsso">
-                        {{ partial "helpers/svg" (dict "path" "icons/mastodon" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li>
-                    <a href="{{ .Site.Params.socials.facebook }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li>
-                    <a href="{{ .Site.Params.socials.youtube }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li>
-                    <a href="{{ .Site.Params.contact.helloasso }}">
                         {{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "site-footer-socials__logo") }}
                     </a>
                 </li>
+                <li>
+                    <a href="{{ .Site.Params.socials.twitter }}" title="Fil Twitter/X">
+                        {{ partial "helpers/svg" (dict "path" "icons/twitter" "class" "site-footer-socials__logo icon-twitter") }}
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ .Site.Params.socials.youtube }}" title="Chaîne YouTube">
+                        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo icon-youtube") }}
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ .Site.Params.socials.mastodon }}" title="Fil Mastodon">
+                        {{ partial "helpers/svg" (dict "path" "icons/mastodon" "class" "site-footer-socials__logo icon-mastodon") }}
+                    </a>
+                </li>
+                <li>
+                    <a href="{{ .Site.Params.socials.peertube }}" title="Chaîne Peertube">
+                        {{ partial "helpers/svg" (dict "path" "icons/peertube" "class" "site-footer-socials__logo") }}
+                    </a>
+                </li>
             </ul>
             <ul class="inline-menu-list">
                 <li><a href="/association">Notre association</a></li>