@foeewni/web-core 3.0.0-alpha.2 → 3.0.0-alpha.4

package/src/components/hero-panel/style.scss

@@ -250,7 +250,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
     color: $foe-extradark;
 
     span {
-      background: $foe-offwhite;
+      background: $foe-primary;
       padding: $spacer;
       display: inline-block;
     }

package/src/components/layout/reset.scss

@@ -16,3 +16,8 @@ input {
 .form-group {
   margin-bottom: 1rem;
 }
+
+p a:not(.btn) {
+  text-decoration: underline;
+  color: $foe-text;
+}

package/src/components/navigation/_nav-items.scss

@@ -42,7 +42,7 @@
 
         @include media-breakpoint-up(lg) {
           padding: 0 18px;
-          line-height: $foe-nav-height-large/2;
+          line-height: $foe-nav-height-large / 3;
         }
 
         &:focus {
@@ -92,8 +92,6 @@
   // Handheld only
   @include media-breakpoint-down(md) {
     &.foe-header-mobile-is-open {
-      background-color: $foe-extradark !important;
-
       ul.navbar-nav {
         max-height: calc(100vh - 4rem);
         overflow-y: auto;

package/src/components/navigation/_search.scss

@@ -15,13 +15,18 @@
       text-decoration: none !important;
       position: relative;
       line-height: $foe-nav-height-small;
-      color: $foe-offwhite !important;
+      color: $foe-extradark !important;
       transition: line-height $foe-transition-duration-base $foe-transition-easing;
       width: calc($spacer * 3);
       padding-left: calc($grid-gutter-width / 2);
       padding-right: calc($grid-gutter-width / 2);
       display: block;
 
+      .svg-inline--fa {
+        height: 1.5em;
+        transition: height $foe-transition-duration-base $foe-transition-easing;
+      }
+
       .fa-times {
         display: none;
       }
@@ -117,6 +122,10 @@
   &.js-menustack-stuck {
     .header-search {
       a.search-button {
+        .svg-inline--fa {
+          height: 1em;
+        }
+
         @include media-breakpoint-up(lg) {
           line-height: $foe-nav-height-large-scrolled;
         }

package/src/components/tools/jaunty.js

@@ -0,0 +1,209 @@
+/* @docs
+
+# Scripts:Jaunty
+
+Jauntifies a text header with the data-jaunt-factor attribute.
+
+Usage:
+```
+<h1 data-jaunt-factor="1">Jaunty Title</h1>
+
+<h2 data-jaunt-factor="2">Very Jaunty Title</h2>
+```
+
+Based on James South Codepen https://codepen.io/jrsouth/pen/ZEmeoJz with ideas from
+https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node-in-javascript.htm
+*/
+(() => {
+  // Config
+  const ROTATION_MAX_DEGREES = 3; // Degrees. "Normal" is around 2.5
+  const BACKGROUND_EXTENSION = 1.5; // rem. Normal is around 1
+  const CORNER_JIGGLE_MAX = 1; // rem. Normal is around .2
+  let oneRemInPx = 0;
+  let extension = 0;
+
+  // Helpers
+  const generateRandomHex = (length) => {
+    let result = '';
+    const characters = 'ABCDEF1234567890';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  };
+
+  const drawPolygon = (context, points) => {
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      context.lineTo(points[i].x, points[i].y);
+    }
+    context.lineTo(points[0].x, points[0].y);
+    context.fill();
+  };
+
+  // const drawPoint = (context, x, y) => {
+  //   if (!context.fillStyle) {
+  //     context.fillStyle = "#61bdaa";
+  //   }
+  //   context.fillRect(x - 1.5, y - 1.5, 3, 3);
+  // };
+
+  const jauntTarget = (target) => {
+    if (target.firstChild.nodeType !== Node.TEXT_NODE) {
+      return;
+    }
+
+    // Create a unique ID to link this element with the canvas background
+    if (!target.dataset.backgroundCanvasId) {
+      target.dataset.backgroundCanvasId = generateRandomHex(12);
+    }
+
+    // Clean up any existing jauntiness
+    const existingCanvas = document.getElementById(
+      target.dataset.backgroundCanvasId
+    );
+    if (existingCanvas) {
+      existingCanvas.remove();
+    }
+    const previousTransform = getComputedStyle(target).transform;
+    target.style.transition = 'none';
+    target.style.transform = null;
+
+    // Figure out the bounding boxes
+    const jauntFactor = parseFloat(target.dataset.jauntFactor);
+
+    // Collapse whitespace
+    target.textContent = target.textContent.replace(/\s+/g, ' ').trim();
+
+    // Get the individual lines as rendered on screen
+    const { textContent } = target.firstChild;
+    const range = document.createRange();
+    range.setStart(target.firstChild, 0);
+    range.setEnd(target.firstChild, textContent.length);
+
+    // Get the bounding boxes
+    const targetBox = target.getBoundingClientRect();
+    const parentBox = target.offsetParent.getBoundingClientRect();
+    const outerBox = range.getBoundingClientRect();
+    const boxes = Array.from(range.getClientRects());
+
+    // Insert the new 2D canvas element
+    const canvas = document.createElement('canvas');
+    canvas.id = target.dataset.backgroundCanvasId;
+    target.parentNode.insertBefore(canvas, target);
+    canvas.style.position = 'absolute';
+    canvas.style.zIndex = -1;
+    canvas.style.top = `${(targetBox.top - parentBox.top) - 2 * extension}px`;
+    canvas.style.left = `${(targetBox.left - parentBox.left) - 2 * extension}px`;
+    canvas.style.width = `${targetBox.width + 4 * extension}px`;
+    canvas.style.height = `${targetBox.height + 4 * extension}px`;
+    canvas.width = targetBox.width + 4 * extension;
+    canvas.height = targetBox.height + 4 * extension;
+    canvas.style.pointerEvents = 'none';
+
+    // Draw the background boxes
+    const context = canvas.getContext('2d');
+
+    // set the background color and remove and existing background
+    context.fillStyle = target.dataset.previousBackgroundColor
+      ? target.dataset.previousBackgroundColor
+      : getComputedStyle(target).backgroundColor;
+    if (!context.fillStyle) {
+      context.fillStyle = '#61bdaa';
+    }
+    target.dataset.previousBackgroundColor = context.fillStyle;
+    target.style.backgroundColor = 'transparent';
+
+    boxes.forEach((lineBox) => {
+      const points = [];
+
+      points.push({
+        // Top left
+        x: lineBox.left - outerBox.left + 2 * extension,
+        y: lineBox.top - outerBox.top + 2 * extension,
+      });
+      points.push({
+        // Top right
+        x: points[0].x + lineBox.width + 2 * extension,
+        y: points[0].y,
+      });
+      points.push({
+        // Bottom right
+        x: points[0].x + lineBox.width + 2 * extension,
+        y: points[0].y + lineBox.height + 2 * extension,
+      });
+      points.push({
+        // Bottom left
+        x: points[0].x,
+        y: points[0].y + lineBox.height + 2 * extension,
+      });
+
+      // context.fillRect(
+      //   lineBox.left - outerBox.left + 2 * extension,
+      //   lineBox.top - outerBox.top + 2 * extension,
+      //   lineBox.width + 2 * extension,
+      //   lineBox.height + 2 * extension,
+      // );
+
+      // Jiggle them points around
+      points.forEach((point, index) => {
+        points[index] = {
+          x:
+            point.x
+            + (Math.random() * 2 - 1)
+              * oneRemInPx
+              * CORNER_JIGGLE_MAX
+              * jauntFactor,
+          y:
+            point.y
+            + (Math.random() * 2 - 1)
+              * oneRemInPx
+              * CORNER_JIGGLE_MAX
+              * jauntFactor,
+        };
+      });
+
+      // points.forEach((point) => {
+      //   drawPoint(context, point.x, point.y);
+      // });
+
+      drawPolygon(context, points);
+    });
+
+    target.style.transform = previousTransform;
+    target.style.transition = null;
+
+    // Add rotation
+    const rotationFactor = ROTATION_MAX_DEGREES * jauntFactor
+      * (Math.random() * 2 - 1); // -1 to  +1
+    target.style.transform = `rotate(${rotationFactor}deg)`;
+    canvas.style.transform = `rotate(${rotationFactor}deg)`;
+  };
+
+  // The main event
+  const createBackground = () => {
+    oneRemInPx = parseFloat(
+      getComputedStyle(document.documentElement).fontSize
+    );
+    extension = BACKGROUND_EXTENSION * oneRemInPx;
+
+    const targets = document.querySelectorAll('[data-jaunt-factor]');
+
+    // Insert some jaunt
+    targets.forEach((target) => {
+      jauntTarget(target);
+    });
+  };
+
+  const init = () => {
+    createBackground();
+  };
+
+  // Go time
+  document.addEventListener('DOMContentLoaded', init);
+  document.addEventListener('load', init);
+  window.addEventListener('resize', createBackground);
+  window.runJaunt = init;
+})();

package/src/components/typography/blockquotes.scss

@@ -19,18 +19,15 @@ The Friends of the Earth blockquotes use the secondary font
 @import '../../utils/scss/loader';
 
 blockquote {
-  border-color: $gray-400;
-  border-style: double;
-  border-width: .2em 0;
-  padding: $spacer*1.5 0;
+  padding: $spacer * 1.5 0;
   width: 80%;
-  margin: $spacer*2 auto;
+  margin: ($spacer * 2) auto;
   float: none;
   clear: both;
 
   p {
     font-family: $font-family-serif;
-    font-weight: 700;
+    font-weight: normal;
     font-size: $blockquote-font-size;
     line-height: $blockquote-font-size * 1.35;
     color: $foe-extradark;
@@ -75,24 +72,25 @@ blockquote {
 
   cite,
   & + .citation {
-    font-family: $font-family-sans-serif;
-    font-size: 1rem;
+    width: 80%;
+    margin: auto;
+    font-family: $font-family-serif;
+    font-size: $blockquote-font-size;
     line-height: 1.3rem;
-    font-weight: 400;
-    font-style: italic;
-    color: $gray-500;
+    font-weight: bold;
+    color: $foe-extradark;
     display: block;
-    text-align: right;
-    margin-top: 1em;
-    padding-left: 10%;
+    text-align: left;
+    margin-top: $spacer;
 
-    &::before {
-      content: "\2014\00A0\00A0";
-      color: $foe-primary;
+    @include media-breakpoint-up(sm) {
+      width: calc(100% * 4 / 6);
     }
   }
 
   & + .citation {
-    margin-top: $spacer * -1;
+    margin-top: $spacer * -3.5;
+    margin-bottom: $spacer * 2;
+    line-height: $spacer * 2;
   }
 }

package/src/fonts.js

@@ -32,6 +32,7 @@ To use them on your CSS please import the webfonts through Google Fonts
 // Note, single line deep imports are needed here, for some reason fontawesome messes up
 // with normal imports and webpack ends up bundling the whole library (1.25mb!)
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
+
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -40,19 +41,6 @@ import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons/faExt
 import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleUp';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
-import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
-import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
-import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
-import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
-import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
-import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -76,6 +64,23 @@ import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
+import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
+import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
+import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
+import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
+import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
+import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
+import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
+import { faBluesky } from '@fortawesome/free-brands-svg-icons/faBluesky';
+import { faThreads } from '@fortawesome/free-brands-svg-icons/faThreads';
+
 
 // Add actually used FA icons
 library.add(
@@ -88,6 +93,7 @@ library.add(
   faShare,
   faLink,
   faTwitter,
+  faXTwitter,
   faFacebook,
   faFacebookF,
   faPinterest,
@@ -121,20 +127,25 @@ library.add(
   faSave,
   faTrashAlt,
   faCloudUploadAlt,
-  faSignInAlt
+  faSignInAlt,
+  faBluesky,
+  faThreads
 );
 
 // Look for Google fonts and append them if they are not there already
 // We avoiding using @import url(); because the new URL has semicolons on it
 // and it tremendously gets broken from some preprocessors.
 
-const fonts = window.document.createElement('link');
 // eslint-disable-next-line max-len
-const href = 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap';
-fonts.setAttribute('rel', 'stylesheet');
-fonts.setAttribute('crossorigin', 'anonymous');
-fonts.setAttribute('href', href);
-document.head.appendChild(fonts);
+const googleFontsHref = 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+const googleFontsLink = window.document.querySelector(`link[href="${googleFontsHref}"]`);
+if (!googleFontsLink) {
+  const fonts = window.document.createElement('link');
+  fonts.setAttribute('rel', 'stylesheet');
+  fonts.setAttribute('crossorigin', 'anonymous');
+  fonts.setAttribute('href', googleFontsHref);
+  document.head.appendChild(fonts);
+}
 
 // Kicks off the process of finding <i> tags and replacing with <svg>
 dom.watch();

package/src/main.js

@@ -19,6 +19,7 @@ import './components/tools/data-click-track';
 import './components/tools/rubik-tracking';
 import './components/tools/data-defer-src';
 import './components/tools/stickystack';
+import './components/tools/jaunty';
 
 // Bootstrap helpers
 import './components/layout/alerts.scss';

package/src/utils/scss/helpers/_variables.scss

@@ -8,17 +8,34 @@
 //
 
 // Colours
-$foe-primary:         #61bdaa !default;
-$foe-light:           #dff2ee !default;
-$foe-secondary:         $foe-light !default;
-$foe-dark:            #182f2a !default;
-$foe-extradark:       #1e234d !default;
+$foe-leaf:            #61bdaa !default;
+$foe-iris:            #5a54a0 !default;
 $foe-sunset:          #ed6132 !default;
+$foe-space:           #1e234d !default;
+$foe-ice:             #f3f3f7 !default;
+$foe-conch:           #f1e2d4 !default;
+
+// Tints, would prefer to do this algorithmically but it's useful to have the hex codes on hand to compare with figmas
+$foe-leaf-75:         #81cabb !default;
+$foe-leaf-50:         #c0e5dd !default;
+$foe-leaf-25:         #dff2ee !default;
+$foe-sunset-75:       #f1815b !default;
+$foe-sunset-50:       #f6b099 !default;
+$foe-sunset-25:       #fbdfd6 !default;
+$foe-iris-75:         #6d68a7 !default;
+$foe-iris-50:         #adaad0 !default;
+$foe-iris-25:         #deddec !default;
+
+$foe-primary:         $foe-leaf !default;
+$foe-light:           $foe-leaf-25 !default;
+$foe-secondary:       $foe-light !default;
+$foe-dark:            #182f2a !default;
+$foe-extradark:       $foe-space !default;
 
 $foe-white:           #fff !default;
 $foe-gray:            #b1b8c0 !default;
-$foe-accent:          #5a54a0 !default;
-$foe-offwhite:        #f4f6fa !default;
+$foe-accent:          $foe-iris !default;
+$foe-offwhite:        $foe-ice !default;
 
 $foe-success:         #5cb85c !default;
 $foe-info:            #5bc0de !default;
@@ -50,6 +67,11 @@ $foe-nav-shadow:  0 0 .5em .2em rgba(0, 0, 0, .25);
 
 $foe-text-shadow: 0 0 .5rem $foe-tint-overlay-heavy !default;
 
+$foe-backgrounds:
+  $foe-leaf-50,
+  $foe-sunset-50,
+  $foe-iris-50;
+
 //
 // Palettes vars, needed for Campaignion (mostly) maybe also D8
 //
@@ -390,7 +412,7 @@ $line-height-sm:              1.5;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .1rem * 3;
+$border-radius:               0; // .1rem * 3;
 $border-radius-lg:            .1rem * 4;
 $border-radius-sm:            .1rem * 2;
 
@@ -464,8 +486,8 @@ $display3-weight:             300;
 $display4-weight:             300;
 $display-line-height:         $headings-line-height;
 
-$lead-font-size:              ($font-size-base * 1.25);
-$lead-font-weight:            300;
+$lead-font-size:              $font-size-base;
+$lead-font-weight:            bold;
 
 $small-font-size:             80%;