[DR-1166] Add Games Hackathon announcement to docs

docusaurus.config.ts

@@ -178,6 +178,15 @@ const config: Config = {
     "./plugins/fixPrism.ts",
   ],
   themeConfig: {
+    // DR-1166: remove on December 8, 2026 at 9 AM PT.
+    announcementBar: {
+      id: "games-hackathon-2026",
+      content:
+        `<div class="hackathon-announcement"><img class="hackathon-announcement-image" src="${baseUrl}img/games-hackathon-2026.png" alt="" width="1200" height="160"><div class="hackathon-announcement-copy"><strong>Join Reddit’s Last Hackathon of 2026!</strong> Build a daily game for a chance at over $30k in prizes. <a href="https://redditgameofday2026.devpost.com/">Learn more</a></div></div>`,
+      backgroundColor: "#00E3B6",
+      textColor: "#0f1a1c",
+      isCloseable: true,
+    },
     docs: {
       sidebar: {
         autoCollapseCategories: false,

src/css/custom.css

@@ -48,6 +48,29 @@
   background-color: var(--ifm-color-secondary);
 }
 
+/* Let the hackathon artwork and copy wrap above the docs navigation. */
+.theme-announcement-bar {
+  height: auto;
+}
+
+.theme-announcement-bar .close {
+  color: inherit;
+  opacity: 0.8;
+}
+
+.hackathon-announcement-image {
+  display: block;
+  width: 100%;
+  max-width: 1200px;
+  height: clamp(80px, 13.333vw, 160px);
+  margin: 0 auto;
+  object-fit: cover;
+}
+
+.hackathon-announcement-copy {
+  padding: 0.5rem 1rem;
+}
+
 .button.button--secondary {
   background-color: var(--ifm-color-primary);
   color: white;