Merge pull request #617 from mtruj013/review-fixes

Apply final review suggestions

static/sass/styles.scss

@@ -126,3 +126,21 @@
     overflow: scroll;
   }
 }
+
+.is-landing {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+  padding-top: $spv--small;
+
+  @media screen and (max-width: $breakpoint-small - 1) {
+    grid-auto-flow: row;
+  }
+}
+
+// Maintain typography bottom padding on mobile
+#resources-heading {
+  @media screen and (max-width: $breakpoint-small - 1) {
+    padding-bottom: $spv--strip-regular;
+  }
+}

templates/index.html

@@ -18,7 +18,7 @@ <h1 class="u-no-margin--bottom">The lightweight Kubernetes</h1>
     <div class="row">
       <div class="col-start-large-4 col-9">
         <hr class="p-rule">
-        <div class="p-stection" style="display: flex; justify-content: space-between; padding-top: .5rem;">
+        <div class="p-stection is-landing">
           <div>
             <a class="p-button--positive" href="#install-microk8s">Get started</a> 
             <a href="https://www.brighttalk.com/webcast/6793/378029?utm_source=brighttalk-portal&utm_medium=web&utm_content=microk8s&utm_campaign=webcasts-search-results-feed">Watch an intro to MicroK8s &nbsp;&rsaquo;</a>
@@ -78,7 +78,7 @@ <h3 class="p-heading--5">For software vendors</h3>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2 class="p-text--small-caps">Hassle-free Kubernetes</h2>
       <p class="p-heading--2">The simplest way to get K8s anywhere</p>
     </div>
@@ -129,7 +129,7 @@ <h2 id="install-microk8s">Install MicroK8s</h2>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Enterprise support option, no licence fees</h2>
     </div>
     <div class="col">
@@ -144,7 +144,7 @@ <h2>Enterprise support option, no licence fees</h2>
 <section class="p-section">
   <div class="row--50-50 p-section--shallow">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Zero-ops infrastructure</h2>
     </div>
     <div class="col">
@@ -179,7 +179,7 @@ <h2>The most popular cloud native projects<br class="u-hide--small"> at your fin
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Minimal, CNCF-certified distribution</h2>
     </div>
     <div class="col">
@@ -204,7 +204,7 @@ <h2>Minimal, CNCF-certified distribution</h2>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Automatic security updates and streamlined upgrades</h2>
     </div>
     <div class="col">
@@ -218,7 +218,7 @@ <h2>Automatic security updates and streamlined upgrades</h2>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Experience MicroK8s</h2>
     </div>
     <div class="col">
@@ -235,7 +235,7 @@ <h2>Experience MicroK8s</h2>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col" id="resources-heading">
       <h2>MicroK8s and Kubernetes resources</h2>
     </div>
     <div class="col">
@@ -277,18 +277,23 @@ <h3 class="p-text--small-caps">Whitepaper</h3>
         <div class="col-4">
           <ul class="p-list--divided">
             <li class="p-list__item"><a  href="https://ubuntu.com/engage/microk8s-451research">Kubernetes: a secure, flexible and automated edge for IoT developers</a></li>
-            <li class="p-list__item"><a href="/resources">Find more resources &nbsp;&rsaquo;</a></li>
           </ul>
         </div>
       </div>
     </div>
   </div>
+  <div class="row">
+    <div class="col-start-large-7 col-6 col-start-medium-4 col-medium-3">
+      <hr class="p-rule">
+      <p><a href="/resources">Find more resources &nbsp;&rsaquo;</a></p>
+    </div>
+  </div>
 </section>
 
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col">
+    <div class="col p-section">
       <h2>Looking for a more composable Kubernetes?</h2>
     </div>
     <div class="col">
@@ -303,7 +308,7 @@ <h2>Looking for a more composable Kubernetes?</h2>
 <section class="p-strip--white">
   <div class="row">
     <div class="col-start-large-4 col-9">
-      <h2>Insure your MicroK8s clusters with&nbsp;enterprise&nbsp;support</h2>
+      <h2>Insure your MicroK8s clusters<br class="u-hide--small"> with <br class="u-hide--medium u-hide--large">enterprise support</h2>
       <p>Get in touch with our team of Kubernetes experts</p>
       <p><a href="/contact-us" class="p-button--positive">Contact us</a></p>
     </div>

templates/partial/_get-started-linux.html

@@ -1,6 +1,6 @@
 <div class="row--25-75">
   <div class="col usv-2">
-    <img src="https://assets.ubuntu.com/v1/53c3be42-linuc-logo.svg" width="54" alt="">
+    <img src="https://assets.ubuntu.com/v1/6d9cf05a-Linux-var-width.svg" height="144" alt="Linux">
   </div>
   <div class="col">
     <ol class="p-stepped-list--detailed">