126 lines
3.8 KiB
HTML
126 lines
3.8 KiB
HTML
{# Auto-generated by Changemaker Lite Header Builder — do not edit manually #}
|
|
{% extends "base.html" %}
|
|
|
|
{% block announce %}
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<nav class="cm-header-nav" role="navigation" aria-label="Application">
|
|
<div class="cm-header-nav__inner">
|
|
<a href="#" data-path="/campaigns" class="cm-header-nav__link">
|
|
<span class="material-icons">campaign</span>
|
|
<span class="cm-header-nav__label">Campaigns</span>
|
|
</a>
|
|
<a href="#" data-path="/map" class="cm-header-nav__link">
|
|
<span class="material-icons">map</span>
|
|
<span class="cm-header-nav__label">Map</span>
|
|
</a>
|
|
<a href="#" data-path="/shifts" class="cm-header-nav__link">
|
|
<span class="material-icons">groups</span>
|
|
<span class="cm-header-nav__label">Volunteer</span>
|
|
</a>
|
|
<a href="#" data-path="/gallery" class="cm-header-nav__link">
|
|
<span class="material-icons">play_circle</span>
|
|
<span class="cm-header-nav__label">Gallery</span>
|
|
</a>
|
|
<a href="#" data-path="/responses" class="cm-header-nav__link">
|
|
<span class="material-icons">forum</span>
|
|
<span class="cm-header-nav__label">Responses</span>
|
|
</a>
|
|
<a href="#" data-path="/donate" class="cm-header-nav__link">
|
|
<span class="material-icons">favorite</span>
|
|
<span class="cm-header-nav__label">Donate</span>
|
|
</a>
|
|
<a href="#" data-path="/login" class="cm-header-nav__link">
|
|
<span class="material-icons">login</span>
|
|
<span class="cm-header-nav__label">Sign In</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
// Resolve nav link hrefs based on the current browser hostname.
|
|
// localhost → http://localhost:{ADMIN_PORT}
|
|
// subdomain.example.org → {proto}://app.example.org
|
|
(function() {
|
|
var h = location.hostname;
|
|
var base;
|
|
if (h === 'localhost' || h === '127.0.0.1') {
|
|
base = location.protocol + '//localhost:' + ({{ config.extra.admin_port }} || 3000);
|
|
} else {
|
|
var parts = h.split('.');
|
|
if (parts.length >= 3) { parts[0] = 'app'; }
|
|
else { parts.unshift('app'); }
|
|
base = location.protocol + '//' + parts.join('.');
|
|
}
|
|
var links = document.querySelectorAll('.cm-header-nav__link[data-path]');
|
|
for (var i = 0; i < links.length; i++) {
|
|
links[i].setAttribute('href', base + links[i].getAttribute('data-path'));
|
|
}
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* Override MkDocs Material announce bar container */
|
|
.md-banner {
|
|
background: #6f42c1 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
/* Hide the dismiss (X) button that Material adds for announce.dismiss */
|
|
.md-banner__button {
|
|
display: none !important;
|
|
}
|
|
.cm-header-nav {
|
|
background: #6f42c1;
|
|
min-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 24px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
z-index: 10;
|
|
}
|
|
.cm-header-nav__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 1400px;
|
|
width: 100%;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
.cm-header-nav__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 16px;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
transition: background 0.15s, transform 0.1s;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
}
|
|
.cm-header-nav__link:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
}
|
|
.cm-header-nav__link:active {
|
|
transform: translateY(0);
|
|
}
|
|
.cm-header-nav__link .material-icons {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cm-header-nav { padding: 0 8px; }
|
|
.cm-header-nav__label { display: none; }
|
|
.cm-header-nav__link { padding: 8px 10px; }
|
|
.cm-header-nav__inner { gap: 4px; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|