feature: Add black bg to mobile BLM + lighter menu for a11y (#2618)

tessaSAC · web-flow · commit 3926816ebcee · 2020-06-07T16:41:01.000-04:00
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -91,7 +91,7 @@
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
-      <a class="menu-button"></a>
+      <a class="menu-button blm"></a>
       <a class="logo" href="/"></a>
       <a class="blm-mobile" href="/#">#BlackLivesMatter</a>
     </div>
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
@@ -18,12 +18,13 @@ red-dot-before(leftPos = -8px)
   z-index: $z-header
 
 #blm
-  background-color: #fff
-  height: $blm-height
+  background-color: #000
+  min-height: $blm-height
   padding: $heading-padding-vertical 60px
   z-index: $z-header - 1
   box-sizing: border-box
   text-align: center
+  color: #fff
 
 #blm-hashtag
   font-weight: bold
@@ -40,12 +41,6 @@ red-dot-before(leftPos = -8px)
   color: $green
   white-space: nowrap
 
-@media screen and (min-width: 901px)
-  #blm
-    background-color: #000
-  #blm-hashtag
-    color: #fff
-
 body.docs
   #blm
     position: fixed
@@ -176,6 +171,9 @@ body.docs
     left: 12px
     background: url(../images/menu.png) center center no-repeat
     background-size: 24px
+    &.blm
+      background: url(../images/menu-blm.png) center center no-repeat
+      background-size: 24px
   .logo
     position: absolute
     width: 30px
diff --git a/themes/vue/source/images/menu-blm.png b/themes/vue/source/images/menu-blm.png
