Black Lives Matter announcement (#202)

* Add a 'Black lives matter' banner. * Simplify things. * Add trailing whitespace Co-authored-by: Markus Thömmes <[email protected]>
knative · Aug 19, 2020 · ff1c4dc · ff1c4dc
1 parent 1f11971
commit ff1c4dc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
@@ -26,9 +26,16 @@
     opacity: inherit;
 }
 
-.td-navbar {
+.flip-nav .td-navbar {
     background: $white;
     border-bottom: 1px solid $knative-lighter;
+}
+
+.td-navbar {
+    background: $black;
+    border-bottom: 1px solid $black;
+
+    transition: .3s;
 
     min-height: 4rem;
     margin: 0;
@@ -124,4 +131,11 @@
     border: 1px solid lightgray;
     border-top-style: hidden;
     padding: 10px;
+}
+
+#announcement {
+    padding: 100px 25px 25px 25px;
+    color: $white;
+    background: $black;
+    text-align: center;
 }
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
@@ -2,3 +2,5 @@
 <!-- Webmaster Central ownership verification using "HTML tag" method -->
 <!-- https://www.google.com/webmasters/verification/details?hl=en&siteUrl=http://knative.dev/ -->
 <script src="/js/cookie-consent.js"></script>
+<script src="/js/script.js"></script>
+
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -41,3 +41,11 @@
   </div>
   <div class="navbar-nav d-none d-xl-block">{{ partial "search-input.html" . }}</div>
 </nav>
+
+<section lang="en" id="announcement">
+  <h4>Black lives matter.</h4>
+  <p>We stand in solidarity with the Black community.<br>
+    <strong>Racism is unacceptable.</strong><br>
+    It conflicts with the <a href=https://github.com/knative/community/blob/master/VALUES.md>core values of the Knative project</a> and our community does not tolerate it.</p>
+</section>
+
diff --git a/static/js/script.js b/static/js/script.js
@@ -0,0 +1,15 @@
+$(document).ready(function () {
+    html = $('html');
+
+    function flipNav() {
+        if (window.pageYOffset > 50) {
+            html.addClass("flip-nav");
+        } else {
+            html.removeClass("flip-nav");
+        }
+    }
+
+    window.addEventListener('resize', flipNav);
+    window.addEventListener('scroll', flipNav);
+});
+