@moreonion/foundist 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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.1",
+    "@moreonion/foundation-base": "^3.0.2",
     "vite-plugin-nunjucks": "^0.1.10"
   },
   "lint-staged": {

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

@@ -49,6 +49,12 @@
     <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 bottom %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -49,6 +49,12 @@
     <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 bottom %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -49,6 +49,12 @@
     <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 bottom %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -49,6 +49,12 @@
     <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 bottom %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

package/src/html/dev-index.html

@@ -27,31 +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-and-headline.html">Basic action page with headline and bottom sections</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>
+        <li><a href="src/html/thank-you-page-with-banner-and-headline.html">Thank you page with headline and bottom sections</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-with-headline.html">Basic action page with headline and bottom sections</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>
+        <li><a href="src/html/thank-you-page-cover-2col-with-headline.html">Thank you page with headline and bottom sections</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/basic-action-page-cover-banner-with-headline.html">Basic action page with headline and bottom sections</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>
+        <li><a href="src/html/thank-you-page-cover-banner-with-headline.html">Thank you page with headline and bottom sections</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/basic-action-page-cover-1col-with-headline.html">Basic action page with headline and bottom sections</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>
+        <li><a href="src/html/thank-you-page-cover-1col-with-headline.html">Thank you page with headline and bottom sections</a></li>
     </ul>
 {% endblock %}

package/src/html/includes/section-1col.html

@@ -0,0 +1,11 @@
+<section>
+    <div class="background">
+        <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
+    </div>
+    <div class="grid-container narrow">
+        <blockquote>
+            <p>Nap all day eat and than sleep on your face so catto munch salmono so find a way to fit in tiny box cats making all the muffins my left donut is missing, as is my right.</p>
+            <cite>Famous Cat</cite>
+        </blockquote>
+    </div>
+</section>

package/src/html/includes/section-2col.html

@@ -0,0 +1,12 @@
+<section>
+    <div class="grid-container">
+        <div class="column media-stretch">
+            <img src="http://placekitten.com/600/400" alt="test image with cats" crossorigin="">
+        </div>
+        <div class="column">
+            <h2>What's your problem?</h2>
+            <p>Get my claw stuck in the dog's ear. Reward the chosen human with a slow blink. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
+            <p><a href="#form" class="primary button">Take action now!</a></p>
+        </div>
+    </div>
+</section>

package/src/html/includes/share-buttons.html

@@ -1,33 +1,74 @@
 <div class="share-buttons">
-    <h2 class="share-buttons-title">Will you share this with your friends and family?</h2>
+  <h2 class="share-buttons-title">Will you share this with your friends and family?</h2>
 
-    <p>Spread your love for kittens.</p>
+  <p>Spread your love for kittens.</p>
 
-    <ul class="share-light no-bullet">
-        <li class="email first">
-            <a href="#" title="Share this via email!" data-share="email" target="_blank" class="large share button expanded email-icon">
-                <span>Email</span>
-            </a>
-        </li>
-        <li class="facebook">
-            <a href="#" title="Share this via Facebook!" data-share="facebook" target="_blank" class="large share button expanded facebook-icon">
-                <span>Facebook</span>
-            </a>
-        </li>
-        <li class="twitter">
-            <a href="#" title="Share this via Twitter!" data-share="twitter" target="_blank" class="large share button expanded twitter-icon">
-                <span>Twitter</span>
-            </a>
-        </li>
-        <li class="whatsapp">
-            <a href="#" title="Share this via WhatsApp!" data-share="whatsapp" class="mobile large share button expanded whatsapp-icon">
-                <span>WhatsApp</span>
-            </a>
-        </li>
-        <li class="fbmsg last">
-            <a href="#" title="Share this via Facebook Messenger!" data-share="facebook-messenger" class="mobile large share button expanded facebook-messenger-icon">
-                <span>Facebook Messenger</span>
-            </a>
-        </li>
-    </ul>
+  <ul class="no-bullet">
+    <li class="email">
+      <a
+        href="#"
+        title="Share this via email!"
+        data-share="email"
+        target="_blank"
+        class="large share button expanded email-icon"
+      >
+        <span>Email</span>
+      </a>
+    </li>
+    <li class="facebook">
+      <a
+        href="#"
+        title="Share this via Facebook!"
+        data-share="facebook"
+        target="_blank"
+        class="large share button expanded facebook-icon"
+      >
+        <span>Facebook</span>
+      </a>
+    </li>
+    <li class="twitter">
+      <a
+        href="#"
+        title="Share this via Twitter!"
+        data-share="twitter"
+        target="_blank"
+        class="large share button expanded twitter-icon"
+      >
+        <span>Twitter</span>
+      </a>
+    </li>
+    <li class="whatsapp">
+      <a
+        href="#"
+        title="Share this via WhatsApp!"
+        data-share="whatsapp"
+        data-mobile="true"
+        class="hide large share button expanded whatsapp-icon"
+      >
+        <span>WhatsApp</span>
+      </a>
+    </li>
+    <li class="fbmsg">
+      <a
+        href="#"
+        title="Share this via Facebook Messenger!"
+        data-share="facebook-messenger"
+        data-mobile="true"
+        class="hide large share button expanded facebook-messenger-icon"
+      >
+        <span>Facebook Messenger</span>
+      </a>
+    </li>
+    <li class="web-share">
+      <a
+        href="#"
+        title="Open share dialog"
+        data-share="web-share"
+        data-text="Share this anywhere!"
+        class="hide share"
+      >
+        <span>More ways to share</span>
+      </a>
+    </li>
+  </ul>
 </div>

package/src/html/templates/page.html

@@ -89,11 +89,12 @@
             {% block bottom %}{% endblock %}
         </section>
 
-        <section id="footer">
-            <div class="grid-container">
-                {% block footer %}{% endblock %}
-            </div>
-        </section>
-
     </div>
+
+    <section id="footer">
+        <div class="grid-container">
+            {% block footer %}{% endblock %}
+        </div>
+    </section>
+
 {% endblock %}

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

@@ -22,6 +22,12 @@
     {% include "src/html/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-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -26,6 +26,12 @@
     {% include "src/html/includes/recent-supporters.html" %}
 {% endblock %}
 
+{% block bottom %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-2col.html" %}
+    {% include "src/html/includes/section-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -22,6 +22,12 @@
     {% include "src/html/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-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

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

@@ -22,6 +22,12 @@
     {% include "src/html/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-1col.html" %}
+{% endblock %}
+
 {% block footer %}
     {% include "src/html/includes/menu.html" %}
 {% endblock %}

package/src/js/foundist.js

@@ -20,8 +20,10 @@ import {
   CookieBar,
   FileUpload,
   SelectTwo,
+  Share,
   StickyButton,
-  ToggleElement
+  ToggleElement,
+  UserAgent,
 } from '@moreonion/foundation-base'
 
 // Add the select2 to jQuery
@@ -36,8 +38,10 @@ Foundation.plugin(AdaptiveSticky, 'AdaptiveSticky')
 Foundation.plugin(CookieBar, 'CookieBar')
 Foundation.plugin(FileUpload, 'FileUpload')
 Foundation.plugin(SelectTwo, 'SelectTwo')
+Foundation.plugin(Share, 'Share')
 Foundation.plugin(StickyButton, 'StickyButton')
 Foundation.plugin(ToggleElement, 'ToggleElement')
+Foundation.plugin(UserAgent, 'UserAgent')
 
 /**
  * Let foundation initialize the initial markup.

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/_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/_cookiebar.scss

@@ -20,6 +20,11 @@
     margin-#{$global-left}: $global-margin * 0.5;
   }
 
+  // Undo grid.
+  .grid-container {
+    display: block;
+  }
+
   // Show button(s) next to text.
   @if ($cookiebar-flex-breakpoint) {
     @include breakpoint($cookiebar-flex-breakpoint) {
@@ -34,9 +39,11 @@
         .button {
           flex: 0 0 auto;
         }
-        // No extra margin needed due to column gap.
-        .button + .button {
-          margin-#{$global-left}: 0;
+        @include breakpoint(large) {
+          // No extra margin needed due to column gap.
+          .button + .button {
+            margin-#{$global-left}: 0;
+          }
         }
       }
     }

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

@@ -44,4 +44,11 @@ $share-button-max-width: 28rem !default;
     margin-left: auto;
     margin-right: auto;
   }
+
+  .share:not(.button) {
+    display: block;
+    text-align: center;
+    margin-top: $global-margin;
+    margin-bottom: $global-margin;
+  }
 }

package/src/scss/main.scss

@@ -115,6 +115,7 @@
 @import "components/card";
 @import "components/reveal";
 @import "components/cookiebar";
+@import "components/bottom-section";
 
 // --------------------------------------------------------------------------
 // 7. Utilities