mobile adjustments

Author: Alban Bailly

themes/dlc/layouts/_default/guides.html

@@ -18,14 +18,14 @@ <h3 class="mt-0 text-2xl"><a href="{{ .Params.external_url }}" class="text-black
       </article>
     {{ end }}
   </div>
-  <div class="text-center mb-12">
+  <div class="text-center mt-4 md:mt-0 md:mb-12">
     <a href="https://linode.com/docs/platform" target="_blank" class="btn mx-auto">View All Platform Guides</a>
   </div>
 </div>
 
 <div class="flex flex-wrap my-8 -mx-4">
-  <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8" style="height: 300px">
-    <div class="p-8 h-full">
+  <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
+    <div class="md:p-8 h-full">
       <div class="cloud flex justify-center md:justify-end items-center">
         {{ partial "0_svgs/cloud.svg" }}
       </div>

themes/dlc/layouts/_default/libraries-tools.html

@@ -14,7 +14,7 @@ <h2>Linode CLI</h2>
   </div>
 </div>
 
-<div class="flex flex-wrap mb-8 -mx-4">
+<div class="flex flex-wrap md:mb-8 -mx-4">
 
   <div class="w-full sm:w-1/4 md:w-1/5 px-4">
     <div class="button-group filters-group py-2 md:py-6 md:mt-12">
@@ -37,7 +37,7 @@ <h4 class="uppercase mb-4 w-full">Language</h4>
 
   <div class="w-full sm:w-3/4 md:w-4/5 px-4">
     <h2>Libraries</h2>
-    <div class="flex flex-wrap my-8 -mx-4 grid">
+    <div class="flex flex-wrap my-4 md:my-8 -mx-4 grid">
       <div id="noResultsContainer" class="visually-hidden">
         <div>No results</div>
       </div>

themes/dlc/layouts/partials/2_molecules/code-box.html

@@ -1,4 +1,4 @@
-<div class="code-box bg-d-beige rounded my-8">
+<div class="code-box bg-d-beige rounded md:my-8">
   <div class="code-box-header border-white flex justify-start py-4 px-6">
     <span class="code-box-circle circle-red"></span>
     <span class="code-box-circle circle-yellow"></span>

themes/dlc/srcCSS/components/4_pages/guides.css

@@ -0,0 +1,14 @@
+.cloud {
+  height: 150px
+}
+
+.cloud svg {
+    height: 100%;
+    width: 100%;
+  }
+
+@screen md {
+  .cloud {
+    height: 300px
+  }
+}