@moreonion/foundist 2.1.2 → 3.0.1

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;
+      }
+    }
   }
 }

package/src/scss/layout/_cover.scss

@@ -8,10 +8,15 @@
 
 $cover-background: $fallback-background !default;
 $cover-content-box-shadow: none !default;
-/// A value to subtract from the screen height to place the bottom edge of #top.
-$cover-2col-offset: $global-margin * 5;
+/// Minimum distance of #top from #main top when there is a background image.
+$cover-1col-offset: min(66vh, $global-margin * 10) !default;
+$cover-2col-offset: min(55vh, 85vw) !default;
 
 @mixin -content-padding {
+  @include breakpoint(medium) {
+    padding-left: 6vw;
+    padding-right: 6vw;
+  }
   @include breakpoint(large) {
     padding-left: $global-padding * 1.5;
     padding-right: $global-padding * 1.5;
@@ -23,6 +28,10 @@ $cover-2col-offset: $global-margin * 5;
 }
 
 @mixin -reverse-content-padding {
+  @include breakpoint(medium) {
+    margin-left: -6vw;
+    margin-right: -6vw;
+  }
   @include breakpoint(large) {
     margin-left: $global-padding * -1.5;
     margin-right: $global-padding * -1.5;
@@ -33,10 +42,22 @@ $cover-2col-offset: $global-margin * 5;
   }
 }
 
+.inner-wrapper {
+  @extend .small-reverse-container-padding;
+  @extend .small-add-container-padding;
+}
+
 // Fixed background image.
 #background {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  // Required to keep a constant height in mobile browsers with (dis)appearing menus
+  height: 100vh;
+
   width: 100%;
-  height: 75vw;
   background: $cover-background;
   z-index: -1;
 
@@ -46,20 +67,28 @@ $cover-2col-offset: $global-margin * 5;
     object-fit: cover;
   }
 
-  @include breakpoint(large) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: auto;
-  }
-
   // Remove title padding
   ~ #main #page-title {
     padding-top: 0;
   }
 
+  // Remove gaps on small screens.
+  @include breakpoint(small down) {
+    ~ #main {
+      padding-bottom: 0;
+    }
+    @if $cover-1col-offset == 0 {
+      #page.cover-1col-layout:not(.with-headline) & {
+        display: none;
+      }
+    }
+    @if $cover-2col-offset == 0 {
+      #page.cover-2col-layout:not(.with-headline) & {
+        display: none;
+      }
+    }
+  }
+
   // Make .narrow smaller a little earlier, halfway between large and xlarge.
   @include breakpoint((map.get($breakpoints, large) + map.get($breakpoints, xlarge)) * 0.5) {
     ~ section .grid-container.narrow {
@@ -73,18 +102,16 @@ $cover-2col-offset: $global-margin * 5;
 // Make sure no sections are transparent.
 #page.cover-1col-layout,
 #page.cover-2col-layout {
-  @include breakpoint(large) {
-    #highlighted,
-    #main .inner-wrapper,
-    #bottom {
-      background: $body-background;
-    }
+  #highlighted,
+  #main .inner-wrapper,
+  #bottom {
+    background: $body-background;
   }
 }
 
 // 1 column layout specific.
 #page.cover-1col-layout {
-  @include breakpoint(large) {
+  @include breakpoint(medium) {
     // Adjust vertical paddings and margins.
     #top {
       padding-bottom: $global-padding * 0.5;
@@ -105,6 +132,9 @@ $cover-2col-offset: $global-margin * 5;
 
   // Additional page styles when there is a #background.
   #background ~ #main {
+    // Leave extra space on top.
+    margin-top: $cover-1col-offset;
+
     // Add padding.
     .inner-wrapper,
     #form-outer,
@@ -115,20 +145,17 @@ $cover-2col-offset: $global-margin * 5;
     .sticky-cta {
       @include -reverse-content-padding;
     }
+    #top:first-child {
+      padding-top: $global-padding * 1.5;
+    }
 
-    @include breakpoint(large) {
-      // Leave extra space on top.
-      margin-top: $global-margin * 12;
-
+    @include breakpoint(medium) {
       // Add box-shadow.
       .inner-wrapper {
         box-shadow: $cover-content-box-shadow;
       }
 
       // Add vertical padding.
-      #top:first-child {
-        padding-top: $global-padding * 1.5;
-      }
       #content:last-child {
         padding-bottom: $global-padding * 1.5;
       }
@@ -143,6 +170,12 @@ $cover-2col-offset: $global-margin * 5;
       }
 
       // Adjust form container width to negative margin.
