initial header work on updated design

Author: jwcooper

_includes/header.html

@@ -18,22 +18,22 @@
   <div class="wrapper">
     <div class="content">
       <nav class="site-brand">
-        <div class="site-logo">
-          <a href="{{ "/" | relative_url  }}">
-            <img src="{{ "/assets/images/logo.png" | relative_url }}"
-                 srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
-                         {{ "/assets/images/logo@2x.png" | relative_url }} 2x,
-                         {{ "/assets/images/logo@3x.png" | relative_url }} 3x"
-                                         alt="CircuitPython Logo"
-                                         height="60" width="136">
-          </a>
-        </div>
         <div class="site-navigation">
           <a {% if current[1] == 'downloads' %}class="active" aria-current="page"{% endif %} href="{{ "/downloads" | relative_url  }}">Downloads</a>
           <a {% if current[1] == 'libraries' %}class="active" aria-current="page"{% endif %} href="{{ "/libraries" | relative_url  }}">Libraries</a>
           <a {% if current[1] == 'blinka' %}class="active" aria-current="page"{% endif %} href="{{ "/blinka" | relative_url  }}">Blinka</a>
           <a href="https://code.circuitpython.org">Code Editor</a>
         </div>
+        <div class="site-logo">
+          <a href="{{ "/" | relative_url  }}">
+            <img src="{{ "/assets/images/logo-dark.png" | relative_url }}"
+                 srcset="{{ "/assets/images/logo-dark.png" | relative_url }} 1x,
+                         {{ "/assets/images/logo-dark@2x.png" | relative_url }} 2x,
+                         {{ "/assets/images/logo-dark3x.png" | relative_url }} 3x"
+                                         alt="CircuitPython Logo"
+                                         height="60" width="136">
+          </a>
+        </div>
         <div class="get-started">
           <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
         </div>

adabot

@@ -1,6 +1,7 @@
-body  {
-  font-family: "Proxima Nova","Montserrat","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
-    background-color: #ebebeb;
+body {
+  font-family: "Proxima Nova", "Montserrat", "Lucida Grande",
+    "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  background-color: #f0f0f0;
 }
 
 a {
@@ -11,7 +12,11 @@ a {
   clear: both;
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   font-weight: 500;
 }
 
@@ -35,14 +40,15 @@ a.purple-button-link {
 }
 
 fieldset {
-    border: 0;
+  border: 0;
 
-    legend {
-      font-size: 1.5em;
-      font-weight: 500;
-    }
+  legend {
+    font-size: 1.5em;
+    font-weight: 500;
+  }
 }
 
-input.filter-checkbox, label {
-    cursor: pointer;
+input.filter-checkbox,
+label {
+  cursor: pointer;
 }

assets/images/logo-dark.png

@@ -3,27 +3,17 @@
   grid-template-rows: 40px 1fr 3px;
   grid-column: full;
 
-  &> * {
-    display: grid;
-
-    grid-template-columns:
-      [full-start] minmax(1em, 1fr)
-      [main-start] minmax(0, 80em) [main-end]
-      minmax(1em, 1fr) [full-end];
-
-    &> * {
-      grid-column: main;
-    }
-  }
-
   .wrapper {
-    background-color: #333333;
-    height: 100px;
+    @include readable-content;
   }
 
   .content {
     display: grid;
-    padding-bottom: 20px;
+    background-color: #fff;
+    height: 100px;
+    border-radius: 25px;
+    padding: 0 25px;
+    margin: 20px;
   }
 
   a.active {
@@ -32,13 +22,14 @@
 }
 
 .top-navigation {
-  background-color: #151515;
+  @include readable-content;
+  background-color: #333;
   padding-top: 10px;
-  
+
   .navigation {
     display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
+    align-items: flex-start;
+    justify-content: flex-start;
 
     a {
       font-size: 16px;
@@ -61,13 +52,13 @@
       }
     }
 
-    &> a {
+    & > a {
       margin-left: 40px;
     }
-    &> span {
+    & > span {
       margin-left: 35px;
       a {
-          margin-left: 5px;
+        margin-left: 5px;
       }
     }
   }
@@ -77,7 +68,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .site-logo {
@@ -106,8 +97,8 @@
   font-size: 18px;
 
   a {
-    margin-left: 40px;
-    color: #aaa;
+    margin-right: 30px;
+    color: #63338f;
 
     &:hover {
       color: #fff;