adding announcement bar for soakie's event

2026-09-06 14:34:32 -05:00
parent ccb0ea5e49
commit bb732420d4
2 changed files with 88 additions and 0 deletions
@@ -0,0 +1,87 @@
+{% assign announcement_text = "Soakie's is being honored with a historic marker in Downtown Kansas City!" %}
+{% assign announcement_url = "https://www.eventbrite.com/e/soakies-historic-marker-rsvp-for-the-celebration-by-bqkc-tickets-1999807323538?aff=oddtdtcreator" %}
+{% assign announcement_label = "Learn more & RSVP for The Celebration on 9/26" %}
+
+<div id="announcement-bar" style="display: none;">
+  <div id="announcement-inner">
+    <span id="announcement-text">
+      {{ announcement_text }}
+      <a href="{{ announcement_url }}" target="_blank">{{ announcement_label }}</a>
+    </span>
+    <button id="announcement-close" aria-label="Dismiss announcement">✕</button>
+  </div>
+</div>
+
+<style>
+#announcement-bar {
+  background-color: var(--text-white);
+  color: var(--bg-black);
+  width: 100%;
+  z-index: 10000;
+  border-bottom: 1px solid var(--border-color-subtle);
+}
+
+#announcement-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-lg);
+  max-width: 900px;
+  margin: 0 auto;
+  position: relative;
+}
+
+#announcement-text {
+  font-size: var(--text-sm);
+  letter-spacing: var(--letter-spacing-normal);
+  text-align: center;
+}
+
+#announcement-text a {
+  color: var(--bg-black);
+  font-weight: var(--font-semibold);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+#announcement-text a:hover {
+  opacity: 0.7;
+}
+
+#announcement-close {
+  position: absolute;
+  right: 0;
+  background: none;
+  border: none;
+  color: var(--bg-black);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  padding: var(--space-xs) var(--space-sm);
+  opacity: 0.6;
+  line-height: 1;
+}
+
+#announcement-close:hover {
+  opacity: 1;
+}
+</style>
+
+<script>
+(function() {
+  var bar = document.getElementById("announcement-bar");
+  var closeBtn = document.getElementById("announcement-close");
+  var storageKey = "announcement-dismissed-v1";
+
+  // Show bar if not dismissed
+  if (!localStorage.getItem(storageKey)) {
+    bar.style.display = "block";
+  }
+
+  // Dismiss on X click
+  closeBtn.addEventListener("click", function() {
+    bar.style.display = "none";
+    localStorage.setItem(storageKey, "true");
+  });
+})();
+</script>