@moreonion/foundist 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "^3.0.0",
+    "@moreonion/foundation-base": "^3.0.1",
     "vite-plugin-nunjucks": "^0.1.10"
   },
   "lint-staged": {

package/src/html/basic-action-page-cover-1col-with-headline.html

@@ -0,0 +1,54 @@
+{% extends "src/html/templates/action-page-cover-1col.html" %}
+
+{% set layout = "cover-1col" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>Cats love huge display headlines<br>Meouw!</p>
+{% endblock %}
+
+{% block top %}
+    <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+{% endblock %}
+
+{% block form_intro %}
+    <h2>Signup now!</h2>
+    <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
+{% endblock %}
+
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
+
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+
+{% block content_top %}
+    <div class="media-stretch">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+    </div>
+{% endblock %}
+
+{% block content %}
+    <h2>Cougar British shorthair turkish angora</h2>
+    <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
+    <p>A very wise cat once said:</p>
+    <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-cover-2col-with-headline.html

@@ -0,0 +1,54 @@
+{% extends "src/html/templates/action-page.html" %}
+
+{% set layout = "cover-2col" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>Cats love huge display headlines<br>Meouw!</p>
+{% endblock %}
+
+{% block top %}
+    <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+{% endblock %}
+
+{% block form_intro %}
+    <h2>Signup now!</h2>
+    <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
+{% endblock %}
+
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
+
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+
+{% block content_top %}
+    <div class="media-stretch">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+    </div>
+{% endblock %}
+
+{% block content %}
+    <h2>Cougar British shorthair turkish angora</h2>
+    <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
+    <p>A very wise cat once said:</p>
+    <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-cover-banner-with-headline.html

@@ -0,0 +1,54 @@
+{% extends "src/html/templates/action-page-cover-banner.html" %}
+
+{% set layout = "cover-banner" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>Cats love huge display headlines<br>Meouw!</p>
+{% endblock %}
+
+{% block top %}
+    <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+{% endblock %}
+
+{% block form_intro %}
+    <h2>Signup now!</h2>
+    <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
+{% endblock %}
+
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
+
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+
+{% block content_top %}
+    <div class="media-stretch">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+    </div>
+{% endblock %}
+
+{% block content %}
+    <h2>Cougar British shorthair turkish angora</h2>
+    <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
+    <p>A very wise cat once said:</p>
+    <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-with-banner-and-headline.html

@@ -0,0 +1,54 @@
+{% extends "src/html/templates/action-page.html" %}
+
+{% set layout = "banner" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Take action now!{% endblock %}
+
+{% block banner %}
+    <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block top %}
+    <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+{% endblock %}
+
+{% block headline %}
+    <p>Cats love huge display headlines<br>Meouw!</p>
+{% endblock %}
+
+{% block form_intro %}
+    <h2>Signup now!</h2>
+    <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
+{% endblock %}
+
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
+
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+
+{% block content_top %}
+    <div class="media-stretch">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+    </div>
+{% endblock %}
+
+{% block content %}
+    <h2>Cougar British shorthair turkish angora</h2>
+    <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
+    <p>A very wise cat once said:</p>
+    <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/dev-index.html

@@ -27,23 +27,31 @@
     <h4 class="h6">B: Banner image (2 columns) &ensp;<small>banner</small></h4>
     <ul class="no-bullet">
         <li><a href="src/html/basic-action-page-with-banner.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-with-banner-and-headline.html">Basic action page with headline</a></li>
         <li><a href="src/html/basic-action-page-with-banner-reversed.html">Basic action page reversed</a></li>
         <li><a href="src/html/thank-you-page-with-banner.html">Thank you page</a></li>
+        <li><a href="src/html/thank-you-page-with-banner-and-headline.html">Thank you page with headline</a></li>
     </ul>
     <h4 class="h6">C: Fixed background image (2 columns) &ensp;<small>cover-2col</small></h4>
     <ul class="no-bullet">
         <li><a href="src/html/basic-action-page-cover-2col.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-cover-2col-with-headline.html">Basic action page with headline</a></li>
         <li><a href="src/html/basic-action-page-cover-2col-reversed.html">Basic action page reversed</a></li>
         <li><a href="src/html/thank-you-page-cover-2col.html">Thank you page</a></li>
+        <li><a href="src/html/thank-you-page-cover-2col-with-headline.html">Thank you page with headline</a></li>
     </ul>
     <h4 class="h6">D: Fixed banner image (2 columns) &ensp;<small>cover-banner</small></h4>
     <ul class="no-bullet">
         <li><a href="src/html/basic-action-page-cover-banner.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-cover-banner-with-headline.html">Basic action page with headline</a></li>
         <li><a href="src/html/thank-you-page-cover-banner.html">Thank you page</a></li>
+        <li><a href="src/html/thank-you-page-cover-banner-with-headline.html">Thank you page with headline</a></li>
     </ul>
     <h4 class="h6">E: Fixed background image (1 column) &ensp;<small>cover-1col</small></h4>
     <ul class="no-bullet">
         <li><a href="src/html/basic-action-page-cover-1col.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-cover-1col-with-headline.html">Basic action page with headline</a></li>
         <li><a href="src/html/thank-you-page-cover-1col.html">Thank you page</a></li>
+        <li><a href="src/html/thank-you-page-cover-1col-with-headline.html">Thank you page with headline</a></li>
     </ul>
 {% endblock %}

package/src/html/includes/login-form.html

@@ -2,6 +2,6 @@
 
 <form method="post" accept-charset="UTF-8" novalidate="novalidate">
     {{ input("Email address", {type: "email", id: "email", size: 60, required: "required"}) }}
-    {{ input("Password", {type: "password", size: 60, maxlength=128, required: "required"}, "The password field is case sensitive.") }}
+    {{ input("Password", {type: "password", size: 60, maxlength: 128, required: "required"}, "The password field is case sensitive.") }}
     {{ button("Log in", class="expanded primary button large") }}
 </form>

package/src/html/templates/action-page-cover-1col.html

@@ -6,7 +6,7 @@
 
 {% block sidebar %}
     <div id="form-outer">
-        {% block form_intro %}{% endblock %}
+        <div class="intro">{% block form_intro %}{% endblock %}</div>
         {% block progress_bar %}{% endblock %}
         {% block form %}{% endblock %}
     </div>

package/src/html/templates/action-page-cover-banner.html

@@ -5,10 +5,11 @@
 {% block main_container_class %}with-sidebar{% endblock %}
 
 {% block banner_content %}
-    <div class="grid-container with sidebar">
+    <div class="grid-container with-sidebar">
+        <header id="headline">{% block headline %}{% endblock %}</header>
         <div id=form-wrapper class="flex-container align-middle">
             <div id="form-outer">
-                {% block form_intro %}{% endblock %}
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}
             </div>
@@ -16,7 +17,7 @@
     </div>
 {% endblock %}
 
-{% block sidebar %}
+{% block sidebar_bottom %}
     <div id="sidebar">
         {% block recent_supporters %}{% endblock %}
     </div>

package/src/html/templates/action-page-reversed.html

@@ -8,7 +8,7 @@
     <div id="sidebar">
         <div id=form-wrapper class="flex-container align-middle">
             <div id="form-outer">
-                {% block form_intro %}{% endblock %}
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}
             </div>

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

@@ -12,7 +12,7 @@
     <div id="sidebar">
         <div id=form-wrapper class="flex-container align-middle">
             <div id="form-outer">
-                {% block form_intro %}{% endblock %}
+                <div class="intro">{% block form_intro %}{% endblock %}</div>
                 {% block progress_bar %}{% endblock %}
                 {% block form %}{% endblock %}
             </div>

package/src/html/templates/page.html

@@ -20,15 +20,11 @@
             </div>
         </section>
 
-        <section id="bottom">
+        <section id="highlighted">
             {% block highlighted %}{% endblock %}
         </section>
 
-        {% if layout == "banner" %}
-            <section id="banner">
-                {% block banner %}{% endblock %}
-            </section>
-        {% elif layout and layout != "default" %}
+        {% if layout|truncate(5, true, '') == "cover" %}
             <section id="background">
                 {% block background %}{% endblock %}
             </section>
@@ -46,9 +42,19 @@
             </section>
         {% endif %}
 
+        {% if layout == "banner" %}
+            <section id="banner">
+                {% block banner %}{% endblock %}
+            </section>
+        {% endif %}
+
         <section id="main">
             <div class="grid-container {% block main_container_class %}narrow{% endblock %}">
 
+                {% if layout in ["banner", "cover-1col", "cover-2col"] %}
+                    <header id="headline">{% block headline %}{% endblock %}</header>
+                {% endif %}
+
                 {% if layout == "cover-1col" %}<div class="inner-wrapper">{% endif %}
 
                 <div id="top">

package/src/html/templates/share-page.html

@@ -1,3 +1,9 @@
 {% extends "./page.html" %}
 
 {% block page_class %}{{ layout }}-layout{% endblock %}
+
+{% block banner_content %}
+    <div class="grid-container narrow">
+        <header id="headline">{% block headline %}{% endblock %}</header>
+    </div>
+{% endblock %}

package/src/html/thank-you-page-cover-1col-with-headline.html

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+
+{% set layout = "cover-1col" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/thank-you-page-cover-2col-with-headline.html

@@ -0,0 +1,31 @@
+{% extends "src/html/templates/action-page.html" %}
+
+{% set layout = "cover-2col" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+
+{% block form %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+
+{% set layout = "cover-banner" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
+
+{% block background %}
+    <img src="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
+{% endblock %}
+
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends "src/html/templates/share-page.html" %}
+
+{% set layout = "banner" %}
+
+{% block page_class %}{{ super() }} with-headline{% endblock %}
+
+{% 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="">
+{% endblock %}
+
+{% block headline %}
+    <p>A huge thank you!</p>
+{% endblock %}
+
+{% block content %}
+    <p>Cat ipsum dolor sit amet, mewl for food at 4am. Meeeeouw spill litter box, scratch at owner, destroy all furniture, especially couch. Sleep on dog bed, force dog to sleep on floor stinky cat spend all night ensuring people don't sleep sleep all day yet spread kitty litter all over house.</p>
+{% endblock %}
+
+{% block content_bottom %}
+    {% include "src/html/includes/share-buttons.html" %}
+{% endblock %}
+
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

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

@@ -1,4 +1,4 @@
-{% extends "src/html/templates/cdpage.html" %}
+{% extends "src/html/templates/page.html" %}
 
 {% set layout = "default" %}
 

package/src/js/foundist.js

@@ -95,10 +95,17 @@ export function stickyButton (options = {}) {
   if (!$cta.length) {
     return
   }
+  const defaults = {
+    topOverlap: 0.3
+  }
+  // Find blocking element
+  const target = $cta.find('a').attr('href')
+  if (target && !target.includes('/')) {
+    defaults.blocker = target
+  }
   // Put button(s) in right position.
   // Depending on the layout, the button should be on the bottom of the page,
   // the sidebar or the main wrapper for large screen sizes.
-  const target = $cta.find('a').attr('href')
   const $newParent = $('#sidebar, #main > .grid-container > .inner-wrapper')
   if ($newParent.length) {
     const $clone = $cta.clone().appendTo($newParent).addClass('bottom show-for-large')
@@ -112,8 +119,7 @@ export function stickyButton (options = {}) {
   // Initialize plugin
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
-      blocker: target,
-      topOverlap: 0.3,
+      ...defaults,
       ...options
     })
   })

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

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";