diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss index 1e6460ad8ab01ce45b1a6f918b091a38bf10ca69..a8537e31632f2588d2c3f8b802648240712cb16b 100644 --- a/main/styleguide/source/css/organisms/navbar.pcss +++ b/main/styleguide/source/css/organisms/navbar.pcss @@ -81,22 +81,20 @@ .bar1, .bar2, .bar3 { width: 35px; - height: 5px; + height: 2px; background-color: white; margin: 6px 0; transition: 0.4s; } #menuToggle:checked + label .bar1 { - -webkit-transform: rotate(45deg) translate(-9px, 6px); - transform: rotate(-45deg) translate(-9px, 6px); + transform: rotate(-45deg) translate(-3px, 4px); background-color: black; } #menuToggle:checked + label .bar2 {opacity: 0;} #menuToggle:checked + label .bar3 { - -webkit-transform: rotate(-45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); background-color: black; } diff --git a/main/templates/main/blocks/people_overview_block.html b/main/templates/main/blocks/people_overview_block.html index bbb8c4c3e1ab7140cb34533a90fa93328b4b9ac7..b67bf508849f1e7a8f383a77bf94b7ee862a335a 100644 --- a/main/templates/main/blocks/people_overview_block.html +++ b/main/templates/main/blocks/people_overview_block.html @@ -1,19 +1,22 @@ {% load wagtailimages_tags %} -<div class="container--medium mb-8 xl:min-h-screen flex flex-col justify-center lg:mb-16"> - <h2 class="head-7xl xl:text-center mb-6 xl:mb-28"> - {{ self.title }} - </h2> - <div class="flex flex-wrap space-x-1 justify-center gap-2 md:gap-1 items-center"> - {% for box in self.list %} - {% image box.image fill-500x500 as box_image %} - <div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80" - style="background-image: url('{{ box_image.url }}')"> - <h5 class="head-alt-md text-white mt-24 mb-8"> - {{ box.title }} - </h5> - {% include 'main/includes/button_animated.html' with btn_text=box.button_text btn_link=box.button_link %} - </div> - {% endfor %} +<div class="bg-cover bg-no-repeat section-clip py-16 xl:min-h-screen lg:py-36"> + <div class="container--wide mx-auto z-10"> + <h2 class="head-7xl xl:text-center mb-6 xl:mb-28"> + {{ self.title }} + </h2> + <div class="flex flex-wrap gap-2 md:gap-1 justify-center items-center md:flex-row"> + {% for box in self.list %} + {% image box.image fill-500x500 as box_image %} + <div + class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80" + style="background-image: url('{{ box_image.url }}')"> + <h5 class="head-alt-md text-white mt-24 mb-8"> + {{ box.title }} + </h5> + {% include 'main/includes/button_animated.html' with btn_text=box.button_text btn_link=box.button_link %} + </div> + {% endfor %} + </div> </div> </div>