add announcement bar for sponsoring

Author: jaredcwhite

bridgetown-website/frontend/javascript/theme_picker.js

@@ -45,7 +45,12 @@ class ThemePicker extends HTMLElement {
   }
 
   buildTemplate(optionName) {
-    return `<sl-dropdown>
+    return `<style>
+    sl-button::part(base) {
+      color: var(--color-lighter-green);
+      border-color: var(--color-light-green);
+    }
+    </style><sl-dropdown>
   <sl-button slot="trigger" caret size="small" outline>
     <sl-icon id="dropdown-button-icon" name="${
       this.optionsIcons[optionName]

bridgetown-website/src/_components/shared/navbar.css

@@ -1,3 +1,22 @@
+body > announcement-bar {
+  display: block;
+  background: var(--color-dark-gray);
+  padding-block: .75rem;
+  padding-inline: 1rem 5rem;
+  font-weight: bold;
+  text-align: center;
+  color: var(--color-light-orange);
+
+  > a {
+    color: var(--color-lightest-orange);
+    text-decoration: none;
+
+    > sl-icon {
+      vertical-align: -0.15em;
+    }
+  }
+}
+
 body > nav {
   view-transition-name: navbar;
   z-index: 1;

bridgetown-website/src/_components/shared/navbar.serb

@@ -1,3 +1,6 @@
+<announcement-bar>
+Help us reach our Q2 2026 sponsorship goal of $400/month! <a href="/sponsor" style="white-space: nowrap">Donate Today <sl-icon library="remixicon" name="arrows/arrow-right-circle-fill"></sl-icon></a>
+</announcement-bar>
 <nav aria-label="Main navigation"{% if site.data.edge_version %} class="edge"{% end %}>
   <navbar-inner id="nav-bar">
     <sl-bar align-items="center" spaced="between" expanded="false">