From 2ff1ff35203fafe92e9d26ba3db60831950cefb2 Mon Sep 17 00:00:00 2001
From: MariaPaula Trujillo <mtruj013@fiu.edu>
Date: Thu, 31 Aug 2023 17:54:37 +0200
Subject: [PATCH 1/3] Apply review suggestions

---
 static/sass/styles.scss                   | 10 ++++++++++
 templates/index.html                      | 20 ++++++++++----------
 templates/partial/_get-started-linux.html |  2 +-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 62ccf168..323c4d78 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -126,3 +126,13 @@
     overflow: scroll;
   }
 }
+
+.is-landing {
+  display: flex;
+  justify-content: space-between;
+  padding-top: .5rem;
+
+  @media screen and (max-width: $breakpoint-small - 1) {
+    flex-direction: column;
+  }
+}
diff --git a/templates/index.html b/templates/index.html
index 44e41f98..fb94a377 100644
--- a/templates/index.html
+++ b/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 p-section">
       <h2>MicroK8s and Kubernetes resources</h2>
     </div>
     <div class="col">
@@ -288,7 +288,7 @@ <h3 class="p-text--small-caps">Whitepaper</h3>
 <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 +303,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>
diff --git a/templates/partial/_get-started-linux.html b/templates/partial/_get-started-linux.html
index 93e37a58..13cb7c1c 100644
--- a/templates/partial/_get-started-linux.html
+++ b/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="">
   </div>
   <div class="col">
     <ol class="p-stepped-list--detailed">

From 9e7cf728a84f5809b87d3d5e3eb9924d9270d443 Mon Sep 17 00:00:00 2001
From: MariaPaula Trujillo <mtruj013@fiu.edu>
Date: Thu, 31 Aug 2023 17:57:38 +0200
Subject: [PATCH 2/3] Add missing alt text

---
 templates/partial/_get-started-linux.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/partial/_get-started-linux.html b/templates/partial/_get-started-linux.html
index 13cb7c1c..14db8dcd 100644
--- a/templates/partial/_get-started-linux.html
+++ b/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/6d9cf05a-Linux-var-width.svg" height="144" 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">

From e27f97923466f7eae555832c5dec8f77ca8c9e3e Mon Sep 17 00:00:00 2001
From: MariaPaula Trujillo <mtruj013@fiu.edu>
Date: Fri, 1 Sep 2023 14:29:55 +0200
Subject: [PATCH 3/3] Apply review suggestions

---
 static/sass/styles.scss | 14 +++++++++++---
 templates/index.html    |  9 +++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 323c4d78..941313ba 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -128,11 +128,19 @@
 }
 
 .is-landing {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   justify-content: space-between;
-  padding-top: .5rem;
+  padding-top: $spv--small;
 
   @media screen and (max-width: $breakpoint-small - 1) {
-    flex-direction: column;
+    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;
   }
 }
diff --git a/templates/index.html b/templates/index.html
index fb94a377..e75da34e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -235,7 +235,7 @@ <h2>Experience MicroK8s</h2>
 <section class="p-section">
   <div class="row--50-50">
     <hr class="p-rule">
-    <div class="col p-section">
+    <div class="col" id="resources-heading">
       <h2>MicroK8s and Kubernetes resources</h2>
     </div>
     <div class="col">
@@ -277,12 +277,17 @@ <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">