@moreonion/foundist 3.0.0 → 3.0.2

package/src/scss/_util.scss

@@ -16,14 +16,16 @@
 /// @require $header-color-alt
 ///
 /// @param {String} $background - Background color
-@mixin match-colors($background) {
+/// @param {Bool} $force - If true, all text colors will be overridden regardless of the value
+@mixin match-colors($background, $force: false) {
   $background: get-background-color($background);
   @if $background != transparent {
     color: color-pick-contrast($background, ($body-font-color, $body-font-color-alt));
 
     // Replace heading colors only if the contrast of the original color is < 3
     // or they should be the same as the body font color.
-    @if (color-contrast($background, $header-color-odd) < 3) or
+    @if $force or
+      (color-contrast($background, $header-color-odd) < 3) or
       ($header-color-odd == $body-font-color and $header-color-alt == $body-font-color-alt)
     {
       h1,
@@ -35,7 +37,8 @@
         color: color-pick-contrast($background, ($header-color-odd, $header-color-alt));
       }
     }
-    @if (color-contrast($background, $header-color-even) < 3) or
+    @if $force or
+      (color-contrast($background, $header-color-even) < 3) or
       ($header-color-even == $body-font-color and $header-color-alt == $body-font-color-alt)
     {
       h2,
@@ -53,7 +56,7 @@
     @if color-contrast($background, $anchor-color) < 4.5 or $anchor-color == $body-font-color {
       $this-anchor-color: color-pick-contrast($background, ($anchor-color, $body-font-color-alt));
     }
-    @if $this-anchor-color != $anchor-color {
+    @if $force or $this-anchor-color != $anchor-color {
       a:not(.button) {
         color: $this-anchor-color;
 
@@ -74,11 +77,18 @@
     }
     // Replace blockquote colors only if the contrast of the original color is < 4.5
     // or they should be the same as the body font color.
-    @if (color-contrast($background, $blockquote-color) < 4.5) or
+    @if $force or
+      (color-contrast($background, $blockquote-color) < 4.5) or
       ($blockquote-color == $body-font-color)
     {
       blockquote {
-        color: color-pick-contrast($background, ($blockquote-color, $body-font-color-alt));
+        &,
+        p {
+          color: color-pick-contrast($background, ($blockquote-color, $body-font-color-alt));
+        }
+        cite {
+          color: color-pick-contrast($background, ($cite-color, $body-font-color-alt));
+        }
       }
     }
   }

package/src/scss/components/_accordion.scss

@@ -60,12 +60,10 @@
   }
 }
 
-.accordion-content {
-  // Assuming accordions contain either text or paragraphs or a list.
-  #{$text-tags} {
-    > &:last-child {
-      margin-bottom: 0;
-    }
+// Assuming accordions contain either text or paragraphs or a list.
+#{$text-tags} {
+  .accordion-content > &:last-child {
+    margin-bottom: 0;
   }
 }
 

package/src/scss/components/_bottom-section.scss

@@ -0,0 +1,117 @@
+// Bottom section
+// - - - - - - - - - - - - - - -
+// Styles for the bottom section component.
+
+@use "sass:meta";
+
+$bottom-section-background-odd: if(
+  meta.variable-exists("bottom-section-background"),
+  $bottom-section-background,
+  $form-background
+) !default;
+$bottom-section-background-even: if(
+  meta.variable-exists("bottom-section-background"),
+  $bottom-section-background,
+  $body-background
+) !default;
+$bottom-section-background-image-overlay: rgba($black, 0.3);
+
+#bottom section {
+  // Generic section styles
+  position: relative;
+
+  &:nth-child(odd) {
+    background: $bottom-section-background-odd;
+    @include match-colors($bottom-section-background-odd);
+  }
+
+  &:nth-child(even) {
+    background: $bottom-section-background-even;
+    @include match-colors($bottom-section-background-even);
+  }
+
+  > .grid-container {
+    margin-top: 1.5 * $global-margin;
+    margin-bottom: 0.5 * $global-margin;
+
+    @include breakpoint(small down) {
+      .media-stretch:first-child {
+        margin-top: -1.5 * $global-margin;
+      }
+    }
+
+    @include breakpoint(large) {
+      margin-top: 2.5 * $global-margin;
+      margin-bottom: 1.5 * $global-margin;
+    }
+  }
+
+  // Section with background image
+  .background {
+    &,
+    &:after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+    &:after {
+      content: "";
+      background: $bottom-section-background-image-overlay;
+    }
+
+    ~ .grid-container {
+      position: relative;
+      margin-top: 4.5 * $global-margin;
+      margin-bottom: 3.5 * $global-margin;
+      @include match-colors($bottom-section-background-image-overlay);
+    }
+  }
+
+  // Section with 2 columns
+  @include breakpoint(large) {
+    &:nth-child(even) {
+      .column:first-child {
+        grid-column: 1 / 5;
+        // Cover grid-gap to empty column in the middle.
+        margin-right: -1 * $global-margin;
+      }
+      .column:last-child {
+        grid-column: 6 / -1;
+        align-self: center;
+      }
+    }
+
+    // Every other section switches items.
+    &:nth-child(odd) {
+      .column:first-child {
+        order: 2;
+        grid-column: 6 / -1;
+        // Cover grid-gap to empty column in the middle.
+        margin-left: -1 * $global-margin;
+      }
+      .column:last-child {
+        order: 1;
+        grid-column: 1 / 5;
+        align-self: center;
+      }
+    }
+  }
+
+  @include breakpoint(xxlarge) {
+    &:nth-child(odd) .column:first-child {
+      margin-left: -2 * $global-margin;
+    }
+    &:nth-child(even) .column:first-child {
+      margin-right: -2 * $global-margin;
+    }
+  }
+}

package/src/scss/components/_headline.scss

@@ -0,0 +1,118 @@
+// Headline
+// - - - - - - - - - - - - - - -
+// Displays a huge headline on a background image or banner
+
+/// Highlighting background of the headline.
+/// @type Color
+$headline-background: none !default;
+
+/// Font family of the headline.
+/// @type String | List
+$headline-font-family: $header-font-family !default;
+
+/// Font weight of the headline.
+/// @type Number | String
+$headline-font-weight: $header-font-weight !default;
+
+/// Font style of the headline.
+/// @type String
+$headline-font-style: $header-font-style !default;
+
+/// Font size of the headline.
+/// @type Number
+$headline-font-size: 2 * $large-font-size !default;
+
+/// Font color of the headline.
+/// @type Color
+$headline-color: color-pick-contrast(
+  if(
+    $headline-background and $headline-background != none,
+    $headline-background,
+    $fallback-background
+  ),
+  ($body-font-color-alt, $body-font-color)
+) !default;
+
+#headline {
+  color: $headline-color;
+  align-self: end;
+
+  #{$text-tags} {
+    font-family: $headline-font-family;
+    font-weight: $headline-font-weight;
+    font-style: $headline-font-style;
+    font-size: $headline-font-size;
+    line-height: grid-lineheight($headline-font-size);
+
+    @include breakpoint(small down) {
+      font-size: $headline-font-size * 0.75;
+      line-height: grid-lineheight(0.75 * $headline-font-size);
+    }
+
+    @include breakpoint(xxlarge) {
+      font-size: $headline-font-size * 1.25;
+      line-height: grid-lineheight(1.25 * $headline-font-size);
+    }
+
+    #page.banner-layout & {
+      // Reduce font-size because there is less space for the headline.
+      @include breakpoint(25em down) {
+        font-size: $headline-font-size * 0.5;
+        line-height: grid-lineheight(0.5 * $headline-font-size);
+      }
+      @include breakpoint(medium) {
+        font-size: $headline-font-size * 0.75;
+        line-height: grid-lineheight(0.75 * $headline-font-size);
+      }
+      @include breakpoint(xlarge) {
+        font-size: $headline-font-size;
+        line-height: grid-lineheight($headline-font-size);
+      }
+      @include breakpoint(xxlarge) {
+        font-size: $headline-font-size * 1.25;
+        line-height: grid-lineheight(1.25 * $headline-font-size);
+      }
+    }
+  }
+
+  @if $headline-background and $headline-background != none {
+    #{$text-tags} {
+      background: $headline-background;
+      display: inline;
+      box-decoration-break: clone;
+      padding: 0.05em 0.25em;
+      // Adjust line-height for 0.5em of vertical padding.
+      line-height: 1.5 * grid-lineheight(1.5 * $headline-font-size);
+
+      @include breakpoint(small down) {
+        line-height: 1.5 * grid-lineheight(1.5 * 0.75 * $headline-font-size);
+      }
+
+      @include breakpoint(xxlarge) {
+        line-height: 1.5 * grid-lineheight(1.5 * 1.25 * $headline-font-size);
+      }
+
+      #page.banner-layout & {
+        @include breakpoint(25em down, medium) {
+          line-height: 1.5 * grid-lineheight(1.5 * 0.5 * $headline-font-size);
+        }
+        @include breakpoint(medium) {
+          line-height: 1.5 * grid-lineheight(1.5 * 0.75 * $headline-font-size);
+        }
+        @include breakpoint(xlarge) {
+          line-height: 1.5 * grid-lineheight(1.5 * $headline-font-size);
+        }
+        @include breakpoint(xxlarge) {
+          line-height: 1.5 * grid-lineheight(1.5 * 1.25 * $headline-font-size);
+        }
+      }
+    }
+
+    // Fake the usual margin (missing because of display: inline)
+    &:after {
+      content: "";
+      display: block;
+      height: $global-margin;
+    }
+  }
+}

