@moreonion/foundist 3.2.6 → 3.3.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
   "private": false,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://gitlab.more-onion.com/themes/foundist"
@@ -23,11 +24,11 @@
     "fix:css": "stylelint --fix src/scss && prettier --write 'src/scss/**/*.scss'",
     "fix:js": "eslint --fix src",
     "fix": "yarn run fix:css && yarn run fix:js",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "^3.2.3",
-    "vite-plugin-nunjucks": "^0.1.10"
+    "@moreonion/foundation-base": "^3.3.0",
+    "vite-plugin-nunjucks": "^0.2.0"
   },
   "lint-staged": {
     "*.scss": [

package/src/scss/_util.scss

@@ -121,5 +121,17 @@
         background-color: get-background-color($card-background);
       }
     }
+    // Replace letter background if it’s the same as the background.
+    @if meta.type-of($letter-background) == color and $letter-background != transparent {
+      @if $letter-background == $background {
+        .letter {
+          @include letter-background-gradient(get-background-color($body-background));
+        }
+      } @else if $force {
+        .letter {
+          @include letter-background-gradient($letter-background);
+        }
+      }
+    }
   }
 }

package/src/scss/components/_letter.scss

@@ -1,20 +1,9 @@
 // Letter
 // - - - - - - - - - - - - - - -
-// Adds a letter-like background to an element
+// Additional styles for the letter component.
 
-@use "sass:color";
-
-$letter-background: $card-background !default;
-$letter-padding: (2 * $global-padding) (1.25 * $global-padding) !default;
-$letter-margin: 0 0 $global-margin 0 !default;
-$letter-shadow-color: color.scale(
-  get-background-color($letter-background),
-  $lightness: -60%,
-  $alpha: -60%
-) !default;
-
-$letter-signature-max-width: 12rem !default;
-$letter-signature-justify-content: flex-start !default;
+$letter-signature-font-weight: $global-weight-bold !default;
+$letter-signature-image-margin: 0 0 (0.5 * $global-margin) !default;
 
 $letter-counter-font-family: $header-font-family !default;
 $letter-counter-font-size: $large-font-size !default;
@@ -26,72 +15,14 @@ $letter-counter-line-height: if(
 $letter-counter-font-weight: $global-weight-bold !default;
 
 .letter {
-  position: relative;
-  background: $letter-background;
-  @include match-colors($letter-background);
-  padding: $letter-padding;
-  margin: $letter-margin;
-  box-shadow: 0 0.1rem 0.2rem $letter-shadow-color;
-
-  @extend .small-reverse-container-padding;
-  @extend .small-add-container-padding;
-
-  #{$text-tags} {
-    padding-#{$global-right}: 0;
-  }
-
-  // Additional shadows for a curling paper effect.
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    width: 50%;
-    height: 5rem;
-    bottom: 0.1rem;
-    background: transparent;
-    box-shadow: 0 0.5rem 0.6rem $letter-shadow-color;
-    z-index: -1;
-  }
-  &:before {
-    left: 0.1rem;
-    transform: skew(-3deg) rotate(-3deg);
-    transform-origin: bottom left;
-  }
-  &:after {
-    right: 0.1rem;
-    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;
-    }
+  // Styles for uploaded signature images
+  .signature-image {
+    margin: $letter-signature-image-margin;
   }
 
+  // Styles for the signature name + description
   .signature-name {
-    font-weight: $global-weight-bold;
-  }
-
-  .signature-image {
-    margin-bottom: 0.5 * $global-margin;
+    font-weight: $letter-signature-font-weight;
   }
 
   // Styles for some big text with a counter

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

@@ -2,7 +2,7 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the share button component
 
-$share-button-max-width: 28rem !default;
+$share-button-max-width: $button-max-width !default;
 
 .button.share {
   @extend .primary;

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

@@ -7,7 +7,7 @@
 
 $sticky-cta-background: $form-background !default;
 $sticky-cta-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !default;
-$sticky-button-max-width: 28rem !default;
+$sticky-button-max-width: $button-max-width !default;
 
 .sticky-cta {
   @include sticky-button;

package/src/scss/layout/_banner.scss

@@ -29,6 +29,7 @@ $banner-background: $fallback-background !default;
       // Ensure the first row is blocked when there is no #headline.
       #page:not(.with-headline) &:before {
         content: "";
+        grid-column: 1/-1;
       }
     }
 

package/src/scss/main.scss

@@ -84,6 +84,7 @@
 
 // Custom components
 @include mo-button;
+@include mo-centered-button;
 @include mo-close-button;
 @include mo-form-group;
 @include mo-form-steps;
@@ -94,6 +95,8 @@
 @include mo-drupal-ajax-loading;
 @include mo-payment-icons;
 @include mo-giftaid;
+@include mo-letter;
+@include mo-letter-signatures;
 @include mo-cookiebar;
 @include mo-slideshow;