fix: card style fix and content fix on geocaching

assets/sass/card.scss

@@ -1,6 +1,50 @@
 .card {
-    padding: 1rem;
+    margin-top: 2rem;
+    padding: 0.5rem;
     border: 1px solid gray;
     border-radius: 2px;
     background-color: #ecf0f1;
+    display: flex; 
+    gap: 2rem;
+
+    .card-image {
+        display: block;
+        margin-right: 0rem;
+        overflow: hidden;
+        height: 100%;
+        width: 300px;
+        flex-grow: 0;
+        flex-shrink: 0;
     }
+
+    .card-action {
+        text-decoration: underline;
+    }
+
+    color: black;
+    text-decoration: none;
+}
+
+@media (max-width: $sm-breakpoint) {
+    .card-link {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 200px;
+            height: 100%;
+        }
+    }
+}
+
+@media (max-width: $xs-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 100% !important;
+        }
+    }
+}
+

assets/sass/figures.scss

@@ -1,5 +1,6 @@
 .fig-img {
     display: inline-block;
+    text-align: center;
     figcaption {
         font-size: .9rem;
         color: $hidden;
@@ -20,6 +21,7 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: 2rem;
+    padding-top: 1rem;
     margin-bottom: 1rem;
     
     figure {

assets/sass/general.scss

@@ -134,6 +134,7 @@ img {
 }
 
 .highlighted {
+    font-size: 2rem;
     font-weight: bold;
 }
 

assets/sass/main.scss

@@ -46,3 +46,10 @@ $hidden: #2C3E50;
 @import 'sliding_gallery.scss';
 @import 'alert.scss';
 
+.small-icon {
+    width: 20px;
+    height: 20px;
+}
+.youtube-icon {
+    fill: #FF0202;
+}

content/actualites/2024-01-10_flechage-panneaux/index.md

@@ -18,8 +18,6 @@ Maintenant la Chapelle n’aura plus de secret pour personne ! 💫
 
 🔎 Nous sommes à la recherche d’une personne au talent de pyrograveur pour remplacer les affiches plastifiées par une pyrogravure comme sur la photo. Merci de vous rapprocher de nous si vous êtes candidat.
 
-<br>
-
 {{<figures-grid>}}
     {{<fig-img
     src="modele_panneau.jpg"

content/geocaching/2023/chapelle-bethleem/index.md

@@ -17,7 +17,9 @@ title: La chapelle de Bethléem et sa crypte
 </div>
 
 
-<span class="highlighted">Félicitations ! Vous venez de découvrir la chapelle de Bethléem</span>, qui abrite une crypte classée à l'inventaire des monuments historiques connue pour être la reproduction à l'échelle de celle qui enchâsse la grotte de la Nativité à Bethléem. 
+<div class="highlighted">Félicitations ! Vous venez de découvrir la cache de la chapelle de Bethléem !</div>
+
+Cette chapelle abrite une crypte inscrite aux monuments historiques connue pour être la reproduction à l'échelle de la grotte de la Nativité à Bethléem en Judée.
 
 Née de la volonté du Cardinal-Archevêque de Rouen Charles 1er de Bourbon-Vendôme (1523-1591), elle fut consacrée en 1582.
 
@@ -25,7 +27,9 @@ Dans la période troublée des guerres de religion, le Cardinal souhaita un lieu
 
 Aujourd'hui nichée dans la forêt, elle domina des coteaux de vignes jusqu'au XVIIème siecle, puis des vergers jusqu'à sa dégradation en juin 2000.
 
-Une association s’est formé pour la sauver, c’est l’Étoile de Bethléem. Il se trouve que vous êtes actuellement sur le site web de l'Association des Amis de la chapelle de Bethléem d'Aubevoye !
+Une association s’est formé pour la sauver, c’est l’Étoile de Bethléem. Il se trouve que vous êtes actuellement sur le site web de l'Association des Amis de la chapelle de Bethléem d'Aubevoye !
+
+Vous pouvez consulter d'avantages de photos d'époques dans la <a href="/images/">gallerie de notre site</a>.
 
 {{< wikipedia_link lang="fr" name="Chapelle de Bethléem (Aubevoye)" >}}
 </div>

content/geocaching/2023/eglise-saint-georges/index.md

@@ -17,7 +17,7 @@ title: L'église Saint-Georges d'Aubevoye
 </div>
 
 <div class="highlighted">
-Bravo ! Vous venez de trouver l'église Saint Georges d'Aubevoye. 
+    Bravo ! Vous venez de trouver la cache de l'église Saint-Georges d'Aubevoye !
 </div>
 
 Ses éléments les plus anciens datent du XIIème siècle, sa construction s'étendant également sur les XIII, XV et XVIeme siècles.

content/geocaching/2023/vierge-noire/index.md

@@ -16,15 +16,21 @@ title: La Vierge noire
 >}}
 </div>
 
-<div class="highlighted">
+<div class="highlighted">Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye.</div>
-Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye.
-</div>
 
 Offerte en 1864 à la commune par François Frédéric Alaboissette, un notable, bienfaiteur et érudit local, cette sculpture métallique du XVIIeme siècle posée sur un socle de briques maçonnées fut inaugurée à l'occasion d'une grande cérémonie le 8 septembre 1866. 
-Un pèlerinage annuel du dimanche le plus proche du 8 septembre, date de la fête de la Nativité de Marie, a perduré jusqu'au début de la seconde moitié du XXème siècle comme en atteste l'ex-voto déposé à ses pieds en 1949 par les habitants d'Aubevoye, après la deuxième guerre mondiale.
 
-Cette statue est elle effectivement une Vierge noire ? 
+Un pèlerinage annuel du dimanche le plus proche du 8 septembre, date de la fête de la Nativité de Marie, a perduré jusqu'au début de la seconde moitié du XXème siècle comme en atteste l'ex-voto, une offrande déposée à ses pieds en 1949 par les habitants d'Aubevoye, après la deuxième guerre mondiale.
-En général, les Vierges noires sont des statues médiévales, sculptées entre le XIème et le XVème siècle, pas nécessairement de couleur noire à l'origine, mais qui s'assombrissent au fil du temps, par vieillissement de la matière, oxydation du métal ou effet de la combustion des cierges votifs. Il en est aussi à qui sont prêtées des origines paléochrétiennes, celtes, romaines, voire égyptiennes.  La tentation pourrait être grande de relier cette statue à une telle tradition. Aubevoye appartenait après tout à l'ancien Pagus de la Madrie (étymologiquement "Domaine de la Mère"), antérieurement à la création du Duché de Normandie. Toutefois, sa facture paraît trop récente pour s'y rattacher
+
+## Cette statue est elle effectivement une Vierge noire ?
+
+En général, les Vierges noires sont des statues médiévales, sculptées entre le XIème et le XVème siècle, pas nécessairement de couleur noire à l'origine, mais qui s'assombrissent au fil du temps, par vieillissement de la matière, oxydation du métal ou effet de la combustion des cierges votifs. Il en est aussi à qui sont prêtées des origines paléochrétiennes, celtes, romaines, voire égyptiennes.  La tentation pourrait être grande de relier cette statue à une telle tradition. Aubevoye appartenait après tout à l'ancien Pagus de la Madrie (étymologiquement "Domaine de la Mère"), antérieurement à la création du Duché de Normandie. Toutefois, sa facture paraît trop récente pour s'y rattacher.
+
+{{< youtube-card
+    id="jLobXIttLhs"
+    title="Vidéo : La Vierge Noire à Aubevoye"
+    description="Montage vidéo montrant un historique de cartes postales ainsi que la récente rénovation de la statue de la Vierge noire d'Aubevoye"
+>}}
 
 </div>
 

layouts/shortcodes/youtube-card.html

@@ -0,0 +1,16 @@
+<!-- Youtube card -->
+
+{{ $videoUrl :=  printf "https://youtube.com/watch?v=%s" (.Get "id") }}
+{{ $thumbnailUrl :=  printf "https://img.youtube.com/vi/%s/0.jpg" (.Get "id") }}
+
+<a href="{{ $videoUrl }}" class="card card-link card-youtube" title="Voir la vidéo &quot;{{ .Get "title" }}&quot; sur YouTube">
+    <img class="card-image" src="{{ $thumbnailUrl }}" alt="Miniature youtube" />
+    <div class="card-content">
+        <h3>{{ .Get "title" }}</h3>
+        <p>{{ .Get "description" }}</p>
+        <p class="card-action">
+        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "small-icon youtube-icon") }}
+        Voir la vidéo sur YouTube {{ partial "helpers/svg" (dict "path" "icons/external" "class" "icon_inline") }}
+        </p>
+    </div>
+</a>