@moreonion/foundist 3.4.0-beta → 3.4.1

package/src/html/thank-you-page-with-banner-and-headline.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "banner" %}
 
@@ -7,7 +9,7 @@
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block banner %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block headline %}
@@ -19,16 +21,16 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block bottom %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-2col.html" %}
-    {% include "src/html/includes/section-quote.html" %}
-    {% include "src/html/includes/section-1col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-2col.html" %}
+    {% include settings.html_path + "/includes/section-quote.html" %}
+    {% include settings.html_path + "/includes/section-1col.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page-with-banner.html

@@ -1,11 +1,13 @@
-{% extends "src/html/templates/share-page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/share-page.html" %}
 
 {% set layout = "banner" %}
 
 {% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
 
 {% block banner %}
-    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+    <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
 {% endblock %}
 
 {% block content %}
@@ -13,9 +15,9 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/menu.html" %}
+    {% include settings.html_path + "/includes/menu.html" %}
 {% endblock %}

package/src/html/thank-you-page.html

@@ -1,4 +1,6 @@
-{% extends "src/html/templates/page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/page.html" %}
 
 {% set layout = "default" %}
 
@@ -6,7 +8,7 @@
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/625/400" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/625/400/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 
@@ -16,9 +18,9 @@
 {% endblock %}
 
 {% block content_bottom %}
-    {% include "src/html/includes/share-buttons.html" %}
+    {% include settings.html_path + "/includes/share-buttons.html" %}
 {% endblock %}
 
 {% block footer %}
-    {% include "src/html/includes/overlay.html" %}
+    {% include settings.html_path + "/includes/overlay.html" %}
 {% endblock %}

package/src/html/typography-static-page.html

@@ -1,14 +1,16 @@
-{% extends "src/html/templates/page.html" %}
+{% import "_globals.html" as settings %}
+
+{% extends settings.html_path + "/templates/page.html" %}
 
 {% block page_title %}This is the main headline{% endblock %}
 
 {% block top %}
-    <p>Experiences short bursts of poo-phoria after going to the loo chirp at birds, destroy the blinds. Spend all night ensuring people don't sleep sleep all day climb leg, so i show my fluffy belly but it's a trap! if you pet it i will tear up your hand yet steal the warm chair right after you get up get video posted to internet for chasing red dot.</p><p>Texts have been generated on <a href="http://www.catipsum.com/">Cat Ipsum</a>, images provided by <a href="http://placekitten.com/">placekitten</a>.</p>
+    <p>Experiences short bursts of poo-phoria after going to the loo chirp at birds, destroy the blinds. Spend all night ensuring people don't sleep sleep all day climb leg, so i show my fluffy belly but it's a trap! if you pet it i will tear up your hand yet steal the warm chair right after you get up get video posted to internet for chasing red dot.</p><p>Texts have been generated on <a href="http://www.catipsum.com/">Cat Ipsum</a>, images provided by <a href="https://loremflickr.com/">LoremFlickr</a>.</p>
 {% endblock %}
 
 {% block content_top %}
     <div class="media-stretch">
-        <img src="http://placekitten.com/800/400" alt="test image with cats" crossorigin="">
+        <img src="https://loremflickr.com/800/400/cat" alt="test image with cats" crossorigin="">
     </div>
 {% endblock %}
 
@@ -24,7 +26,7 @@
     <blockquote>
         <p>Mark territory peer out window, chatter at birds, lure them to mouth vommit food and eat it again. Crusty butthole need to chase tail licks paws sit in box make meme, make cute face.</p>
         <footer>
-            <img src="http://placekitten.com/150/150" alt="test image with cats" crossorigin="">
+            <img src="https://loremflickr.com/150/150/cat" alt="test image with cats" crossorigin="">
             <div>
                 <span class="blockquote-source">Famous Cat</span>
                 <span>CEO of mysterious cat organisation</span>

package/src/scss/components/_accordion.scss

@@ -17,7 +17,6 @@
 
   // Triangle to signal a dropdown
   &:before {
-    @include background-triangle($accordion-triangle-color);
     width: $accordion-triangle-size;
     height: $accordion-triangle-size;
     background-size: $accordion-triangle-size;
@@ -30,6 +29,8 @@
     left: rem-calc(get-side($accordion-item-padding, left));
     // The triangle is vertically centered in the title
     top: calc(50% - #{$accordion-triangle-size * 0.5});
+
+    @include background-triangle($accordion-triangle-color);
   }
   .is-active & {
     &:before {

package/src/scss/components/_headline.scss

@@ -36,6 +36,7 @@ $headline-color: color-pick-contrast(
 
 #headline {
   color: $headline-color;
+  text-wrap: balance;
   align-self: end;
 
   #{$text-tags} {

package/src/scss/components/_menu.scss

@@ -2,6 +2,13 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for menu components
 
+// Additional variables for fancy underlines
+$menu-item-decoration-active: underline $secondary-color !default;
+$menu-item-underline-position: under !default;
+$menu-item-underline-offset: 0 !default;
+// Including thickness in text-decoration shorthand is not yet supported by Safari.
+$menu-item-decoration-thickness: 15% !default;
+
 // General menu styles
 // -------------------
 
@@ -15,13 +22,21 @@
   a {
     color: $menu-item-color;
     line-height: inherit;
+    text-underline-position: $menu-item-underline-position;
+    text-underline-offset: $menu-item-underline-offset;
 
     &:hover {
       color: $menu-item-color-hover;
       text-decoration: $menu-item-decoration-hover;
+      text-decoration-thickness: $menu-item-decoration-thickness;
     }
   }
 
+  .is-active > a {
+    text-decoration: $menu-item-decoration-active;
+    text-decoration-thickness: $menu-item-decoration-thickness;
+  }
+
   .menu-text {
     color: $menu-text-color;
     font-weight: $menu-text-font-weight;
@@ -62,9 +77,9 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
     }
   }
 
-  // Reduced padding on small screens
+  // Reduced padding on small screens if not in mobile-menu
   @include breakpoint(small down) {
-    > li > a {
+    &:where(:not(.mobile-menu &)) > li > a {
       padding: {
         top: get-side($dropdownmenu-padding, top) * 0.5;
         right: get-side($dropdownmenu-padding, right) * 0.5;
@@ -137,7 +152,6 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
   @if $dropdownmenu-arrows {
     // Replace CSS arrow with SVG arrow to match selects.
     > li.is-dropdown-submenu-parent > a:after {
-      @include background-triangle($dropdownmenu-arrow-color);
       background-repeat: no-repeat;
       background-size: $dropdownmenu-arrow-size;
       background-position: center;
@@ -145,6 +159,8 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
       width: $dropdownmenu-arrow-size;
       height: $dropdownmenu-arrow-size;
       #{$global-right}: get-side($dropdownmenu-padding, $global-right);
+
+      @include background-triangle($dropdownmenu-arrow-color);
     }
 
     @include breakpoint(small down) {

package/src/scss/components/_mobile-menu.scss

@@ -0,0 +1,153 @@
+// Mobile menu
+// - - - - - - - - - - - - - - -
+// Turn a menu wrapper into a mobile menu at a certain breakpoint
+
+@use "sass:color";
+@use "sass:meta";
+
+// Mobile menu
+$mobile-menu-breakpoint: medium down !default;
+$mobile-menu-background: $header-background !default;
+$mobile-menu-padding: (3 * $global-margin) (1.5 * $global-margin) !default;
+$mobile-menu-max-width: 22rem !default;
+$mobile-menu-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !default;
+$mobile-menu-align-content: flex-start !default;
+
+// Mobile menu items
+$mobile-menu-item-font-size: $large-font-size !default;
+$mobile-menu-item-line-height: if(
+  $mobile-menu-item-font-size == $large-font-size,
+  $large-lineheight,
+  grid-lineheight($mobile-menu-item-font-size)
+) !default;
+$mobile-menu-item-font-weight: $global-weight-bold !default;
+$mobile-menu-item-color: $menu-item-color !default;
+$mobile-menu-item-color-hover: if(
+  $mobile-menu-item-color == $menu-item-color,
+  $menu-item-color-hover,
+  $mobile-menu-item-color
+) !default;
+$mobile-menu-item-decoration-hover: $menu-item-decoration-hover !default;
+$mobile-menu-text-color: if(
+  $mobile-menu-item-color == $menu-item-color,
+  $menu-text-color,
+  $mobile-menu-text-color
+) !default;
+$mobile-menu-text-font-weight: $mobile-menu-item-font-weight !default;
+
+// Mobile menu icon
+$mobile-menu-icon-color: color-pick-contrast(
+  get-background-color($header-background),
+  ($body-font-color, $body-font-color-alt)
+) !default;
+$mobile-menu-icon-color-hover: $mobile-menu-icon-color !default;
+$mobile-menu-icon-height: rem-calc($base-line-height) !default;
+$mobile-menu-icon-width: 1.25 * $mobile-menu-icon-height !default;
+$mobile-menu-icon-weight: rem-calc(0.125 * $base-line-height) !default;
+
+.mobile-menu-toggle,
+.mobile-menu .close-button {
+  display: none;
+}
+
+.mobile-menu-toggle {
+  text-align: #{$global-right};
+  padding-top: 0.5 * $global-padding;
+  padding-bottom: 0.5 * $global-padding;
+
+  .menu-icon {
+    @include hamburger(
+      $color: $mobile-menu-icon-color,
+      $color-hover: $mobile-menu-icon-color-hover,
+      $height: $mobile-menu-icon-height,
+      $width: $mobile-menu-icon-width,
+      $weight: $mobile-menu-icon-weight
+    );
+  }
+}
+
+.mobile-menu {
+  @extend .small-add-container-padding;
+}
+
+@include breakpoint($mobile-menu-breakpoint) {
+  .mobile-menu-toggle {
+    display: block;
+  }
+
+  .mobile-menu {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    #{$global-right}: 0;
+    width: 100%;
+    max-width: $mobile-menu-max-width;
+    background: $header-background;
+    padding: $mobile-menu-padding;
+    overflow: auto;
+    z-index: 10;
+
+    &:not(.open) {
+      transform: translateX(100%);
+    }
+
+    &.open,
+    &:not(.open):focus-within {
+      transition: 250ms transform ease-in-out;
+      box-shadow: $mobile-menu-boxshadow;
+      transform: none;
+    }
+
+    .menu {
+      flex-direction: column;
+      align-content: $mobile-menu-align-content;
+      margin-bottom: $global-margin;
+    }
+
+    .menu:not(.dropdown, .submenu) {
+      font-size: $mobile-menu-item-font-size;
+      line-height: $mobile-menu-item-line-height;
+      font-weight: $mobile-menu-item-font-weight;
+
+      a {
+        color: $mobile-menu-item-color;
+
+        &:hover {
+          color: $mobile-menu-item-color-hover;
+          text-decoration: $mobile-menu-item-decoration-hover;
+          text-decoration-thickness: $menu-item-decoration-thickness;
+        }
+      }
+
+      .is-active > a {
+        text-decoration: $menu-item-decoration-active;
+        text-decoration-thickness: $menu-item-decoration-thickness;
+      }
+
+      .menu-text {
+        color: $mobile-menu-text-color;
+        font-weight: $mobile-menu-text-font-weight;
+      }
+    }
+
+    // Align language switcher with menu items.
+    @if (meta.type-of($dropdown-menu-parent-border-width) == number) and
+      ($dropdown-menu-parent-border-width > 0)
+    {
+      .dropdown.menu {
+        &.vertical,
+        &:not(.vertical) {
+          .is-dropdown-submenu-parent {
+            margin-#{$global-left}: get-side($menu-items-padding, $global-left);
+          }
+        }
+      }
+    }
+
+    .close-button {
+      display: block;
+      top: $global-padding;
+      #{$global-right}: $global-padding;
+    }
+  }
+}

package/src/scss/components/_quote.scss

@@ -9,31 +9,34 @@ $blockquote-section-line-height: grid-lineheight($blockquote-section-font-size)
 $blockquote-source-font-weight: $global-weight-bold !default;
 
 // Basic blockquote layout.
-blockquote p,
-blockquote img {
-  padding: 0;
-}
+blockquote {
+  text-wrap: balance;
 
-.blockquote-image img,
-blockquote img {
-  border-radius: $blockquote-image-border-radius;
-}
+  p {
+    padding: 0;
+  }
 
-blockquote footer {
-  @extend .cite-block;
-  display: flex;
-  align-items: center;
-}
+  footer {
+    @extend .cite-block;
+    display: flex;
+    align-items: center;
+  }
+
+  .blockquote-source {
+    font-weight: $blockquote-source-font-weight;
+    display: block;
+  }
 
-blockquote .blockquote-source {
-  font-weight: $blockquote-source-font-weight;
-  display: block;
+  // Give images in content quotes some breathing space.
+  img {
+    margin-#{$global-right}: $global-margin;
+    max-width: $blockquote-image-max-width;
+  }
 }
 
-// Give images in content quotes some breathing space.
-blockquote img {
-  margin-#{$global-right}: $global-margin;
-  max-width: $blockquote-image-max-width;
+blockquote img,
+.blockquote-image img {
+  border-radius: $blockquote-image-border-radius;
 }
 
 // Quote sections.

package/src/scss/components/_settings.scss

@@ -26,7 +26,7 @@ $recent-supporter-color: color-pick-contrast(
 ) !default;
 $recent-supporter-time-color: $muted-font-color !default;
 $recent-supporter-border-color: if(
-  color.lightness(get-background-color($body-background)) < 50,
+  color.channel(get-background-color($body-background), "lightness", $space: hsl) < 50,
   $dark-gray,
   $light-gray
 ) !default;
@@ -84,8 +84,10 @@ $menu-item-font-weight: $global-weight-normal !default;
 $menu-item-color: inherit !default;
 $menu-item-color-hover: $menu-item-color !default;
 $menu-item-decoration-hover: underline !default;
+$menu-item-background-active: rgba(get-background-color($header-background), 0) !default;
 $menu-text-color: $menu-item-color !default;
 $menu-text-font-weight: $menu-item-font-weight !default;
+$menu-items-padding: rem-calc($base-line-height * 0.5 $base-line-height * 0.75) !default;
 $menu-state-back-compat: false !default;
 
 // Dropdown menu
@@ -149,7 +151,7 @@ $accordion-triangle-color: get-color(primary) !default;
 $accordion-triangle-size: rem-calc($base-font-size) !default;
 
 // Reveal
-$reveal-overlay-background: rgba($fallback-background, 0.9) !default;
+$reveal-overlay-background: rgba(get-background-color($fallback-background), 0.9) !default;
 $reveal-background: $form-background !default;
 $reveal-padding: $form-padding !default;
 $reveal-border: $form-border !default;

package/src/scss/components/_sticky-button.scss

@@ -10,13 +10,14 @@ $sticky-cta-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !defaul
 $sticky-button-max-width: $button-max-width !default;
 
 .sticky-cta {
-  @include sticky-button;
   background: $sticky-cta-background;
   box-shadow: $sticky-cta-boxshadow;
   padding: $global-padding * 0.5;
   padding-left: get-side($form-padding, left);
   padding-right: get-side($form-padding, right);
 
+  @include sticky-button;
+
   .button {
     max-width: $sticky-button-max-width;
     margin-left: auto;

package/src/scss/components/_top-bar.scss

@@ -2,8 +2,43 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the top-bar component
 
+$topbar-inner-justify: space-between !default;
+
 // Display multiple items next to each other.
 .top-bar-left,
 .top-bar-right {
   display: flex;
+  column-gap: get-side($menu-items-padding, $global-left);
+  justify-content: $topbar-inner-justify;
+  align-items: center;
+}
+
+// Make sure a single menu aligns right with space-between.
+@if $topbar-inner-justify == space-between {
+  .top-bar-right > nav:first-of-type:last-of-type {
+    margin-#{$global-left}: auto;
+  }
+}
+
+.top-bar {
+  // Switch sides for flex grow.
+  .top-bar-left {
+    flex-grow: 0;
+  }
+  .top-bar-right {
+    flex-grow: 1;
+  }
+
+  // Fixes for mobile menu.
+  .mobile-menu-toggle {
+    flex: 1 1 auto;
+  }
+  .mobile-menu {
+    @extend .top-bar-right;
+
+    @include breakpoint($mobile-menu-breakpoint) {
+      display: block;
+      max-width: $mobile-menu-max-width;
+    }
+  }
 }

package/src/scss/form/_paymethod-select-button.scss

@@ -7,6 +7,8 @@
 // These radio buttons do not have a checked state, only normal and hover.
 // They work only as selection menu, no need to highlight the checked button.
 
+// stylelint-disable no-duplicate-selectors
+
 $paymethod-select-border-color: $input-border-color !default;
 $paymethod-select-border-color-hover: $input-border-color-focus !default;
 $paymethod-select-border-radius: $button-radius !default;
@@ -24,24 +26,25 @@ $paymethod-select-border-width: $input-border-width !default;
       @include button-base;
       @include button-expand;
 
-      border-radius: $paymethod-select-border-radius;
-      text-align: left;
-      font-size: $form-label-font-size;
-      line-height: $form-label-line-height;
-      // The padding between text and triangle is increased by the triangle size
-      // (see also the positioning of the triangle below)
-      padding-left: rem-calc(get-side($button-padding, left)) + $select-triangle-size;
-      margin-bottom: $form-spacing * 2;
+      & {
+        border-radius: $paymethod-select-border-radius;
+        text-align: left;
+        font-size: $form-label-font-size;
+        line-height: $form-label-line-height;
+        // The padding between text and triangle is increased by the triangle size
+        // (see also the positioning of the triangle below)
+        padding-left: rem-calc(get-side($button-padding, left)) + $select-triangle-size;
+        margin-bottom: $form-spacing * 2;
 
-      // Default state
-      border: $paymethod-select-border-width solid $paymethod-select-border-color;
-      background-color: $paymethod-select-background-color;
-      color: $paymethod-select-text-color;
+        // Default state
+        border: $paymethod-select-border-width solid $paymethod-select-border-color;
+        background-color: $paymethod-select-background-color;
+        color: $paymethod-select-text-color;
+      }
 
       // Triangle to signify a slide menu
       // This also override any mo-radio pseudo input (if there is one)
       &:before {
-        @include background-triangle($paymethod-select-triangle-color);
         background-repeat: no-repeat;
         background-size: $select-triangle-size;
         background-position: center;
@@ -55,6 +58,8 @@ $paymethod-select-border-width: $input-border-width !default;
         transform: rotate(-90deg);
         position: relative;
         left: -$select-triangle-size;
+
+        @include background-triangle($paymethod-select-triangle-color);
       }
 
       // These buttons are a bit tighter together

package/src/scss/layout/_backgrounds.scss

@@ -1,10 +1,13 @@
 // Backgrounds
 // - - - - - - - - - - - - - - -
 
+@use "sass:list";
+
 #header {
   background: $header-background;
 
-  @if $body-background != $header-background and not index((transparent, none), $header-background)
+  @if ($body-background != $header-background) and not
+    list.index((transparent, none), $header-background)
   {
     @include match-colors($header-background);
   }
@@ -13,7 +16,9 @@
 #form-outer {
   background: $form-background;
 
-  @if $body-background != $form-background and not index((transparent, none), $form-background) {
+  @if ($body-background != $form-background) and not
+    list.index((transparent, none), $form-background)
+  {
     @include match-colors($form-background);
   }
 }
@@ -21,7 +26,8 @@
 #footer {
   background: $footer-background;
 
-  @if $body-background != $footer-background and not index((transparent, none), $footer-background)
+  @if ($body-background != $footer-background) and not
+    list.index((transparent, none), $footer-background)
   {
     @include match-colors($footer-background);
   }

package/src/scss/layout/_cover-banner.scss

@@ -69,6 +69,12 @@ $cover-banner-min-height: 66vh !default;
 
 // Displaying a big headline on small/medium screens.
 .cover-banner-layout.with-headline {
+  @include breakpoint(small down) {
+    #background img {
+      max-height: none;
+      mask-image: none;
+    }
+  }
   @include breakpoint(medium down) {
     #background ~ #banner-content {
       padding-top: 0;

package/src/scss/layout/_cover.scss

@@ -65,6 +65,12 @@ $cover-2col-offset: min(55vh, 85vw) !default;
     width: 100%;
     height: 100%;
     object-fit: cover;
+
+    // Cut off image with a fade out on small screens.
+    @include breakpoint(small down) {
+      max-height: 150vw;
+      mask-image: linear-gradient(#000 70%, #000, transparent);
+    }
   }
 
   // Remove title padding

package/src/scss/main.scss

@@ -111,9 +111,10 @@
 @import "form/form-steps";
 
 @import "components/accordion";
-@import "components/top-bar";
 @import "components/footer";
 @import "components/menu";
+@import "components/mobile-menu";
+@import "components/top-bar";
 @import "components/callout";
 @import "components/headline";
 @import "components/share-button";

package/src/scss/typography/_elements.scss

@@ -41,4 +41,5 @@ h6,
 #page-title {
   color: $title-color;
   padding-top: 0.75 * $global-padding;
+  text-wrap: balance;
 }