package/src/scss/layout/_banner.scss

@@ -6,6 +6,7 @@ $banner-height: 46vw !default;
 $banner-background: $fallback-background !default;
 
 #banner {
+  position: absolute;
   width: 100%;
   height: $banner-height;
   background: $banner-background;
@@ -16,28 +17,64 @@ $banner-background: $fallback-background !default;
     height: 100%;
     object-fit: cover;
   }
-}
 
-#banner ~ #main {
-  #page-title {
-    padding-top: 0;
-  }
-}
+  ~ #main {
+    #page-title {
+      padding-top: 0;
+    }
 
-@include breakpoint(large) {
-  #banner {
-    position: absolute;
+    .grid-container {
+      grid-template-rows: minmax($banner-height, auto) auto;
 
-    ~ #main {
-      @include clearfix;
+      // Ensure the first row is blocked when there is no #headline.
+      #page:not(.with-headline) &:before {
+        content: "";
+      }
+    }
 
-      #top {
-        margin-top: $banner-height;
+    @include breakpoint(large) {
+      .grid-container.with-sidebar {
+        grid-template-rows: minmax($banner-height, auto) auto 1fr auto;
       }
 
       #form-wrapper {
         min-height: $banner-height;
       }
     }
+
+    #page.with-headline & #headline {
+      // Same as #main padding-top
+      margin-bottom: 1.5 * $global-padding;
+
+      @include breakpoint(large) {
+        margin-bottom: 2 * $global-padding;
+      }
+
+      // Extra padding for headlines on larger screens.
+      @include breakpoint(xlarge) {
+        padding-bottom: $global-padding;
+      }
+
+      @include breakpoint(xxlarge) {
+        padding-bottom: 2 * $global-padding;
+      }
+    }
+  }
+
+  // On small screens when there is a headline double the banner height
+  // to increase the chance that the headline will fit on the banner.
+  @include breakpoint(small down) {
+    #page.with-headline & {
+      height: 2 * $banner-height;
+
+      ~ #main .grid-container {
+        grid-template-rows: minmax(2 * $banner-height, auto) auto;
+      }
+    }
   }
 }
