diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero_carousel.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero_carousel.html new file mode 100644 index 00000000000..2284c27f63b --- /dev/null +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero_carousel.html @@ -0,0 +1,71 @@ +{% load static i18n %} + + diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html index 566d5abf911..635c554cfac 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html @@ -27,6 +27,8 @@ {% include './fragments/trial_and_error.html' %} + {% include "./fragments/hero_carousel.html" %} + {% include './fragments/petition_cta.html' %} diff --git a/source/images/youtube-regrets/hero-carousel/2022/carousel-1.jpg b/source/images/youtube-regrets/hero-carousel/2022/carousel-1.jpg new file mode 100644 index 00000000000..a97f479758a Binary files /dev/null and b/source/images/youtube-regrets/hero-carousel/2022/carousel-1.jpg differ diff --git a/source/images/youtube-regrets/hero-carousel/2022/carousel-2.jpg b/source/images/youtube-regrets/hero-carousel/2022/carousel-2.jpg new file mode 100644 index 00000000000..3665a9c809f Binary files /dev/null and b/source/images/youtube-regrets/hero-carousel/2022/carousel-2.jpg differ diff --git a/source/images/youtube-regrets/hero-carousel/2022/carousel-3.jpg b/source/images/youtube-regrets/hero-carousel/2022/carousel-3.jpg new file mode 100644 index 00000000000..893f104ae43 Binary files /dev/null and b/source/images/youtube-regrets/hero-carousel/2022/carousel-3.jpg differ diff --git a/source/js/main.js b/source/js/main.js index 5d2a07548bf..fae53f36b0b 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -141,6 +141,11 @@ let main = { initYoutubeRegretsCarousel(); } + // YouTube Regrets 2022 page + if (document.querySelector("#view-youtube-regrets-2022")) { + initYoutubeRegretsCarousel(); + } + // Shared YouTube Regrets Pages if (document.querySelector(".youtube-regrets-shared")) { initYoutubeRegretsResearchCountUp(); diff --git a/source/sass/views/youtube-regrets-2021-utils.scss b/source/sass/views/youtube-regrets-2021-utils.scss index ad21d5d6aa3..77edd664ba8 100644 --- a/source/sass/views/youtube-regrets-2021-utils.scss +++ b/source/sass/views/youtube-regrets-2021-utils.scss @@ -17,4 +17,12 @@ margin: 300px auto 130px; } } + + &--carousel { + margin: 50px auto; + + @media (min-width: $bp-lg) { + margin: 100px auto; + } + } } diff --git a/source/sass/views/youtube-regrets-2022.scss b/source/sass/views/youtube-regrets-2022.scss index 3bfa9aca2f0..2c633828314 100644 --- a/source/sass/views/youtube-regrets-2022.scss +++ b/source/sass/views/youtube-regrets-2022.scss @@ -1,4 +1,6 @@ .youtube-regrets-2022 { + $font-zilla: "Zilla Slab", sans-serif; + .recommendations { background-color: $black; padding-top: 85px; @@ -47,4 +49,9 @@ padding: 230px 0 200px; } } + + @import "./youtube-regrets-2021-utils"; + @import "../../../node_modules/swiper/swiper-bundle"; + @import "./youtube-regrets-2021-carousel"; + @import "./youtube-regrets-2021-carousel-hero"; }