Merge pull request linode#49 from kwilkins/DLC-83-styling

DLC-83 Styling Updates

Author: Alban Bailly

themes/dlc/gulpfile.js

@@ -67,6 +67,7 @@ gulp.task('compile', () => {
       purgecss({
         content: [baseThemeHtml, html],
         whitelist: ['mobile-nav', 'active'],
+        whitelistPatterns: [/wl$/],
         extractors: [
           {
             extractor: TailwindExtractor,
@@ -87,6 +88,7 @@ gulp.task('size', () => {
       purgecss({
         content: [baseThemeHtml, html],
         whitelist: ['mobile-nav', 'active'],
+        whitelistPatterns: [/wl$/],
         extractors: [
           {
             extractor: TailwindExtractor,

themes/dlc/layouts/_default/guides.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <div class="mx-auto text-center max-w-lg my-8 pb-4">
-  <h2>API Guides</h2>
+  <h2 class="font-light text-d-dark-green">API Guides</h2>
 </div>
 
 <div class="max-w-xl mx-auto pb-4">
@@ -10,7 +10,7 @@ <h2>API Guides</h2>
       <article class="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 text-2xl"><a href="{{ .Params.external_url }}" class="text-black tile-link" target="_blank">{{ .Title | markdownify }}</a></h3>
+            <h3 class="mt-0 text-2xl font-normal"><a href="{{ .Params.external_url }}" class="text-black tile-link" target="_blank">{{ .Title | markdownify }}</a></h3>
             {{ partial "2_molecules/post-categories" . }}
           </header>
           <section>{{ .Content }}</section>
@@ -34,17 +34,17 @@ <h3 class="mt-0 text-2xl"><a href="{{ .Params.external_url }}" class="text-black
   <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
     <div class="p-8 h-full flex flex-col justify-center">
       <header>
-        <h2 class="mt-0">Want more help?</h2>
+        <h2 class="mt-0 font-light text-d-dark-green">Want more help?</h2>
       </header>
-      <p class="text-xl mt-2">Find answers, ask questions, and help others.</p>
+      <p class="text-xl mt-2 font-light">Find answers, ask questions, and help others.</p>
       <a href="https://linode.com/community/questions" target="_blank" class="btn mt-4">Join our Community</a>
     </div>
   </article>
 </div>
 
 <div class="my-8 -mx-4 pb-4">
   <div class="text-center my-4">{{ partial "0_svgs/divider.svg" }}</div>
-  <h2 class="text-center mx-auto">Get started in the Linode cloud today.</h2>
+  <h2 class="text-center mx-auto font-light text-d-dark-green">Get started in the Linode cloud today.</h2>
   <div class="flex justify-center">
     <a href="https://manager.linode.com/session/signup" target="_blank" class="btn mt-4 mr-2">Create an Account</a>
     <a href="https://www.linode.com/linodes" target="_blank" class="btn mt-4 ml-2">Learn More</a>

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

@@ -10,14 +10,13 @@ <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") . }}
       </div>
-      <button class="btn btn-small mt-4 mb-4" onclick="uncheckAll('createdFilters')">View All</button>
       <div id="languageFilters" class="flex flex-wrap md:block">
         <h4 class="uppercase mb-4 w-full">Language</h4>
         {{range ($.Site.GetPage "taxonomyTerm" "languages").Pages }}
           {{ partial "1_atoms/radio.html" (dict "ID" (lower (replace .Title "." "-")) "Name" "language" "Value" (print "." (lower (replace .Title "." "-"))) "Label" .Title) . }}
         {{end}}
       </div>
-      <button class="btn btn-small mt-4" onclick="uncheckAll('languageFilters')">View All</button>
+      <button class="text-d-turq underline mt-4" onclick="uncheckAll('languageFilters')">Reset Filters</button>
     </div>
   </div>
 

themes/dlc/layouts/index.html

@@ -1,82 +1,73 @@
 {{ define "main" }}
   <div class="row-full relative -mt-2 px-2">
     <section class="header max-w-3xl mx-auto px-4 md:px-8 py-12 relative z-10">
-      <h2>How easily can you create a Linode?</h2>
-      <div class="text-2xl my-3">Are two steps easy enough?</div>
+      <h2 class="text-center font-light text-d-dark-green">How easily can you create a Linode?</h2>
+      <div class="text-2xl my-3 text-center font-light">Are two steps easy enough?</div>
       {{ partial "2_molecules/code-box.html" }}
-      <div class="mt-6"><a href="https://www.linode.com/cli" target="_blank" class="btn mt-3">Get Started with the Linode CLI</a></div>
+      <div class="mt-6 text-center"><a href="https://www.linode.com/cli" target="_blank" class="btn mt-3">Get Started with the Linode CLI</a></div>
     </section>
-    <img src='{{ "img/grid.png" | relURL }}' class="home-lins absolute pin-t pin-r" />
   </div>
 
   <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 text-center"><a href="https://developers.linode.com/" class="text-black tile-link">API 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 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 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 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>
     </article>
   </div>
 
   <div class="mx-auto text-center max-w-lg my-8">
-    <h2>Events</h2>
-    <div class="text-2xl my-3">Catch us on the road at conferences, meetups, and job fairs.</div>
+    <h2 class="font-light text-d-dark-green">Events</h2>
+    <div class="text-2xl my-3 font-light">Catch us on the road at conferences, meetups, and job fairs.</div>
   </div>
-  <div class="flex flex-wrap my-8 -mx-4 pb-8 justify-center">
-    {{ range last 3 ((where .Pages "Section" "events").ByParam "start_date") }}
-    {{ $t := (time .Params.end_date) }}
-      {{ if  ge ($t.Unix) (now.Unix) }}
-        <article class="w-full md:w-1/3 px-4 mb-4 md:mb-8">
-          <div class="p-8 h-full bg-d-cell tile-border">
-            <header>
-              <h3 class="mt-0 mb-4"><a href="{{ .Params.event_url }}" class="text-black tile-link" target="_blank">{{ .Title | markdownify }}</a></h3>
-            </header>
-            <section>
-              <div><strong>{{ .Params.location }}</strong></div>
-              <div><strong>{{ dateFormat "Jan 2, 2006" .Params.start_date }}</strong></div>
-              <p>{{ .Content }}</p>
-            </section>
-            {{ if .Params.register_link }}
-              <footer>
-                <a href="{{ .Params.register_link }}" target ="_blank">Register Now</a>
-              </footer>
-            {{ end }}
-          </div>
-        </article>
-      {{ end }}
-    {{ end }}
-    <a class="btn block mx-auto" href="https://www.linode.com/events" target="_blank">View All Events</a>
+  <div class="my-8 -mx-4 pb-8">
+    <div class="flex flex-wrap items-center justify-center">
+        {{ range last 3 ((where .Pages "Section" "events").ByParam "start_date") }}
+        {{ $t := (time .Params.end_date) }}
+          {{ if  ge ($t.Unix) (now.Unix) }}
+            <article class="w-full md:w-1/3 px-4 mb-4 md:mb-8">
+              <div class="p-8 h-full bg-d-cell tile">
+                <header>
+                  <h3 class="mt-0 mb-4"><a href="{{ .Params.event_url }}" class="text-black tile-link" target="_blank">{{ .Title | markdownify }}</a></h3>
+                </header>
+                <section>
+                  <div><strong>{{ .Params.location }}</strong></div>
+                  <div><strong>{{ dateFormat "Jan 2, 2006" .Params.start_date }}</strong></div>
+                  <p>{{ .Content }}</p>
+                </section>
+              </div>
+            </article>
+          {{ end }}
+        {{ end }}
+    </div>
+      <a class="btn block mx-auto text-center" href="https://www.linode.com/events" target="_blank">View All Events</a>
   </div>
 
-  <div class="relative row-full pb-8">
+  <div class="relative row-full pb-8 home-cubes">
     <div class="mx-auto text-center max-w-lg my-8">
-      <h2>Careers at Linode</h2>
-      <div class="text-2xl mt-4">Help us create the platform of tomorrow.</div>
+      <h2 class="font-light text-d-dark-green">Careers at Linode</h2>
+      <div class="text-2xl mt-4 font-light">Help us create the platform of tomorrow.</div>
       <a class="btn block mx-auto mt-6" href="https://www.linode.com/careers" target="_blank">View Opportunities</a>
     </div>
-    <img src='{{ "img/triangles.png" | relURL }}' class="home-triangles absolute pin-b pin-l" />
   </div>
 
 {{ end }}

themes/dlc/layouts/partials/0_utilities/htmlHead.html

@@ -28,4 +28,4 @@
 
   <link rel="shortcut icon" href='{{ "/img/favicon.ico" | relURL }}' type="image/x-icon" />
 </head>
-<body>
+<body class="{{ .Title | urlize }}-wl">

themes/dlc/layouts/partials/2_molecules/changelogs.html

@@ -1,12 +1,12 @@
 <div class="flex flex-wrap mb-4 py-4">
   <div class="w-full md:w-1/4 py-2 md:p-6 md:text-right mt-1 flex items-center md:block">
-    <div class="timeago text-sm uppercase font-semibold mr-4 md:mr-0" datetime='{{ .Date.Format "2006-01-02T15:04:05-07:00" }}'>{{ .Date }}</div>
+    <div class="timeago mr-4 md:mr-0" datetime='{{ .Date.Format "2006-01-02T15:04:05-07:00" }}'>{{ .Date }}</div>
     {{ if .Params.version }}
     <div class="text-d-turq md:mt-4 leading-none">{{ .Params.version }}</div>
     {{ end }}
   </div>
   <div class="w-full md:w-3/4 py-2 md:p-6">
-    <h2 class="mt-0 text-xl">{{ .Title | markdownify }}</h2>
+    <h2 class="mt-0 text-2xl font-normal">{{ .Title | markdownify }}</h2>
     <div class="changelog-entry">{{ .Content | markdownify }}</div>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-<div class="code-box bg-d-beige rounded md:my-8">
+<div class="code-box bg-d-beige rounded md:my-8 mx-auto">
   <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/layouts/partials/3_organisms/banner.html

@@ -1,7 +1,7 @@
 <div class="bg-d-header-green">
-  <header class="header max-w-3xl mx-auto px-4 md:px-8 py-10 text-white">
+  <header class="header max-w-3xl mx-auto px-4 md:px-8 py-8 text-white">
     <div class="text-4xl">{{ .Title }}</div>
-    <div class="text-3xl">
+    <div class="text-3xl font-light">
       {{ .Subtitle }}
     </div>
   </header>

themes/dlc/srcCSS/components/1_atoms/button.css

@@ -1,5 +1,5 @@
 .btn {
-  @apply font-bold py-3 px-4 bg-d-turq text-white rounded;
+  @apply py-3 px-4 bg-d-turq text-white;
   width: fit-content;
   transition: background-color 225ms ease-in-out,
               color 225ms ease-in-out;

themes/dlc/srcCSS/components/1_atoms/tag.css

@@ -1,5 +1,5 @@
 .tag {
-  @apply font-bold px-2 bg-d-blue-light text-d-turq rounded text-xs uppercase;
+  @apply font-normal px-2 bg-l-nav-grey text-l-full-black text-xs uppercase;
   padding-top: 6px;
   padding-bottom: 5px;
   width: fit-content;

themes/dlc/srcCSS/components/2_molecules/tile.css

@@ -1,6 +1,7 @@
 .tile {
   position: relative;
-  border: 1px solid transparent;
+  outline: 2px solid white;
+  outline-offset: -10px;
   transition: border-color 225ms ease-in-out;
 }
 
@@ -17,21 +18,6 @@
   transition: color 225ms ease-in-out;
 }
 
-.tile:hover {
-  @apply border-d-turq-hov;
+.tile-link:hover {
+  @apply text-d-header-green;
 }
-
-.tile:hover .btn {
-  @apply bg-d-turq-hov;
-}
-
-.tile-border {
-  @apply border-t-5 border-solid border-d-turq;
-  transition: border-color 225ms ease-in-out;
-  position: relative;
-}
-
-.tile-border:hover {
-  @apply border-d-turq-hov;
-}
-

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

@@ -2,18 +2,17 @@
   max-width: 200px;
 }
 
-.home-triangles {
-  bottom: -.5rem;
-  max-width: 150px;
+.developer-tools-wl .content {
+  background-image: url('/img/cubes.png');
+  background-size: 594px;
+  background-repeat: no-repeat;
+  background-position: bottom left;
 }
 
 @screen md {
   .home-lins {
     max-width: 437px;
   }
-  .home-triangles {
-    max-width: 277px;
-  }
 }
 
 .code-box {

themes/dlc/static/img/cubes.png

@@ -46,14 +46,16 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
   // Linode Colors
   'l-green': '#1AB15C',
-  'l-nav-grey': '#a6a6a6',
+  'l-nav-grey': '#E1E8EC',
   'l-full-black': '#000',
-  'd-header-green': '#2F9072',
-  'd-turq': '#346C8A',
+  'd-header-green': '#3D9C46',
+  'd-turq': '#107C9E',
   'd-turq-hov': '#4B81D5',
-  'd-cell': '#EBEFF0',
+  'd-cell': '#f4f4f4',
   'd-blue-light': '#EDF7FE',
-  'd-beige': '#ECECEC',
+  'd-beige': '#f4f4f4',
+  'd-dark-green': '#4E674F',
+  'd-transparent-blue': 'rgba(220,231,232,0.7)',
 
   // Standard Colors
   'transparent': 'transparent',
@@ -208,7 +210,7 @@ module.exports = {
 
   fonts: {
     'sans': [
-      'Lato',
+      'Source Sans Pro',
       'sans-serif',
     ],
     'serif': [