Merge pull request #61 from ceph/feature/89-toolbar

sub-menu component, --shadow-black custom property, icons.

src/css/base.document.css

@@ -4,6 +4,7 @@ html {
   line-height: var(--font-leading-none);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
 }
 

src/css/base.focus.css

@@ -13,7 +13,8 @@
   outline-offset: var(--size-0);
 }
 
-.js-focus-visible .nav-secondary .focus-visible {
+.js-focus-visible .nav-secondary .focus-visible,
+.js-focus-visible .sub-menu .focus-visible {
   outline-offset: calc(-1 * var(--size-0_5));
 }
 

src/css/component.language-selector.css

@@ -167,8 +167,7 @@
     background: var(--color-grey-300);
     border: var(--size-px) solid var(--color-grey-500);
     border-radius: var(--size-1);
-    box-shadow: 0 0.0625rem 0.125rem hsla(var(--color-black-hsl), 0.05), 0 0.125rem 0.25rem hsla(var(--color-black-hsl), 0.05),
-      0 0.25rem 0.5rem hsla(var(--color-black-hsl), 0.05), 0 0.5rem 1rem hsla(var(--color-black-hsl), 0.05);
+    box-shadow: var(--shadow-black);
     right: 0;
     min-width: var(--size-48);
     padding: var(--size-4);

src/css/component.link-cover.css

@@ -10,8 +10,7 @@
 }
 
 .link-cover--shadow:hover::before {
-  box-shadow: 0 0.0625rem 0.125rem hsla(var(--color-black-hsl), 0.05), 0 0.125rem 0.25rem hsla(var(--color-black-hsl), 0.05),
-    0 0.25rem 0.5rem hsla(var(--color-black-hsl), 0.05), 0 0.5rem 1rem hsla(var(--color-black-hsl), 0.05);
+  box-shadow: var(--shadow-black);
 }
 
 .link-cover--shadow::before {

src/css/component.nav-secondary.css

@@ -102,8 +102,7 @@
 
   .js .nav-secondary__sub {
     background: var(--color-gunmetal);
-    box-shadow: 0 0.0625rem 0.125rem hsla(var(--color-black-hsl), 0.05), 0 0.125rem 0.25rem hsla(var(--color-black-hsl), 0.05),
-      0 0.25rem 0.5rem hsla(var(--color-black-hsl), 0.05), 0 0.5rem 1rem hsla(var(--color-black-hsl), 0.05);
+    box-shadow: var(--shadow-black);
     display: none;
     left: 0;
     position: absolute;

src/css/component.section.css

@@ -5,6 +5,7 @@
   --section-gutters-y: var(--size-10);
   padding-bottom: var(--section-gutters-y);
   padding-top: var(--section-gutters-y);
+  scroll-margin-top: var(--size-scroll-top);
 }
 
 .section--full {

src/css/component.sub-menu.css

@@ -0,0 +1,84 @@
+/* ---------- COMPONENT sub-menu ---------- */
+
+.sub-menu {
+  display: none;
+}
+
+@media (--mq-lg) {
+  .sub-menu {
+    background-attachment: local, local, scroll, scroll;
+    background-color: var(--color-white);
+    background-image: linear-gradient(to right, var(--color-white), var(--color-white)),
+      linear-gradient(to right, var(--color-white), var(--color-white)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
+      linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+    background-position: left center, right center, left center, right center;
+    background-repeat: no-repeat;
+    background-size: 1em 100%, 1em 100%, 0.5em 100%, 0.5em 100%;
+    box-shadow: var(--shadow-black);
+    display: flex;
+    list-style: none;
+    margin-top: calc(-1 * var(--size-10));
+    overflow-x: auto;
+    padding: var(--size-0);
+  }
+
+  .sub-menu > li {
+    position: relative;
+  }
+
+  .sub-menu > li:nth-last-child(2):first-child,
+  .sub-menu > li:nth-last-child(2):first-child ~ li {
+    flex: 1 0 var(--size-1-2);
+  }
+
+  .sub-menu > li:nth-last-child(3):first-child,
+  .sub-menu > li:nth-last-child(3):first-child ~ li {
+    flex: 1 0 var(--size-1-3);
+  }
+
+  .sub-menu > li:nth-last-child(4):first-child,
+  .sub-menu > li:nth-last-child(4):first-child ~ li {
+    flex: 1 0 var(--size-1-4);
+  }
+
+  .sub-menu > li:not(:first-child) {
+    padding-left: var(--size-px);
+  }
+
+  .sub-menu > li:not(:first-child)::before {
+    background: var(--color-grey-500);
+    content: "";
+    height: var(--size-2-3);
+    left: 0;
+    position: absolute;
+    top: var(--size-1-6);
+    width: var(--size-px);
+  }
+
+  .sub-menu a {
+    display: block;
+    color: var(--color-red-500);
+    font-weight: var(--font-weight-semibold);
+    height: var(--size-full);
+    padding: var(--size-4);
+    text-align: center;
+    text-decoration: none;
+    transition: background-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);
+    white-space: nowrap;
+  }
+
+  .sub-menu a:hover {
+    background: var(--color-grey-300);
+  }
+
+  .sub-menu a:active {
+    background: var(--color-grey-300);
+    color: var(--color-red-600);
+  }
+
+  .sub-menu img {
+    display: block;
+    margin: 0 auto var(--size-4);
+    width: var(--size-12);
+  }
+}

src/css/main.css

@@ -31,6 +31,7 @@
 @import "component.section.css";
 @import "component.site-footer.css";
 @import "component.site-header.css";
+@import "component.sub-menu.css";
 @import "component.tint.css";
 
 /* utilities */

src/css/settings.colors.css

@@ -97,4 +97,8 @@
   --color-youtube-red-l: 50%;
   --color-youtube-red-hsl: var(--color-youtube-red-h), var(--color-youtube-red-s), var(--color-youtube-red-l);
   --color-youtube-red: hsl(var(--color-youtube-red-hsl));
+
+  /* ---------- shadow ---------- */
+  --shadow-black: 0 0.0625rem 0.125rem hsla(var(--color-black-hsl), 0.05), 0 0.125rem 0.25rem hsla(var(--color-black-hsl), 0.05),
+    0 0.25rem 0.5rem hsla(var(--color-black-hsl), 0.05), 0 0.5rem 1rem hsla(var(--color-black-hsl), 0.05);
 }

src/css/settings.sizes.css

@@ -63,4 +63,6 @@
   /* screen */
   --size-h-screen: 100vh;
   --size-w-screen: 100vw;
+
+  --size-scroll-top: 5.25rem; /* 84px */
 }

