mp-design-system 0.9.2 → 0.9.6

package/package.json

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

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

@@ -84,7 +84,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: radial-gradient(circle farthest-side at top right, rgba(color('grey'), 60%), rgba(color('grey', 'step--1'), 90%));
+      background: radial-gradient(ellipse farthest-side at bottom right, rgba(color('grey'), 60%), rgba(color('grey', 'step--1'), 90%));
     }
 
     @media (min-width: 55em) {

package/src/_includes/components/scroll-spy/scroll-spy.scss

@@ -3,7 +3,7 @@
   @include space("top", "gutter");
   overflow: hidden;
 
-  a {
+  a:not(.c-button) {
     color: color("utility-blue");
     position: relative;
     display: block;

package/src/_includes/components/twi/twi.scss

@@ -14,6 +14,7 @@
   svg {
     margin-left: $twi-space;
     font-size: 1.25em;
+    position: static !important;
   }
 
   &--left svg {

package/src/assets/scss/utilities/display.scss

@@ -30,10 +30,26 @@
   display: inline-block;
 }
 
+.u-float-left {
+  float: left;
+}
+
 .u-float-right {
   float: right;
 }
 
+.u-float--image-left {
+  @extend .u-float-left;
+  @include margin(0, 0, "xs-l", 0);
+  width: 100%;
+
+  @media (min-width: 38em) {
+    @include margin-right('xs-l');
+    min-width: 9rem;
+    width: 50%;
+  }
+}
+
 .u-float--image-right {
   @extend .u-float-right;
   @include margin(0, 0, "xs-l", 0);

package/src/content/index.njk

@@ -96,7 +96,7 @@ Which is why we’ve created these guidelines. They contain simple, practical ad
       },
       footer: {
         cta: {
-          link: '/content/real-life-examples/who-we-are-boilerplate/',
+          link: '/content/real-life-examples/01-who-we-are-boilerplate/',
           label: 'Read more'
         }
       }