Fixed mobile layout for companies and features (linkerd#1684)

Signed-off-by: Travis Beckham <[email protected]> Signed-off-by: Yohan Belval <[email protected]>
yohanb · Sep 21, 2023 · 0888587 · 0888587
1 parent a8d95d3
commit 0888587
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 30 deletions.
diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss
@@ -158,10 +158,25 @@
 .companies {
   background-image: linear-gradient(white, $aqua-green, $aqua-green, white);
   .created-by {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 32px;
+    text-align: center;
     img {
+      display: block;
+      margin: 0 auto;
       width: 160px;
       height: auto;
     }
+    @media screen and (min-width: 768px) {
+      justify-content: flex-start;
+      text-align: left;
+      margin-bottom: 0;
+      padding-right: 8px;
+      img {
+        margin: 0;
+      }
+    }
   }
 }
 @keyframes logos-1-keyframes {
@@ -187,6 +202,7 @@
   .adopters {
     position: relative;
     z-index: 2;
+    text-align: center;
   }
   .logos {
     width: 3600px;
@@ -214,29 +230,28 @@
     height: auto;
     margin-left: 50px;
   }
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 35px;
-    width: 50px;
-    height: 75px;
-    z-index: 1;
-  }
-  &::before {
-    background-image: linear-gradient(90deg, $aqua-green, rgba($aqua-green, 0));
-    left: 0;
-    z-index: 1;
-  }
-  &::after {
-    content: "";
-    background-image: linear-gradient(-90deg, $aqua-green, rgba($aqua-green, 0));
-    right: 0;
-  }
   @include from($tablet) {
+    .adopters {
+      text-align: left;
+    }
     &::before,
     &::after {
+      content: "";
+      position: absolute;
+      top: 35px;
       width: 100px;
+      height: 75px;
+      z-index: 1;
+    }
+    &::before {
+      background-image: linear-gradient(90deg, $aqua-green, rgba($aqua-green, 0));
+      left: 0;
+      z-index: 1;
+    }
+    &::after {
+      content: "";
+      background-image: linear-gradient(-90deg, $aqua-green, rgba($aqua-green, 0));
+      right: 0;
     }
   }
   @include from($desktop) {

diff --git a/linkerd.io/layouts/partials/homepage/companies.html b/linkerd.io/layouts/partials/homepage/companies.html
@@ -1,12 +1,14 @@
 <div class="wrapper has-background-white companies">
-  <div class="container columns is-mobile">
-    <div class="column is-narrow created-by mr-4">
-      <a href="https://buoyant.io/" target="_blank">
-        <p class="is-size-6 mb-4 has-text-navy-black">Linkerd was created by</p>
-        <figure class="image">
-          <img src="/uploads/buoyant-logo-blue.png" alt="Buoyant" />
-        </figure>
-      </a>
+  <div class="container columns">
+    <div class="column is-narrow">
+      <div class="created-by">
+        <a href="https://buoyant.io/" target="_blank">
+          <p class="is-size-6 mb-4 has-text-navy-black">Linkerd was created by</p>
+          <figure class="image">
+            <img src="/uploads/buoyant-logo-blue.png" alt="Buoyant" />
+          </figure>
+        </a>
+      </div>
     </div>
     <div class="column logos-mask">
       <p class="is-size-6 adopters">Adopters</p>

diff --git a/linkerd.io/layouts/partials/homepage/features-list.html b/linkerd.io/layouts/partials/homepage/features-list.html
@@ -12,13 +12,13 @@
                 </p>
               </header>
               <div class="card-content">
-                <div class="media">
-                  <div class="media-left pr-1">
+                <div class="columns">
+                  <div class="column is-narrow is-flex-mobile is-justify-content-center">
                     <figure class="image is-64x64">
                       <img {{ partial "src.html" (dict "img" .image) | safeHTMLAttr }} alt="{{ .title | safeHTMLAttr }}" />
                     </figure>
                   </div>
-                  <div class="media-content">
+                  <div class="column">
                     {{.description | markdownify}}
                   </div>
                 </div>