+      #form-outer {
+        min-width: calc(100% + 12vw);
+      }
+    }
+
+    @include breakpoint(large) {
       #form-outer {
         min-width: calc(100% + #{$global-padding * 3});
       }
@@ -154,6 +187,17 @@ $cover-2col-offset: $global-margin * 5;
       }
     }
   }
+
+  // Additional page styles when there is a #headline.
+  &.with-headline {
+    #background ~ #main {
+      margin-top: 0;
+
+      .grid-container {
+        grid-template-rows: minmax($cover-1col-offset, auto) auto;
+      }
+    }
+  }
 }
 
 // 2 column layout specific.
@@ -169,14 +213,26 @@ $cover-2col-offset: $global-margin * 5;
     }
   }
 
-  @include breakpoint(large) {
-    // Adjust grid.
-    .grid-container.with-sidebar {
-      grid-template-areas:
-        "top top top top top sidebar sidebar sidebar sidebar"
-        "content content content content content sidebar sidebar sidebar sidebar"
-        "sidebar2 sidebar2 sidebar2 sidebar2 sidebar2 sidebar sidebar sidebar sidebar";
+  @include breakpoint(small down) {
+    #background ~ #main {
+      .inner-wrapper {
+        @include clearfix;
+      }
+      #top .inner-wrapper {
+        padding-top: $global-padding * 1.5;
+      }
+      #sidebar + #sidebar2,
+      #content + #sidebar2 {
+        margin-top: 0;
+
+        .inner-wrapper {
+          padding-top: 2 * $global-margin;
+        }
+      }
     }
+  }
+
+  @include breakpoint(medium) {
     #main .inner-wrapper {
       // Vertical padding and margins.
       padding-top: $global-padding * 1.5;
@@ -209,6 +265,11 @@ $cover-2col-offset: $global-margin * 5;
       }
     }
 
+    // Remove gap after form.
+    #form-outer {
+      margin-bottom: 0;
+    }
+
     // Add a gap and optional shadow between content section parts.
     #content .inner-wrapper,
     #sidebar .sticky-cta {
@@ -219,6 +280,7 @@ $cover-2col-offset: $global-margin * 5;
     // Fallback background when there is no #background.
     #main:before {
       content: "";
+      display: block;
       position: fixed;
       top: 0;
       right: 0;
@@ -227,19 +289,20 @@ $cover-2col-offset: $global-margin * 5;
       background: $cover-background;
       z-index: -2;
     }
+  }
 
-    // Additional page styles when there is a #background.
-    #background ~ #main > .grid-container {
-      // Make the first grid row almost as large as the screen
-      // (we don’t know how large the #header is, whether there are messages,…).
-      // ATM stylelint does not recognise pure CSS functions:
-      // https://github.com/stylelint-scss/stylelint-scss/issues/486
-      // stylelint-disable scss/no-global-function-names
-      grid-template-rows: min(calc(100vh - #{$cover-2col-offset}), 125vw) 1fr;
-      // stylelint-enable scss/no-global-function-names
-      // Show the top section at the bottom of this row.
-      #top {
-        margin-top: auto;
+  @include breakpoint(large) {
+    // Adjust grid.
+    .grid-container.with-sidebar {
+      grid-template-areas:
+        "head head head head head sidebar sidebar sidebar sidebar"
+        "top top top top top sidebar sidebar sidebar sidebar"
+        "content content content content content sidebar sidebar sidebar sidebar"
+        "sidebar2 sidebar2 sidebar2 sidebar2 sidebar2 sidebar sidebar sidebar sidebar";
+    }
+    &.with-headline {
+      #headline {
+        padding-bottom: $global-padding;
       }
     }
   }
@@ -250,4 +313,23 @@ $cover-2col-offset: $global-margin * 5;
       margin-bottom: $global-margin * 2;
     }
   }
+
+  // Move content down when there is a #background.
+  @include breakpoint(medium down) {
+    #background ~ #main {
+      margin-top: $cover-2col-offset;
+    }
+    &.with-headline #background ~ #main {
+      margin-top: 0;
+
+      .grid-container {
+        grid-template-rows: minmax($cover-2col-offset, auto) auto;
+      }
+    }
+  }
+  @include breakpoint(large) {
+    #background ~ #main > .grid-container {
+      grid-template-rows: minmax($cover-2col-offset, auto) auto 1fr auto;
+    }
+  }
 }