src/en-GB/discover/benefits/index.html

@@ -5,6 +5,34 @@
 
 <h1 class="h1">Benefits</h1>
 
+<section>
+  <div class="bg-navy section section--full px-48 py-32 text-center">
+    <h2 class="color-white h2">Ceph offers industry leading performance, reliablity and&nbsp;flexibility.</h2>
+    <p class="color-white mb-0 p">But don’t take our word for it, the numbers below speak for themselves.</p>
+  </div>
+  <ul class="sub-menu ul">
+    <li>
+      <a href="#performance"><img alt="" src="/assets/svgs/icon-performance-blue-red.svg" />Performance</a>
+    </li>
+    <li>
+      <a href="#"><img alt="" src="/assets/svgs/icon-scalable-blue-red.svg" />Scalability</a>
+    </li>
+    <li>
+      <a href="#"><img alt="" src="/assets/svgs/icon-reliable-blue-red.svg" />Reliability &amp; management</a>
+    </li>
+    <li>
+      <a href="#"><img alt="" src="/assets/svgs/icon-innovation-blue-red.svg" />Innovation</a>
+    </li>
+  </ul>
+</section>
+
+<section class="section text-center" id="performance">
+  <h2 class="h2">Performance</h2>
+  <p class="p">
+    Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus.
+  </p>
+</section>
+
 <section class="bg-grey-300 section section--full">
   <h2 class="h2 text-center">Discover more</h2>