From 975203a718d0a3bc01418e6021887374f6d56adb Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Sat, 18 May 2024 15:06:08 +0200 Subject: [PATCH] feat(shortcodes): external card link (youtube) --- assets/sass/card.scss | 45 ++++++++++++++++++- assets/sass/figures.scss | 2 + assets/sass/main.scss | 7 +++ .../2024-01-10_flechage-panneaux/index.md | 2 - content/geocaching/2023/vierge-noire/index.md | 20 ++++++--- layouts/shortcodes/youtube-card.html | 16 +++++++ 6 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 layouts/shortcodes/youtube-card.html diff --git a/assets/sass/card.scss b/assets/sass/card.scss index 3c2c834..3866c02 100644 --- a/assets/sass/card.scss +++ b/assets/sass/card.scss @@ -1,6 +1,49 @@ .card { - padding: 1rem; + 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; + } + } +} + diff --git a/assets/sass/figures.scss b/assets/sass/figures.scss index cd42063..c0d894f 100644 --- a/assets/sass/figures.scss +++ b/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 { diff --git a/assets/sass/main.scss b/assets/sass/main.scss index beb4c5a..57bdd9d 100644 --- a/assets/sass/main.scss +++ b/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; +} diff --git a/content/actualites/2024-01-10_flechage-panneaux/index.md b/content/actualites/2024-01-10_flechage-panneaux/index.md index d73fb01..22a2e3d 100644 --- a/content/actualites/2024-01-10_flechage-panneaux/index.md +++ b/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. -
- {{}} {{}} -
-Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye. -
+## Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye. -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. +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. -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 +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. + +## 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" +>}} diff --git a/layouts/shortcodes/youtube-card.html b/layouts/shortcodes/youtube-card.html new file mode 100644 index 0000000..ae0ca13 --- /dev/null +++ b/layouts/shortcodes/youtube-card.html @@ -0,0 +1,16 @@ + + +{{ $videoUrl := printf "https://youtube.com/watch?v=%s" (.Get "id") }} +{{ $thumbnailUrl := printf "https://img.youtube.com/vi/%s/0.jpg" (.Get "id") }} + + + Miniature youtube +
+

{{ .Get "title" }}

+

{{ .Get "description" }}

+

+ {{ 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") }} +

+
+