mp-design-system 0.4.13 → 0.5.6

package/src/_includes/components/card/card.scss

@@ -5,8 +5,13 @@
   flex-direction: column;
   align-items: stretch;
 
-  &--alt {
+  &--alt,
+  &--event {
     background: color("petrol", "step-3");
+
+    &__specs {
+      color: color("grey", "step-1")
+    }
   }
 
   &--featured {
@@ -156,14 +161,6 @@
     @extend .u-16\/9;
   }
 
-  &--event {
-    background: color("petrol", "step-3");
-  }
-
-  &--event &__specs {
-    color: color("grey", "step-1");
-  }
-
   &__primary {
     @include flow("s");
   }

package/src/_includes/components/filter-search/filter-search.scss

@@ -16,6 +16,11 @@
     max-width: 792px;
     flex-grow: 8;
 
+    fieldset {
+      border: 0;
+      font-size: 0;
+    }
+
     .c-icon {
       font-size: 1.375rem;
     }

package/src/_includes/components/table/table.scss

@@ -21,7 +21,7 @@
     color: inherit;
   }
 
-  thead th {
+  th {
     background: color('petrol');
     color: color('white');
   }

package/src/_includes/components/usp/usp.scss

@@ -2,14 +2,20 @@
   @include padding('s-m');
   border: 1px solid;
   border-image-slice: 1;
-  border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));
+  border-image-source: linear-gradient( to right, 
+    rgba(color('blue'), 0.5), 
+    rgba(color('green'), 0.5));
+  position: relative;
 
   &__title {
     max-width: 300px;
     color: color('petrol');
 
     @supports(-webkit-text-fill-color:transparent) {
-      background-image: -webkit-gradient(linear,0% 0%,100% 100%,from(color('petrol')),to(color('blue')));
+      background-image: -webkit-gradient(linear,
+        0% 0%,100% 100%,
+        from(color('petrol')),
+        to(color('blue')));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: inline-block;

package/src/_includes/page.njk

@@ -3,10 +3,6 @@
 
 {% extends "layout.njk" %}
 
-{% block head %}
-    <link rel="stylesheet" href="https://www.malvernpanalytical.com/resource/css/malvernpanalytical.min.css?v=637466523520000000" />
-{% endblock %}
-
 {% block inner %}
     {{ header({
         siteNav: siteNav

package/src/assets/scss/elements/reset.scss

@@ -1,46 +1,109 @@
+
 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  min-height: 100vh;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+blockquote,
+pre,
+ol,
+ul,
+figure {
+  padding: 0;
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border: none;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+aside,
+main,
+nav {
+  display: block;
+}
+
+iframe {
+  border: none;
+}
+
+// Typography
+
 @mixin mp-reset-base {
   font: weight() #{1.125rem}/lh() $font-stack;
   @include step();
   color: color('grey');
 }
 
-.mp {
+body {
   @include mp-reset-base();
+}
 
-  a,
-  a:hover {
-    cursor: pointer;
-    color: inherit;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+dl {
+  margin: 0
+}
 
-  ul, ol {
-    line-height: lh();
-  }
+ul, ol, p {
+  line-height: lh();
+}
 
-  ol, p, ul {
-    line-height: lh();
-  }
+a {
+  text-decoration: none;
 }
 
-html {
-  scroll-behavior: smooth;
+a,
+a:hover {
+  cursor: pointer;
+  color: inherit;
 }
 
+// Lists
+
 .mp ol,
 .mp ul {
   list-style: none;
 }
 
+// Font styles
+
+cite,
+address {
+  font-style: normal;
+}
+
+// Form
+
 [type="submit"],
 [type="button"],
 button {
@@ -59,4 +122,24 @@ button {
 .mp.c-button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}
+
+label {
+  cursor: pointer;
+}
+
+fieldset {
+  border: 0;
+  padding: 0.01em 0 0 0;
+}
+
+// Animation
+
+@media (prefers-reduced-motion:reduce) {
+  * {
+    -webkit-animation: none!important;
+    animation: none!important;
+    transition: none!important;
+    scroll-behavior: auto!important;
+  }
+}

package/src/assets/scss/library.scss

@@ -1,6 +1,6 @@
 @import './tools';
 @import './foundations';
-@import './elements/reset-full';
+@import './elements/reset';
 @import './objects/syntax-highlighting';
 @import './utilities/hr.scss';
 @import './objects/grid';

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

@@ -179,6 +179,27 @@ $grid-gutter-width: 36;
     }
   }
 
+  &--swipeable {
+    @media (max-width: 54.9375em) {
+      @include breakout('gutter');
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      -webkit-overflow-scrolling: touch;
+
+      & > * {
+        flex: 0 0 auto;
+        max-width: 23em;
+        width: calc(85vw - var(--gutter)*2.333); // !important
+        scroll-snap-align: center;
+      }
+
+      & > * + * {
+        margin-left: var(--gutter) !important;
+      }
+    }
+  }
+
   @media (min-width: 55em) {
     &--4\/7 > :nth-child(2n + 2),
     &--4\/7-switch > :nth-child(2n + 2) {

package/src/assets/scss/objects/prose.scss

@@ -13,9 +13,9 @@
     @extend .c-h,.c-h--step-1;
   }
 
-  &.mp p,
-  &.mp ul,
-  &.mp ol {
+  p,
+  ul,
+  ol {
     line-height: lh('prose');
   }
 

package/src/assets/scss/tools/breakout.scss

@@ -0,0 +1,15 @@
+// Breakout
+// Force an element to fill 100% of the window width, ignoring its container
+
+@mixin breakout($pad: 0) {
+    left: 50%;
+    position: relative;
+    transform: translateX(-50vw);
+    width: 100vw;
+    padding-left: safe-space($pad);
+    padding-right: safe-space($pad);
+}
+
+.u-breakout {
+    @include breakout
+}

package/src/assets/scss/tools/index.scss

@@ -1,3 +1,5 @@
+@import './breakout.scss';
+
 @function color($palette, $tone: 'step-0') {
   @return map-get(map-get($colours, $palette), $tone);
 }

package/src/brand/visual/colors.njk

@@ -130,6 +130,38 @@ status: 'In production'
             }
         ]
     },
+    {
+        name: 'MP21UtilGold',
+        key: 'Utility-Orange',
+        steps: [
+            
+            {
+                name: "-1",
+                hex: 'AE7809',
+                cmyk: '29.51.100.10'
+            },
+            {
+                name: 0,    
+                hex: 'F2A60D',
+                cmyk: '04.38.100.00'
+            },
+            {
+                name: 1,
+                hex: 'F6BF51',
+                cmyk: '03.26.79.00'
+            },                
+            {
+                name: 2,
+                hex: 'FCEAC5',
+                cmyk: '01.07.25.00'
+            },
+            {
+                name: 3,
+                hex: 'FEF8EC',
+                cmyk: '00.02.06.00'
+            }
+        ]
+    },
     {
         name: 'MP21Charcoal',
         key: 'Grey',
@@ -181,8 +213,8 @@ status: 'In production'
                 </div>
                 <table class="c-table">
                     <tbody>
-                        <tr><th>Hex</th><td>#{{step.hex | upper}}</td></tr>
-                        <tr><th>CMYK</th><td>{{step.cmyk}}</td></tr>
+                        <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
+                        <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
                     </tbody>
                 </table>
             {% endfor %}
@@ -190,6 +222,27 @@ status: 'In production'
     {% endfor%}
 </div>
 
+{{ markdown({
+    content: "# When to use color
+    
+The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Grey text, and splashes of color to highlight important elements.
+
+**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Along with **Blue** it is the color you will use most often in your designs.
+
+**Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
+
+**Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
+
+**Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
+
+**Grey** is widely used for text in all designs.
+
+## Tints and shades
+Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
+
+Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design."
+}) }}
+
 {{ alert({
     type: 'warning',
     content: '<ul>

package/src/patterns/grid-of-cards.njk

@@ -5,7 +5,7 @@ layout: patterns-page
 
 {% from "components/card/macro.njk" import card %}
 
-<div class="o-grid o-grid--of-three">
+<div class="o-grid o-grid--of-three o-grid--swipeable">
   {% for _ in [0, 1, 2] %}
     {{ card({
       theme: {

package/src/prototype/index.njk

@@ -20,7 +20,7 @@ tags: prototype
 {% block content %}
   {{ hero({
     title: "We’re BIG on small.",
-    content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
+    content: '<p>We make scientific instruments and services that make the invisible visible, so you can make the impossible possible.</p>',
     cta: {
       label: 'About Malvern Panalytical',
       link: ''
@@ -115,16 +115,14 @@ tags: prototype
           <nav class="c-tabs__controls u-scroll-shadows--h">
             <ul class="c-tabs__controls-list">
               <li><a class="c-tabs__control c-tabs__control--active" href="#tab-industry-1">Primary materials</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Pharmaceuticals and food</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Advanced materials</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Contract research services</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Academia</a></li>
+              <li><a class="c-tabs__control" href="#tab-industry-2">Pharmaceuticals and food</a></li>
+              <li><a class="c-tabs__control" href="#tab-industry-3">Advanced materials</a></li>
             </ul>
           </nav>
           
           <div class="c-tabs__content">
             <div id="tab-industry-1" class="c-tab c-tab--active">
-              <div class="o-grid o-grid--of-four">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
                 {{ industryCard({
                   title: 'Building materials',
                   link: '',
@@ -165,6 +163,134 @@ tags: prototype
                     alt: ''
                   }
                 }) }}
+                {{ industryCard({
+                  title: 'Academia',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+              </div>
+            </div>
+            <div id="tab-industry-2" class="c-tab">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
+                {{ industryCard({
+                  title: 'Biologics',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Food and drink analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-4.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Pharmaceutical solutions',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Contract research services',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Academia',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+              </div>
+            </div>
+            <div id="tab-industry-3" class="c-tab">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
+                {{ industryCard({
+                  title: 'Advanced manufacturing',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Aerospace and automotive',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Battery and energy',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Electronics and semiconductors',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Environmental monitoring and analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-4.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Forensic analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Nanomaterials',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Polymers, plastics, fibers and elastomers',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Specialty chemicals',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
               </div>
             </div>
           </div>
@@ -199,7 +325,7 @@ tags: prototype
 
         <div class="c-tabs__content">
           <div id="tab-webinars" class="c-tab c-tab--active">
-            <div class="o-grid o-grid--of-three">
+            <div class="o-grid o-grid--of-three o-grid--swipeable">
               {{ card({
                 theme: {
                   layout: 'single',

package/src/prototype/webinars-3-2-1.njk

@@ -22,7 +22,7 @@ tagTitle: Webinars - featured layout
 
     <aside class="u-flow">
       <h3 class="c-h c-h--upper">Featured events</h3>
-      <div class="o-grid o-grid--of-three">
+      <div class="o-grid o-grid--of-three o-grid--swipeable">
         {{ card({
           theme: {
             layout: 'single',

package/src/prototype/webinars.njk

@@ -24,7 +24,7 @@ tagTitle: Webinars
 
     <aside class="u-flow">
       <h3 class="c-h c-h--upper">Featured events</h3>
-      <div class="o-grid o-grid--of-three">
+      <div class="o-grid o-grid--of-three o-grid--swipeable">
         {{ card({
           theme: {
             layout: 'single',