87 lines
2.1 KiB
HTML
87 lines
2.1 KiB
HTML
{% 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> |