Add banner

mdx-js · Nov 9, 2023 · efeb479 · efeb479 · vercel · Nov 9, 2023
1 parent 2a1109b
commit efeb479
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/docs/_asset/index.css b/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;

diff --git a/docs/_component/nav-site.jsx b/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"