From f47f04b07dcded61b6a3d34c6bde616293c4294e Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Fri, 14 Jul 2023 15:24:20 +0200 Subject: [PATCH] fix(adhesion): play icon cover --- assets/images/icons/circle-play.svg | 1 + assets/sass/adhesion.scss | 290 +++++++++++++++------------- content/adhesion/_index.md | 6 +- layouts/adhesion/list.html | 58 ++++-- layouts/countdown/list.html | 2 +- 5 files changed, 206 insertions(+), 151 deletions(-) create mode 100644 assets/images/icons/circle-play.svg diff --git a/assets/images/icons/circle-play.svg b/assets/images/icons/circle-play.svg new file mode 100644 index 0000000..3aefb67 --- /dev/null +++ b/assets/images/icons/circle-play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/sass/adhesion.scss b/assets/sass/adhesion.scss index ef91329..d3071c8 100644 --- a/assets/sass/adhesion.scss +++ b/assets/sass/adhesion.scss @@ -1,153 +1,179 @@ - .adhesion-body { overflow: hidden !important; height: 100%; -} -.root { - overflow: hidden; - height: 100%; - - - display: flex; - flex-direction: column; - - -} - -.adhesion-container { - background-color: black; - width: 100%; - flex-grow: 1; - // height: 100%; - // min-height: 100%; - // height: 90vh; - - .video-presentation { + .root { + overflow: hidden; height: 100%; - iframe { - width: 100%; + + display: flex; + flex-direction: column; + } + + .adhesion-container { + background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, darken($background, 15%) 100%); + + width: 100%; + flex-grow: 1; + + .video-presentation { height: 100%; - } - } - -} - -.adhesion { - -} - -.adhesion-footer { - width: 100%; - height: auto; - padding: 1rem 0; - - background-color: $background; - display: flex; - justify-content: center; - align-items: center; -} - -.adhesion-btns { - display: flex; - justify-content: space-between; -} - -.btn { - background-color: white; - opacity: 0.8; - transition: 0.2s all; - - .btn__icon { - margin-right: 1rem; - width: 2rem; - height: 2rem; - } - - &:hover { - opacity: 1; - } -} - -.subscribe-button { - text-transform: uppercase; - display: flex; - justify-content: center; - align-items: center; - border-radius: 35px; - color: black; - text-decoration: none; - padding: .7rem 2rem; -} - -.socials { - - display: flex; - list-style-type: none; - padding: 0; - margin: 0; - - li { - background-color: white; - border-radius: 50%; - - width: 3rem; - height: 3rem; - margin-right: 1rem; - - &:last-of-type { - margin-right: 0; - } - a { - display: block; - width: 100%; - height: 100%; - text-transform: uppercase; - - svg { - display: block; - padding: .7rem; - fill: black; + iframe { width: 100%; height: 100%; } } } -} -// @media (min-height: 800px) and (max-height: 900px) { -// .body { -// display: none; -// } -// .adhesion-container { -// height: 76vh !important; -// } -// .adhesion-footer { -// height: 100% !important; -// } -// } + .video-presentation-cover { + position: relative; -@media (max-width: $mobile-breakpoint) { - .adhesion-footer { - height: auto; - } + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; - .adhesion-footer { - .subscribe-button { - margin-bottom: 1rem; + button { + width: 6rem; + background: transparent; + border: none; + border-radius: 50%; + cursor: pointer; + + .btn-icon { + fill: white; + } } - .adhesion-btns { - flex-direction: column; - } - .socials { + + .video-cover__back { + width: 100%; + height: 100%; + z-index: -1; + background-color: $background; + position: absolute; + bottom: 0; + + display: flex; justify-content: center; + align-items: center; + overflow: hidden; + + .back-icon { + width: 50%; + fill: white; + opacity: 0.6; + position: relative; + top: 0rem; + } + } + } + + .video-cover__content { + display: flex; + flex-direction: column; + align-items: center; + + padding: 3rem; + + color: white; + cursor: pointer; + } + + .adhesion-footer { + width: 100%; + height: auto; + padding: 1rem 0; + + background-color: $background; + display: flex; + justify-content: center; + align-items: center; + } + + .adhesion-btns { + display: flex; + justify-content: space-between; + } + + .btn { + background-color: white; + opacity: 0.8; + transition: 0.2s all; + + .btn__icon { + margin-right: 1rem; + width: 2rem; + height: 2rem; + } + + &:hover { + opacity: 1; + } + } + + .subscribe-button { + text-transform: uppercase; + display: flex; + justify-content: center; + align-items: center; + border-radius: 35px; + color: black; + text-decoration: none; + padding: .7rem 2rem; + } + + .socials { + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + + li { + background-color: white; + border-radius: 50%; + + width: 3rem; + height: 3rem; + margin-right: 1rem; + + &:last-of-type { + margin-right: 0; + } + a { + display: block; + width: 100%; + height: 100%; + text-transform: uppercase; + + svg { + display: block; + padding: .7rem; + fill: black; + width: 100%; + height: 100%; + } + } + + } + } + + @media (max-width: $mobile-breakpoint) { + .adhesion-footer { + height: auto; + } + + .adhesion-footer { + .subscribe-button { + margin-bottom: 1rem; + } + .adhesion-btns { + flex-direction: column; + } + .socials { + justify-content: center; + } } } } -// @media (max-width: $xs-breakpoint) { -// .adhesion-container { -// height: 80vh; -// } -// } diff --git a/content/adhesion/_index.md b/content/adhesion/_index.md index f2182d4..0dead49 100644 --- a/content/adhesion/_index.md +++ b/content/adhesion/_index.md @@ -1,10 +1,12 @@ --- -title: "Campagne d'adhésion l'Étoile de Bethléem - 2023-2024" +title: "Campagne d'adhésion 2023-2024" with_header: false with_footer: false body_class: "adhesion-body" with_normal_config: false -description: Adhérez et soutenez nous ! +description: Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye. featured_image: src: ./images/default_logo.png --- + +Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye. diff --git a/layouts/adhesion/list.html b/layouts/adhesion/list.html index 8e1270a..503f864 100644 --- a/layouts/adhesion/list.html +++ b/layouts/adhesion/list.html @@ -1,22 +1,25 @@ {{ define "main" }}
-
- - - - - - - - +
+
+ {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }} + +
+
+ +

Regarder le teaser

+
+
+
@@ -57,5 +60,28 @@
+ + {{ end }} diff --git a/layouts/countdown/list.html b/layouts/countdown/list.html index c682e8d..ad6b234 100644 --- a/layouts/countdown/list.html +++ b/layouts/countdown/list.html @@ -4,7 +4,7 @@
- {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }} + {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}