thejayman77
0887b4b888
- Add the real Upbeat Bytes lockup (logo.svg) and use it in the header, replacing the placeholder inline mark + text wordmark. - New square favicon: the logo's rising sun (bright gold) on azure. - Recolor the design system around the logo's #0083ad azure: rename the --sage* accent vars to --accent*, with deep/soft azure tints; navy ink (#16263a) echoing the logo's "Bytes"; cool slate muted text; a deep gold for text-weight accents plus --gold-bright for decorative fills; warm sand paper background. No urgency colors. - Retint the hero image overlay and the no-image card gradients to match. - theme-color → azure. Built clean; frontend tests/build pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
2.2 KiB
Svelte
46 lines
2.2 KiB
Svelte
<script>
|
|
// Mobile-only primary navigation. Today = the brief, Browse = mood/topic
|
|
// discovery, You = personal controls (Boundaries, History).
|
|
let { active = 'today', onToday, onBrowse, onYou } = $props();
|
|
</script>
|
|
|
|
<nav class="bottomnav" aria-label="Primary">
|
|
<button class:active={active === 'today'} onclick={onToday}>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
|
|
<span>Today</span>
|
|
</button>
|
|
<button class:active={active === 'browse'} onclick={onBrowse}>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M15.5 8.5l-2 5-5 2 2-5 5-2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
|
|
<span>Browse</span>
|
|
</button>
|
|
<button class:active={active === 'you'} onclick={onYou}>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
|
|
<span>You</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<style>
|
|
.bottomnav { display: none; }
|
|
@media (max-width: 720px) {
|
|
.bottomnav {
|
|
display: flex;
|
|
position: fixed;
|
|
left: 0; right: 0; bottom: 0;
|
|
z-index: 30;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--line);
|
|
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
|
|
box-shadow: 0 -2px 14px rgba(40, 38, 28, 0.05);
|
|
}
|
|
.bottomnav button {
|
|
flex: 1;
|
|
display: flex; flex-direction: column; align-items: center; gap: 3px;
|
|
background: none; border: none; padding: 6px 0; cursor: pointer;
|
|
color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em;
|
|
}
|
|
.bottomnav button svg { width: 23px; height: 23px; }
|
|
.bottomnav button.active { color: var(--accent-deep); }
|
|
.bottomnav button.active svg { stroke: var(--accent); }
|
|
}
|
|
</style>
|