mp-design-system 1.2.24 → 1.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_includes/components/footer/footer.scss

@@ -55,6 +55,10 @@
   }
 
   &__logo {
+    display: block;
+    max-width: 216px;
+    width: 60%;
+
     img {
       @include margin-right('gutter');
       filter: saturate(0) brightness(10);

package/src/_includes/components/hero/hero.scss

@@ -129,6 +129,20 @@
     @media (min-width: 38em) {
       background: linear-gradient(84.46deg, color('petrol', 'step--1') 7.52%, color('petrol') 44.84%, rgba(35, 80, 87, 0.8) 51.02%, rgba(52, 82, 87, 0.62) 54.99%, rgba(78, 86, 87, 0.2209) 59.54%, rgba(87, 87, 87, 0) 65.59%);
     }
+    
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      background: rgba(black, 0.33);
+      width: 100%;
+      height: 100%;
+
+      @media (min-width: 38em) {
+        background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);
+      }
+    }
 
     .u-wrap {
       @include padding-bottom('l-3xl');

package/src/_includes/components/meta-box/meta-box.scss

@@ -7,28 +7,4 @@
   .u-wrap--fields {
     @include padding-right(0)
   }
-
-  @media only screen and (min-width: 35em) and (max-width: 54.95em) {
-    column-width: 18em;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 var(--gutter);
-    grid-template-rows: auto max-content auto;
-    
-    h2 {
-      grid-column: 1/3;
-    }
-
-    li {
-      break-inside: avoid;
-    }
-        
-    .u-grey-step-1 {
-      grid-row: 2/4;
-    }
-    
-    .c-button {
-      align-self: start;
-    }
-  }
 }

package/src/_includes/includes/system-footer.njk

@@ -2,7 +2,7 @@
 
 <footer class="mp c-footer" role="contentinfo">
   <nav class="c-footer__primary u-wrap" aria-label="Footer">
-    <div class="o-grid o-grid--8/3-switch o-grid--push">
+    <div class="o-grid o-grid--8/3-switch o-grid--push o-grid--layout">
       <ol class="u-flow--xs u-margin-top-2xs">
         <li><h3>Quick links</h3></li>
         <li><a href="/brand/resources">Brand resources</a></li>

package/src/assets/scss/objects/grid.scss

@@ -185,6 +185,16 @@ $grid-gutter-width: 36;
     }
   }
 
+  // Prevents overlap on floated sticky elements when stacked
+  @media (max-width: 55em) {
+    &--float:not([class*="switch"]) > :nth-child(2n + 1),
+    &--float[class*="switch"] > :nth-child(2n + 2),
+    &--float:not([class*="switch"]) > :nth-child(2n + 2),
+    &--float[class*="switch"] > :nth-child(2n + 1) {
+      position: static;
+    }
+  }
+
   @media (min-width: 55em) {
     &--4\/7 > :nth-child(2n + 2),
     &--4\/7-switch > :nth-child(2n + 2) {

package/src/brand/typography.md

@@ -38,7 +38,7 @@ abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
 
 - Inter Light for printed materials
 - Inter Regular for web/software
-- Arial for office (e.g. Powerpoint)
+- Calibri for office (e.g. Powerpoint)
 - Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
 - <span class="c-library__semi">Inter Semi Bold</span> for emphasis
 - Recommended font sizes for body text: