Port banner and grayscale filter from reactjs.org (#1115)

dustinsoftware · web-flow · commit febf1a408606 · 2020-06-04T22:27:46.000-07:00
diff --git a/site/jekyll/_assets/stylesheets/react.scss b/site/jekyll/_assets/stylesheets/react.scss
@@ -52,6 +52,17 @@ html {
   background: $pageBg;
 }
 
+.grayscale {
+  filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+}
+
+.top-banner {
+  font-size: 20px;
+  height: 60px;
+  text-align: center;
+  padding: 20px;
+}
 
 
 .left {
@@ -64,7 +75,7 @@ html {
 
 
 .container {
-  padding-top: $navHeight;
+  padding-top: 110px;
   min-width: $contentWidth + (2 * $contentPadding);
 }
 
@@ -120,7 +131,7 @@ h1, h2, h3, h4, h5, h6 {
   color: $lightTextColor;
   position: fixed;
   top: 0;
-  height: $navHeight;
+  height: 110px;
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
   width: 100%;
   z-index: 100;
diff --git a/site/jekyll/_layouts/default.html b/site/jekyll/_layouts/default.html
@@ -37,7 +37,8 @@
 <body>
   <div class="container">
     <div class="nav-main">
-      <div class="wrap">
+      <div class="top-banner">Black Lives Matter. <a style="color:#61dafb" target="_blank" rel="noreferrer" href="https://support.eji.org/give/153413/#!/donation/checkout">Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.</a></div>
+      <div class="wrap grayscale">
         <a class="nav-home" href="/">
           <img class="nav-logo" src="/img/logo.svg" width="48" height="36">
           {{ site.name }}
@@ -53,7 +54,9 @@
       </div>
     </div>
 
+    <div class="grayscale">
     {{ content }}
+    </div>
 
     <footer class="wrap">
       <div class="right">
