@moreonion/foundist 3.0.0 → 3.0.2

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 !default;
+/// 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 !default;
 }
 
 @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 !default;
   }
 }
 
+.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,21 +67,28 @@ $cover-2col-offset: $global-margin * 5 !default;
     object-fit: cover;
   }
 
-  @include breakpoint(large) {
-    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;
-  }
-
   // 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 {
@@ -74,18 +102,16 @@ $cover-2col-offset: $global-margin * 5 !default;
 // 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;
@@ -106,6 +132,9 @@ $cover-2col-offset: $global-margin * 5 !default;
 
   // 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,
@@ -116,20 +145,17 @@ $cover-2col-offset: $global-margin * 5 !default;
     .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;
       }
@@ -144,6 +170,12 @@ $cover-2col-offset: $global-margin * 5 !default;
       }
 
       // 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});
       }
@@ -155,6 +187,17 @@ $cover-2col-offset: $global-margin * 5 !default;
       }
     }
   }
+
+  // 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.
@@ -170,14 +213,26 @@ $cover-2col-offset: $global-margin * 5 !default;
     }
   }
 
-  @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;
@@ -210,6 +265,11 @@ $cover-2col-offset: $global-margin * 5 !default;
       }
     }
 
+    // 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 {
@@ -220,6 +280,7 @@ $cover-2col-offset: $global-margin * 5 !default;
     // Fallback background when there is no #background.
     #main:before {
       content: "";
+      display: block;
       position: fixed;
       top: 0;
       right: 0;
@@ -228,19 +289,20 @@ $cover-2col-offset: $global-margin * 5 !default;
       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;
       }
     }
   }
@@ -251,4 +313,23 @@ $cover-2col-offset: $global-margin * 5 !default;
       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

@@ -106,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";
@@ -114,6 +115,7 @@
 @import "components/card";
 @import "components/reveal";
 @import "components/cookiebar";
+@import "components/bottom-section";
 
 // --------------------------------------------------------------------------
 // 7. Utilities