@moreonion/foundist 3.2.4 → 3.2.6

package/package.json

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

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

@@ -30,11 +30,5 @@
 {% 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>
-    <div class="letter">
-        <h5>Give cats a chance</h5>
-        <p>A very wise cat once said: ignore the squirrels, you'll never catch them anyway. Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor.</p>
-        <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>
-        <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-        <p>Yours,<br>Kitty the Cat</p>
-    </div>
+    {% include "src/html/includes/letter.html" %}
 {% endblock %}

package/src/html/includes/letter.html

@@ -0,0 +1,18 @@
+<div class="letter">
+    <h5>Give cats a chance</h5>
+    <p>A very wise cat once said: ignore the squirrels, you'll never catch them anyway. Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor.</p>
+    <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>
+    <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+    <p>Yours,</p>
+    <ul class="signatures">
+        <li>
+            <span class="signature-image"><img src="http://placekitten.com/100/100" alt="portrait of a cat" crossorigin=""></span>
+            <span class="signature-name">Kitty</span>
+            <span class="signature-description">the cat</span>
+        </li>
+    </ul>
+    <div class="counter-wrapper">
+        <p class="counter">and 3,381 cats have signed!</p>
+        <p>Some more text below the counter</p>
+    </div>
+</div>

package/src/js/foundist.js

@@ -106,7 +106,7 @@ export function stickyButton (options = {}) {
   }
   // Find blocking element
   const target = $cta.find('a').attr('href')
-  if (target && !target.includes('/')) {
+  if (target && !target.includes('/') && $(target).is(':visible')) {
     defaults.blocker = target
   }
   // Put button(s) in right position.
@@ -121,7 +121,9 @@ export function stickyButton (options = {}) {
     $cta.appendTo('#page').addClass('bottom')
   }
   // Add SmoothScroll
-  new SmoothScroll($cta.find('a')) // eslint-disable-line no-new
+  if ($(target).is(':visible')) {
+    new SmoothScroll($cta.find('a')) // eslint-disable-line no-new
+  }
   // Initialize plugin
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {

package/src/scss/components/_letter.scss

@@ -13,6 +13,18 @@ $letter-shadow-color: color.scale(
   $alpha: -60%
 ) !default;
 
+$letter-signature-max-width: 12rem !default;
+$letter-signature-justify-content: flex-start !default;
+
+$letter-counter-font-family: $header-font-family !default;
+$letter-counter-font-size: $large-font-size !default;
+$letter-counter-line-height: if(
+  $letter-counter-font-size == $large-font-size,
+  $large-lineheight,
+  grid-lineheight($letter-counter-font-size)
+) !default;
+$letter-counter-font-weight: $global-weight-bold !default;
+
 .letter {
   position: relative;
   background: $letter-background;
@@ -50,4 +62,53 @@ $letter-shadow-color: color.scale(
     transform: skew(3deg) rotate(3deg);
     transform-origin: bottom right;
   }
+
+  // Styles for uploaded signature images + name and description
+  .signatures {
+    @extend .no-bullet;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    gap: $global-margin;
+
+    @include breakpoint(medium) {
+      grid-template-columns: repeat(2, auto);
+    }
+    @include breakpoint(xlarge) {
+      grid-template-columns: repeat(3, auto);
+    }
+
+    li {
+      display: flex;
+      flex-direction: column;
+      justify-content: $letter-signature-justify-content;
+      max-width: $letter-signature-max-width;
+    }
+  }
+
+  .signature-name {
+    font-weight: $global-weight-bold;
+  }
+
+  .signature-image {
+    margin-bottom: 0.5 * $global-margin;
+  }
+
+  // Styles for some big text with a counter
+  .counter {
+    font-family: $letter-counter-font-family;
+    font-size: $letter-counter-font-size;
+    line-height: $letter-counter-line-height;
+    font-weight: $letter-counter-font-weight;
+    margin-bottom: 0.5 * $global-margin;
+  }
+
+  .counter-wrapper {
+    margin-bottom: $global-margin;
+
+    &:last-child {
+      margin-top: 2 * $global-margin;
+      text-align: center;
+    }
+  }
 }