Merge pull request linode#35 from abailly/DLC-69

DLC-69 add tool section to tool and lib page

Author: Josh Sager

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

@@ -1,26 +1,11 @@
 {{ define "main" }}
 
-<div class="my-4 md:my-12 max-w-3xl mx-auto">
-  <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" }}
-      </div>
-    </div>
-    <div class="w-full md:w-1/2 px-4">
-      <h2>Linode CLI</h2>
-      <div class="text-2xl my-3">An easy way to get up and running with the Linode API</div>
-      <p><a href="https://www.linode.com/cli" target="_blank" class="btn mt-3">Linode CLI on GitHub</a></p>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap md:mb-8 -mx-4">
+<div class="flex flex-wrap 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 class="button-group filters-group sm:py-4 sm:mt-4">
       <div id="createdFilters" class="flex flex-wrap md:block">
-        <div class="md:my-4 mx-auto">{{ partial "0_svgs/divider.svg" (dict "width" 170) }}</div>
+        <div class="md:my-4 invisible sm:visible">{{ 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") . }}
@@ -37,10 +22,49 @@ <h4 class="uppercase mb-4 w-full">Language</h4>
   </div>
 
   <div class="w-full sm:w-3/4 md:w-4/5 px-4">
+    <div class="my-4 md:mt-12 md:mt-8 max-w-3xl">
+      <div class="mb-4 mt-8 sm:hidden text-center">{{ partial "0_svgs/divider.svg" (dict "width" 170) }}</div>
+      <h2>Tools</h2>
+      <div class="flex -mx-4 md:items-center flex-col-reverse md:flex-row mb-2">
+        <div class="px-4 flex flex-wrap">
+          <div style="width: 300px;">
+            {{ partial "2_molecules/code-box.html" }}
+          </div>
+          <div class="mt-4 md:hidden flex w-full"><a href="https://www.linode.com/cli" target="_blank" class="btn btn-small">Linode CLI on GitHub</a></div>
+        </div>
+        <div class="px-4">
+          <h3 class="md:text-2xl mt-0">Linode CLI</h3>
+          <div class="md:text-lg my-3">An easy way to get up and running with the  Linode API</div>
+          <div class="pt-3 hidden hidden md:block"><a href="https://www.linode.com/cli" target="_blank" class="btn btn-small">Linode CLI on GitHub</a></div>
+        </div>
+      </div>
+      <div class="flex flex-wrap mt-8 md:mb-4 -mx-4">
+        <article class="item lib-item w-full md:w-1/2 px-4 mb-4 md:mb-8">
+          <div class="p-8 h-full bg-d-cell tile">
+            <header>
+              <h3 class="mt-0"><a class="text-black tile-link" href="https://github.com/pharmer/pharmer" target="_blank">Pharmer</a></h3>
+            </header>
+            <section class="mt-2">
+              Kubernetes Cluster Manager for Kubeadm (Technical Preview)
+            </section>
+          </div>
+        </article>
+        <article class="item lib-item w-full md:w-1/2 px-4 mb-4 md:mb-8">
+          <div class="p-8 h-full bg-d-cell tile">
+            <header>
+              <h3 class="mt-0"><a class="text-black tile-link" href="https://github.com/displague/vagrant-linode" target="_blank">vagrant-linode</a></h3>
+            </header>
+            <section class="mt-2">
+              vagrant-linode is a provider plugin for Vagrant that supports the management of Linodes (instances).
+            </section>
+          </div>
+        </article>
+      </div>
+    </div>
     <h2>Libraries</h2>
-    <div class="flex flex-wrap my-4 md:my-8 -mx-4 grid">
+    <div class="flex flex-wrap md:mt-8 md:mb-4 -mx-4 grid">
       <div id="noResultsContainer" class="visually-hidden">
-        <div>No results</div>
+        <div class="px-4">No results</div>
       </div>
       {{ range .Paginator.Pages  }}
         <article class="item lib-item w-full md:w-1/2 px-4 mb-4 md:mb-8 {{ range .Params.languages }}{{ lower (replace . "." "-") }} {{ end }}{{ .Params.origin }}">
@@ -59,5 +83,4 @@ <h3 class="mt-0"><a class="text-black tile-link" href="{{ .Params.external_url }
 
 <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
 <script src={{ "/assets/js/tools.js" | relURL }} type="text/javascript"></script>
-{{ end }}
-
+{{ end }}

themes/dlc/layouts/index.html

@@ -4,7 +4,7 @@
       <h2>How easily can you create a Linode?</h2>
       <div class="text-2xl my-3">Are two steps easy enough?</div>
       {{ partial "2_molecules/code-box.html" }}
-      <a href="https://www.linode.com/cli" target="_blank" class="btn mt-3">Get started with our Linode CLI</a>
+      <div class="mt-6"><a href="https://www.linode.com/cli" target="_blank" class="btn mt-3">Get started with our Linode CLI</a></div>
     </section>
     <img src='{{ "img/grid.png" | relURL }}' class="home-lins absolute pin-t pin-r" />
   </div>

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

@@ -9,6 +9,6 @@
 
 @screen md {
   .cloud {
-    height: 300px
+    height: 250px
   }
 }