content: add banner in support of our black community
Change-Id: I2bd5c3632a1fdbf0779e8181417950c7f9408146
Reviewed-on: https://team-review.git.corp.google.com/c/golang/discovery/+/767238
Reviewed-by: Russ Cox <rsc@google.com>
Reviewed-by: Andrew Bonventre <andybons@google.com>
diff --git a/content/static/css/sidenav.css b/content/static/css/sidenav.css
index acdc96c..cda0b07 100644
--- a/content/static/css/sidenav.css
+++ b/content/static/css/sidenav.css
@@ -14,13 +14,13 @@
grid-template-columns: 1fr minmax(0, 3fr);
}
.Documentation-nav {
- max-height: calc(100vh - 4.0625rem); /* 4.0625rem is the site header height */
+ max-height: calc(100vh - 6.511rem); /* 6.511rem is the site header height */
overflow-x: hidden;
overflow-y: scroll;
padding-top: 1rem;
padding-left: 1.75rem;
position: sticky;
- top: 4.0625rem;
+ top: 6.511rem;
}
.Documentation-toc {
margin-top: 0;
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 32d161c..eeec137 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -121,6 +121,40 @@
.AutoComplete-list li[aria-selected='true'] {
background-color: var(--gray-9);
}
+
+.Banner {
+ /**
+ * Only show on wide viewports so the
+ * text never wraps or gets cut off.
+ */
+ display: none;
+ background-color: #000;
+}
+.Banner-inner {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ margin: 0 auto;
+ max-width: 75.75rem;
+ min-height: 2.5rem;
+ padding: 0.5rem 1.5rem;
+}
+.Banner-message {
+ color: #fff;
+ margin-right: 1.25rem;
+}
+.Banner-action:link,
+.Banner-action:visited {
+ color: #fff;
+ text-decoration: underline;
+ white-space: nowrap;
+}
+@media only screen and (min-width: 52rem) {
+ .Banner {
+ display: block;
+ }
+}
+
.SearchForm[aria-expanded='false'] .AutoComplete-list,
.Header-searchForm[aria-expanded='false'] .AutoComplete-list {
display: none;
@@ -222,6 +256,12 @@
pointer-events: none;
visibility: hidden;
}
+@media only screen and (min-width: 52rem) {
+ :target::before {
+ height: calc(5.125rem + 2.5rem);
+ margin-top: calc(-5.125rem - 2.5rem); /* Account for added height of banner. */
+ }
+}
.Header-logoLink {
margin-right: auto;
}
diff --git a/content/static/html/base.tmpl b/content/static/html/base.tmpl
index 72a5da0..92195d7 100644
--- a/content/static/html/base.tmpl
+++ b/content/static/html/base.tmpl
@@ -19,6 +19,15 @@
<title>{{if .HTMLTitle}}{{.HTMLTitle}} · {{end}}pkg.go.dev</title>
<body class="Site{{if (.Experiments.IsActive "sidenav")}} is-withSideNav{{end}}">
<header class="Site-header Site-header--dark">
+ <div class="Banner">
+ <div class="Banner-inner">
+ <div class="Banner-message">Black Lives Matter</div>
+ <a class="Banner-action"
+ href="https://support.eji.org/give/153413/#!/donation/checkout"
+ target="_blank"
+ rel="noopener">Support the Equal Justice Initiative</a>
+ </div>
+ </div>
<div class="Header">
<nav class="Header-nav">
<a href="https://go.dev/" class="Header-logoLink">