package/src/scss/layout/_default.scss

@@ -34,8 +34,10 @@ section > .grid-container {
 
 // Use a 9 column grid.
 .grid-container {
+  display: grid;
+  grid-template-rows: auto;
+
   @include breakpoint(large) {
-    display: grid;
     column-gap: $global-margin;
     grid-template-columns: repeat(9, 1fr);
 
@@ -64,15 +66,19 @@ section > .grid-container {
 }
 
 // CSS grid for two column layout.
-// Assuming #top, #main (left column) and #sidebar (second column).
+// Assuming #headline (optional), #top, #main (left column) and #sidebar (second column).
 .grid-container.with-sidebar {
   @include breakpoint(large) {
     grid-template-areas:
+      "head head head head head sidebar sidebar sidebar sidebar"
       "top top top top top sidebar sidebar sidebar sidebar"
       "content content content content content sidebar sidebar sidebar sidebar"
       "content content content content content sidebar2 sidebar2 sidebar2 sidebar2";
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
 
+    #headline {
+      grid-area: head;
+    }
     #top {
       grid-area: top;
     }

package/src/scss/layout/_sections.scss

@@ -9,6 +9,10 @@ body {
   min-height: 100vh;
 }
 
+section {
+  @include clearfix;
+}
+
 #header {
   border-bottom: $header-border;
 }
@@ -20,11 +24,11 @@ body {
 }
 
 #main {
-  margin-top: 1.5 * $global-margin;
-  margin-bottom: 3 * $global-margin;
+  padding-top: 1.5 * $global-padding;
+  padding-bottom: 3 * $global-padding;
 
   @include breakpoint(large) {
-    margin-top: 2 * $global-margin;
+    padding-top: 2 * $global-padding;
   }
 
   @include breakpoint(medium down) {

package/src/scss/main.scss

@@ -89,6 +89,7 @@
 @include mo-share-button;
 @include mo-drupal-ajax-loading;
 @include mo-payment-icons;
+@include mo-giftaid;
 @include mo-cookiebar;
 
 @import "form/forms";
@@ -105,6 +106,7 @@
 @import "components/footer";
 @import "components/menu";
 @import "components/callout";
+@import "components/headline";
 @import "components/share-button";
 @import "components/sticky-button";
 @import "components/progressbar";

package/src/scss/typography/_settings.scss

@@ -15,6 +15,7 @@ $global-weight-bold: bold !default;
 // Colors
 $body-font-color: $black !default;
 $body-font-color-alt: $white !default;
+$muted-font-color: $medium-gray !default;
 $title-color: get-color(primary) !default;
 $header-color-even: if(
   meta.variable-exists("header-color"),
@@ -27,6 +28,7 @@ $header-color-odd: if(
   get-color(secondary)
 ) !default;
 $header-color-alt: $body-font-color-alt !default;
+$header-small-font-color: $muted-font-color !default;
 $anchor-color: get-color(primary) !default;
 $blockquote-color: get-color(primary) !default;
 

package/src/html/empty-action-page.html

@@ -1,29 +0,0 @@
-<extends src="templates/action-page.html">
-
-  <block name="highlighted"></block>
-
-  <block name="messages"></block>
-
-  <block name="page-title"></block>
-
-  <block name="top"></block>
-
-  <block name="form-intro"></block>
-
-  <block name="progress-bar"></block>
-
-  <block name="form"></block>
-
-  <block name="recent-supporters"></block>
-
-  <block name="content-top"></block>
-
-  <block name="content"></block>
-
-  <block name="content-bottom"></block>
-
-  <block name="bottom"></block>
-
-  <block name="footer"></block>
-
-</extends>

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

@@ -1,21 +0,0 @@
-<extends src="templates/static-page.html">
-
-  <block name="highlighted"></block>
-
-  <block name="messages"></block>
-
-  <block name="page-title"></block>
-
-  <block name="top"></block>
-
-  <block name="content-top"></block>
-
-  <block name="content"></block>
-
-  <block name="content-bottom"></block>
-
-  <block name="bottom"></block>
-
-  <block name="footer"></block>
-
-</extends>