+
+// Give callouts some margin (assuming #messages are placed before #banner)
+#page.banner-layout #messages .callout {
+  margin-bottom: $global-margin;
+}

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

@@ -3,22 +3,28 @@
 // Displays the form above the main content with a fixed image as background.
 
 $cover-banner-background: $fallback-background !default;
-$cover-banner-min-height: 75vh !default;
+$cover-banner-min-height: 66vh !default;
 
 // For the background image, the #background styles from cover.scss are used.
 
 #banner-content {
-  @include breakpoint(medium) {
-    #form-wrapper {
-      padding-top: 2 * $global-padding;
+  ~ #main {
+    background: $body-background;
+
+    // Displaying the #sidebar below the #content on small/medium screens.
+    @include breakpoint(medium down) {
+      #content + #sidebar {
+        margin-top: 2 * $global-margin;
+      }
     }
   }
 
-  @include breakpoint(medium only) {
-    // Overlap the image a bit.
-    #background ~ & {
-      margin-top: -25vw;
-      min-height: 25vw;
+  @include breakpoint(medium) {
+    padding-top: 2 * $global-padding;
+    padding-bottom: 2 * $global-padding;
+
+    #form-outer {
+      margin-bottom: 0;
     }
   }
 
@@ -27,37 +33,77 @@ $cover-banner-min-height: 75vh !default;
       grid-column: 6 / -1;
     }
 
