more work with two columns and header

Author: jwcooper

_config.yml

@@ -3,10 +3,9 @@ email: justin@adafruit.com
 description: >-
   The easiest way to program microcontrollers
 site_image: "https://circuitpython.org/assets/images/CircuitPythonLogo_Black.png"
-hero_image: CircuitPython_Hero.jpg
 timezone: America/New_York
 twitter_username: circuitpython
-github_username:  adafruit
+github_username: adafruit
 baseurl: ""
 url: "https://circuitpython.org"
 paginate: 5
@@ -39,7 +38,7 @@ collections:
 
 jekyll_get_json:
   - data: libraries
-    json: 'https://adafruit-circuit-python.s3.amazonaws.com/adabot/web/libraries.v2.json'
+    json: "https://adafruit-circuit-python.s3.amazonaws.com/adabot/web/libraries.v2.json"
 
 ### Exclude from processing.
 exclude:

_includes/header.html

@@ -40,5 +40,4 @@
       </nav>
     </div>
   </div>
-  <div class="bottom-bar"></div>
 </header>

_includes/header_mobile.html

@@ -40,5 +40,4 @@
       </ul>
     </nav>
   </div>
-  <div class="bottom-bar"></div>
 </header>

assets/images/learn/sketch_drawing_toy.jpg

@@ -1,6 +1,6 @@
 #site-header {
   display: grid;
-  grid-template-rows: 40px 1fr 3px;
+  grid-template-rows: 40px 1fr;
   grid-column: full;
 
   .wrapper {
@@ -13,7 +13,7 @@
     height: 100px;
     border-radius: 25px;
     padding: 0 25px;
-    margin: 20px;
+    margin: 20px 0;
   }
 
   a.active {
@@ -24,16 +24,14 @@
 .top-navigation {
   @include readable-content;
   background-color: #333;
-  padding-top: 10px;
 
   .navigation {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-
+    margin-left: 15px;
+    padding: 10px;
     a {
       font-size: 16px;
       color: #aaa;
+      margin-right: 40px;
 
       &:hover {
         color: #fff;
@@ -51,16 +49,6 @@
         transform: translateY(0%);
       }
     }
-
-    & > a {
-      margin-left: 40px;
-    }
-    & > span {
-      margin-left: 35px;
-      a {
-        margin-left: 5px;
-      }
-    }
   }
 }
 
@@ -69,6 +57,16 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  .get-started {
+    display: flex;
+    flex: 2 1 0;
+    justify-content: end;
+
+    a {
+      @include rounded-button;
+    }
+  }
 }
 
 .site-logo {
@@ -84,16 +82,6 @@
   }
 }
 
-.get-started {
-  display: flex;
-  flex: 2 1 0;
-  justify-content: end;
-
-  a {
-    @include rounded-button;
-  }
-}
-
 .site-navigation {
   flex: 2 1 0;
   padding: 0 0 10px 0;
@@ -109,10 +97,6 @@
   }
 }
 
-.bottom-bar {
-  background-color: #e71c8c;
-}
-
 @media (max-width: $screen-xs-max) {
   #site-header {
     display: none !important;

assets/sass/layout/_header.scss

@@ -1,21 +1,20 @@
 #downloads-page {
   padding: 50px 0 200px 0;
   display: grid;
-    grid-template-columns:
-      [full-start] minmax(1em, 1fr)
-      [main-start] minmax(0, 80em) [main-end]
-      minmax(1em, 1fr) [full-end];
-    grid-row-gap: 1em;
+  grid-template-columns:
+    [full-start] minmax(1em, 1fr)
+    [main-start] minmax(0, 80em) [main-end]
+    minmax(1em, 1fr) [full-end];
+  grid-row-gap: 1em;
 
-  &> * {
+  & > * {
     grid-column: main;
   }
 
   h1 {
-
   }
 
-  &> p {
+  & > p {
     font-size: 1.2em;
     margin-top: 0;
   }
@@ -33,7 +32,7 @@
         position: relative;
 
         &:before {
-          font-family: 'Font Awesome\ 5 Free';
+          font-family: "Font Awesome\ 5 Free";
           font-size: 24px;
           font-weight: 900;
           color: #652f8f;
@@ -112,7 +111,7 @@
     border-bottom: 1px solid $gray-border;
     padding: 20px;
 
-    &> div {
+    & > div {
       grid-column: main;
       display: grid;
       grid-template-columns: repeat(3, minmax(200px, 1fr));
@@ -176,15 +175,15 @@
         padding-top: 75%;
         position: relative;
         width: 100%;
-      }
 
-      img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        max-width: 100%;
-        max-height: 100%;
-        transform: translate(-50%, -50%);
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          max-width: 100%;
+          max-height: 100%;
+          transform: translate(-50%, -50%);
+        }
       }
 
       a {
@@ -222,7 +221,6 @@
             text-transform: capitalize;
           }
         }
-
       }
 
       h3 {