maverick-wave 4.17.0 → 4.19.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.17.0",
+  "version": "4.19.0",
   "config": {
-    "version_short": "4.17"
+    "version_short": "4.19"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/cards-container.html

@@ -115,6 +115,23 @@
       </p>
     </div>
   </div>
+
+  <div class="mw-card">
+    <div class="mw-card-body">
+      <h3 class="mw-card-title">
+        <span class="mw-card-title-icon mw-card-title-icon-lg">
+          <img src="https://m1well.com/images/header_logo.svg" alt="" />
+        </span>
+        A logo instead of an icon
+      </h3>
+      <hr class="mw-card-title-divider" />
+      <p class="mw-card-text">
+        The same slot takes an <code>&lt;img&gt;</code> - a product logo, a
+        portrait. Add <code>mw-card-title-icon-lg</code> there: a wordmark
+        inside the default 38px is a smudge.
+      </p>
+    </div>
+  </div>
 </div>
 
 <h3 class="mw-mb-4 mw-mt-6">Tech-Stack Cards</h3>

package/src/partials/info-container.html

@@ -26,6 +26,19 @@
   </div>
 </div>
 
+<h4 class="mw-mb-2 mw-mt-5">Block</h4>
+<div class="mw-card mw-card-simple">
+  <div class="mw-info mw-info-primary mw-info-block">
+    <strong>The same frame, carrying a paragraph</strong>
+    <span
+      >The base is built for a short figure and centres it in a narrow column.
+      The block variant ranges its text left up to a measure, sets it in body
+      weight and leading, and stays put under the pointer - for a note, a
+      disclaimer, or a short explanation beside the thing it explains.</span
+    >
+  </div>
+</div>
+
 <h4 class="mw-mb-2 mw-mt-5">Counters</h4>
 <div class="mw-card mw-card-simple">
   <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">

package/src/scss/base/_base.scss

@@ -124,6 +124,8 @@ $_active-prefix: 'dark';
     calc(100% - 2 * var(--mw-container-gutter))
   );
   --mw-section-padding-block: #{spacing('7')};
+  --mw-section-title-gap: #{spacing('7')};
+  --mw-scroll-hint-offset: #{spacing('9')};
 
   // Active theme - aliases onto the dark or light set above
   @each $name, $value in $_active-theme {

package/src/scss/components/_avatars.scss

@@ -57,9 +57,9 @@ $_mw-avatar-colors: (
   }
 
   &-xl {
-    width: 250px;
-    height: 250px;
-    border-width: 7px;
+    width: 210px;
+    height: 210px;
+    border-width: 6px;
     font-size: font-size('6xl');
   }
 
@@ -125,7 +125,7 @@ $_mw-avatar-colors: (
       margin-right: -23px;
     }
     .mw-avatar-xl {
-      margin-right: -40px;
+      margin-right: -32px;
     }
 
     .mw-avatar:last-child {
@@ -152,9 +152,9 @@ $_mw-avatar-colors: (
     }
 
     &-xl {
-      width: 170px;
-      height: 170px;
-      border-width: 6px;
+      width: 150px;
+      height: 150px;
+      border-width: 5px;
     }
   }
 }

package/src/scss/components/_cards.scss

@@ -24,6 +24,13 @@ $_mw-card-addon-colors: (
   color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
   box-shadow: var(--mw-elevation-2);
   transition: var(--mw-transition);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 // Fading rule used by the title divider and the stack header underline
@@ -213,9 +220,18 @@ $_mw-card-addon-colors: (
   //     <span class="mw-card-title-icon"><i class="fas fa-file-invoice"></i></span>
   //     Invoices
   //   </h3>
+  //
+  // An <img> works in the same slot - a product logo or a portrait instead of
+  // an icon. Reach for the -lg step there: a wordmark inside 38px is a smudge.
   &-title-icon {
     @include _card-icon-circle;
     font-size: font-size('lg');
+
+    &-lg {
+      width: 62px;
+      height: 62px;
+      font-size: font-size('2xl');
+    }
   }
 
   &-title-divider {

package/src/scss/components/_info.scss

@@ -64,6 +64,42 @@ $_mw-info-colors: (
     font-weight: font-weight('medium');
   }
 
+  // Block variant: the same framed surface, carrying a paragraph instead of a
+  // value. The base is built for a short figure - it centres its content in a
+  // narrow column, sets it in medium weight and lifts on hover, which turns
+  // running text into a ragged stack that twitches under the pointer. This
+  // reads as a note instead: ranged left up to a measure, body weight, body
+  // leading, and it stays put.
+  //
+  //   <div class="mw-info mw-info-primary mw-info-block">
+  //     <strong>Why greyscale?</strong>
+  //     <span>Because the frame is not the stage ...</span>
+  //   </div>
+  &-block {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 68ch;
+    margin-inline: auto;
+    padding: spacing('6') spacing('7');
+    font-weight: font-weight('normal');
+    line-height: 1.7;
+    text-align: left;
+    text-wrap: pretty;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    @include hover {
+      transform: none;
+    }
+
+    strong {
+      margin-bottom: spacing('2');
+    }
+  }
+
   // counter variant: big number + small label
   &-counter {
     min-width: spacing('12');

package/src/scss/layout/_footer.scss

@@ -3,8 +3,7 @@
 
 .mw-footer {
   background: var(--mw-footer-background);
-  padding: spacing('5') spacing('0');
-  margin-top: spacing('6');
+  padding: spacing('7') spacing('0');
   border-top: 1px solid var(--mw-border-accent);
 
   &-top {

package/src/scss/layout/_main.scss

@@ -77,6 +77,51 @@
   }
 }
 
+// The "scroll down" cue at the bottom of a hero. It belongs to the hero
+// container and not to the flow below it: a hero fills the viewport, so the
+// cue has to sit on its lower edge no matter how tall the content above is.
+// Selector beats the `> *` rule above it, which would otherwise put the
+// element back into flow.
+.mw-container:has(.mw-hero) > .mw-scroll-hint {
+  position: absolute;
+  bottom: var(--mw-scroll-hint-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: spacing('2');
+  color: color-mix(in srgb, var(--mw-hero-text-color) 45%, transparent);
+  font-size: font-size('xs');
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+
+  @include hover {
+    color: var(--mw-hero-text-color);
+  }
+}
+
+@keyframes mw-scroll-hint-float {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+  50% {
+    transform: translate(-50%, 7px);
+  }
+}
+
+// Same selector as the rule above on purpose: a media query adds no
+// specificity, so a bare `.mw-scroll-hint` here loses to the `.mw-container`
+// chain and the cue keeps bobbing for everyone who asked it not to.
+@media (prefers-reduced-motion: reduce) {
+  .mw-container:has(.mw-hero) > .mw-scroll-hint {
+    animation: none;
+  }
+}
+
 .mw-content {
   flex: 1;
   padding-top: spacing('7');

package/src/scss/layout/_section.scss

@@ -2,7 +2,7 @@
 
 .mw-section-title {
   font-size: font-size('3xl');
-  margin-bottom: spacing('7');
+  margin-bottom: var(--mw-section-title-gap);
   text-align: center;
   position: relative;