-    ~ #main {
-      background: $body-background;
-      // Use padding instead of margins to cover the gaps.
-      padding-top: 2 * $global-margin;
-      padding-bottom: 3 * $global-margin;
-      margin: 0;
+    #headline {
+      position: sticky;
+      bottom: 2 * $global-margin;
     }
+  }
 
-    // When there is a #background, make sure it’s visible.
-    #background ~ &,
-    #background ~ & #form-wrapper {
-      min-height: $cover-banner-min-height;
+  // When there is a #background, make sure it’s visible.
+  #background ~ & {
+    @include breakpoint(medium down) {
+      padding-top: 50vh;
     }
-
-    // Fallback background when there is no #background.
-    &:before {
-      content: "";
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: $cover-banner-background;
-      z-index: -2;
+    @include breakpoint(large) {
+      &,
+      .grid-container,
+      #form-wrapper {
+        min-height: $cover-banner-min-height;
+      }
     }
   }
+
+  // Fallback background when there is no #background.
+  &:before {
+    content: "";
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: $cover-banner-background;
+    z-index: -2;
+  }
 }
 
-// Displaying the #sidebar below the #content on small/medium screens.
-@include breakpoint(medium down) {
-  #content + #sidebar {
-    margin-top: 2 * $global-margin;
+// Displaying a big headline on small/medium screens.
+.cover-banner-layout.with-headline {
+  @include breakpoint(medium down) {
+    #background ~ #banner-content {
+      padding-top: 0;
+
+      .grid-container {
+        grid-template-rows: minmax(min(100vh, 100vw), auto) auto;
+        padding-top: 0;
+
+        @include breakpoint(small down) {
+          grid-template-rows: minmax(100vh, auto) auto;
+        }
+      }
+
+      #headline {
+        // A bit more than approximate sticky button height.
+        padding-bottom: 3 * $global-padding;
+
+        // Padding similar to large screens when not at the edge of the screen.
+        @include breakpoint(medium) {
+          @include breakpoint(portrait) {
+            padding-bottom: 2 * $global-padding;
+          }
+        }
+      }
+    }
+
+    #header {
+      // #banner-content’s 100vh should start at the top of the page.
+      position: absolute;
+      width: 100%;
+
+      ~ #banner-content #headline {
+        // A bit more than approximate header height.
+        padding-top: $global-padding * 5;
+      }
+    }
   }
 }