Merge pull request linode#34 from abailly/DLC-64

DLC-64 Mobile styling adjustments

Author: Josh Sager

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

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <div class="my-4 md:my-12 max-w-3xl mx-auto">
-  <div class="flex flex-wrap -mx-4 items-center">
+  <div class="flex flex-wrap -mx-4 items-center flex-col-reverse md:flex-row">
     <div class="w-full md:w-1/2 px-4 flex md:justify-end">
       <div style="width: 300px;">
         {{ partial "2_molecules/code-box.html" }}
@@ -15,12 +15,12 @@ <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">
       <div id="createdFilters" class="flex flex-wrap md:block">
-        <div class="md:my-4">{{ partial "0_svgs/divider.svg" (dict "width" 170) }}</div>
+        <div class="md:my-4 mx-auto">{{ partial "0_svgs/divider.svg" (dict "width" 170) }}</div>
         <h4 class="uppercase mb-4 w-full">Created By</h4>
         {{ partial "1_atoms/radio.html" (dict "ID" "linode" "Name" "created" "Value" ".linode" "Label" "Linode") . }}
         {{ partial "1_atoms/radio.html" (dict "ID" "community" "Name" "created" "Value" ".community" "Label" "Community") . }}
@@ -38,7 +38,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/index.html

@@ -12,28 +12,28 @@ <h2>How easily can you create a Linode?</h2>
   <div class="flex flex-wrap my-8 -mx-4 pb-8">
     <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
       <div class="px-8 py-20 h-full bg-d-cell tile flex flex-col justify-center items-center">
-        <h2 class="mt-0 font-normal"><a href="https://developers.linode.com/" class="text-black tile-link">APIv4 Documentation</a></h3>
+        <h2 class="mt-0 font-normal text-center"><a href="https://developers.linode.com/" class="text-black tile-link">APIv4 Documentation</a></h3>
         <p class="text-xl mt-2 text-center">Reference Documentation for the linode API</p>
         <a href="https://developers.dev.linode.com/api/v4" target="_blank" class="btn mt-6">View API docs</a>
       </div>
     </article>
     <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
       <div class="p-8 py-20 h-full bg-d-cell tile flex flex-col justify-center items-center">
-        <h2 class="mt-0 font-normal"><a href="/guides/" class="text-black tile-link">Guides</a></h3>
+        <h2 class="mt-0 font-normal text-center"><a href="/guides/" class="text-black tile-link">Guides</a></h3>
         <p class="text-xl mt-2 text-center">How-to’s and examples using the Linode API</p>
         <a href="/guides/"  class="btn mt-6">View Guides</a>
       </div>
     </article>
     <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
       <div class="p-8 py-20 h-full bg-d-cell tile flex flex-col justify-center items-center">
-        <h2 class="mt-0 font-normal"><a href="/libraries-tools/" class="text-black tile-link">Libraries &amp; Tools</a></h3>
+        <h2 class="mt-0 font-normal text-center"><a href="/libraries-tools/" class="text-black tile-link">Libraries &amp; Tools</a></h3>
         <p class="text-xl mt-2 text-center">Jumpstart your API integration</p>
         <a href="/libraries-tools/" class="btn mt-6">View Libraries &amp; Tools</a>
       </div>
     </article>
     <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
       <div class="p-8 py-20 h-full bg-d-cell tile flex flex-col justify-center items-center">
-        <h2 class="mt-0 font-normal"><a href="https://www.linode.com/community/" target="_blank" class="text-black tile-link">Community Questions</a></h3>
+        <h2 class="mt-0 font-normal text-center"><a href="https://www.linode.com/community/" target="_blank" class="text-black tile-link">Community Questions</a></h3>
         <p class="text-xl mt-2 text-center">Questions and answers from the Linode community</p>
         <a href="https://linode.com/community/questions" target="_blank" class="btn mt-6">View Q&amp;A</a>
       </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
+  }
+}