Add banner

Author: wooorm

docs/_asset/index.css

@@ -101,7 +101,7 @@ sup {
 }
 
 main {
-  margin-block-start: calc(4 * (1em + 1ex));
+  margin-block-start: calc(5.5 * (1em + 1ex));
 }
 
 dd,
@@ -524,6 +524,7 @@ button.success {
   inset-block-start: 0;
   display: flex;
   padding: calc(0.5 * (1em + 1ex));
+  padding-top: calc(2 * (1em + 1ex));
 }
 
 .navigation::before {
@@ -538,6 +539,20 @@ button.success {
   );
 }
 
+#banner {
+  padding: calc(0.25 * (1em + 1ex));
+  background-color: var(--mdx-yellow);
+  color: var(--white);
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  text-align: center;
+  z-index: 10;
+  font-weight: bolder;
+  letter-spacing: 1px;
+}
+
 .full-bleed {
   width: 100vw;
   position: relative;

docs/_component/nav-site.jsx

@@ -42,6 +42,7 @@ export function NavSite(props) {
 
   return (
     <nav className="navigation" aria-label="Site navigation">
+      <div id="banner">Ceasefire now! 🕊️</div>
       <a
         href="#start-of-content"
         id="start-of-navigation"