From 79f6422696057d91d9655e5738d5b75607fb117d Mon Sep 17 00:00:00 2001
From: Justin Cooper <jwcooper@gmail.com>
Date: Tue, 14 Jan 2020 11:26:43 -0600
Subject: [PATCH] update mobile header and first headline based on redlines for
 new design

---
 _includes/header_mobile.html           | 74 +++++++++++++-------------
 assets/sass/layout/_header_mobile.scss |  9 +++-
 assets/sass/pages/_home.scss           |  9 ++++
 index.html                             |  9 ++--
 4 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/_includes/header_mobile.html b/_includes/header_mobile.html
index 3599df37..979a8b83 100644
--- a/_includes/header_mobile.html
+++ b/_includes/header_mobile.html
@@ -1,42 +1,44 @@
 <header id="mobile-header">
-  <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 id="mobile-menu">
-    <div class="menu-toggle">
-      <a href="#" id="mobile-menu-button">
-        <span class="sr-only">Open Mobile Menu</span>
-        <i class="fa fa-bars" aria-hidden='true'></i>
+  <div class="header-contents">
+    <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 id="mobile-menu">
+      <div class="menu-toggle">
+        <a href="#" id="mobile-menu-button">
+          <span class="sr-only">Open Mobile Menu</span>
+          <i class="fa fa-bars" aria-hidden='true'></i>
+        </a>
+      </div>
+    </div>
+    <div class="clear"></div>
+    <nav id="mobile-menu-contents" role="navigation" class="hidden"
+      aria-expanded='false' aria-label='Mobile Menu'>
+      <ul>
+        <li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
+                                  href="{{ "/downloads" | relative_url  }}">Downloads</a></li>
+        <li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
+                                  href="{{ "/libraries" | relative_url  }}">Libraries</a></li>
+        <li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
+                                  href="{{ "/blinka" | relative_url  }}">Blinka</a></li>
+        <li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
+                                  href="{{ "/contributing" | relative_url  }}">Contributing</a></li>
+        <li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
+        <li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
+                                  href="{{ "/awesome" | relative_url  }}">Awesome</a></li>
+        <li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
+        <li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
+        <li><a href="https://adafru.it/discord">Discord</a></li>
+      </ul>
+    </nav>
   </div>
-  <div class="clear"></div>
-  <nav id="mobile-menu-contents" role="navigation" class="hidden"
-    aria-expanded='false' aria-label='Mobile Menu'>
-    <ul>
-      <li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
-                                 href="{{ "/downloads" | relative_url  }}">Downloads</a></li>
-      <li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
-                                 href="{{ "/libraries" | relative_url  }}">Libraries</a></li>
-      <li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
-                                 href="{{ "/blinka" | relative_url  }}">Blinka</a></li>
-      <li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
-                                 href="{{ "/contributing" | relative_url  }}">Contributing</a></li>
-      <li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
-      <li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
-                                 href="{{ "/awesome" | relative_url  }}">Awesome</a></li>
-      <li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
-      <li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
-      <li><a href="https://adafru.it/discord">Discord</a></li>
-    </ul>
-  </nav>
+  <div class="bottom-bar"></div>
 </header>
 
-
diff --git a/assets/sass/layout/_header_mobile.scss b/assets/sass/layout/_header_mobile.scss
index f37e044e..4ee465c7 100644
--- a/assets/sass/layout/_header_mobile.scss
+++ b/assets/sass/layout/_header_mobile.scss
@@ -1,6 +1,9 @@
 #mobile-header {
   background-color: #333;
-  padding: 5px;
+
+  .header-contents {
+    padding: 5px;
+  }
 
   /* screen reader only */
   .sr-only {
@@ -51,6 +54,10 @@
       }
     }
   }
+
+  .bottom-bar {
+    height: 3px;
+  }
 }
 
 @media (min-width: $screen-xs-max) {
diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss
index f4e1f740..cad38192 100644
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@@ -178,6 +178,15 @@
 
       }
 
+      .img-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+      }
+
       img.pinball {
         object-fit: fill;
       }
diff --git a/index.html b/index.html
index 87222128..695bc326 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,11 @@ layout: home
 
 <div id="home-page">
   <div class="headline-banner">
-    <img class="image-headline" alt="hero image"
-                                src="{{ "assets/images/CircuitPython_Hero.jpg" |
-                                relative_url }}"
-         />
+    <div class="img-overlay"></div>
+      <img class="image-headline" alt="hero image"
+                                  src="{{ "assets/images/CircuitPython_Hero.jpg" |
+                                  relative_url }}"
+          />
     <div class="text">
       <div class="title"><span>The easiest way to program microcontrollers</span></div>
       <div class="tagline">