One consistent top bar across the whole hub (HubBar everywhere)
There were three different top bars (home3/detail vs /play vs /art). Unify on the shared HubBar: - HubBar is now fully self-contained (own @font-face + hardcoded hub colors) so it renders identically regardless of the host page's tokens/fonts. - /art: dropped its bespoke gallery bar for <HubBar active="art" />. - /play: dropped its bar for <HubBar active="games" />; the contextual in-game step-back (Game Selection / Play Hub) moves into the page body as a secondary ".gameback" control, shown only in game views (the global nav is in HubBar). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { getJSON } from '$lib/api.js';
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import HubBar from '$lib/components/HubBar.svelte';
|
||||
|
||||
// Virtual frames the viewer can switch between — remembered locally, no account needed.
|
||||
const FRAMES = [
|
||||
@@ -86,23 +87,7 @@
|
||||
{/snippet}
|
||||
|
||||
<div class="room">
|
||||
<header class="bar">
|
||||
<a class="brand" href="/" aria-label="upbeatBytes home">
|
||||
<img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="/">News</a>
|
||||
<a href="/play">Games</a>
|
||||
<a href="/art" aria-current="page">Art</a>
|
||||
<a class="acct" href="/account" aria-label="Your account">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
|
||||
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="8" r="3.3" />
|
||||
<path d="M5.5 19.2a6.5 6.5 0 0 1 13 0" />
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<HubBar active="art" />
|
||||
|
||||
<main class="gallery">
|
||||
<button class="back" onclick={goBack} aria-label="Go back">
|
||||
@@ -204,23 +189,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px clamp(16px, 5vw, 56px);
|
||||
max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box;
|
||||
}
|
||||
.brand { display: block; line-height: 0; }
|
||||
.brand img { height: 34px; width: auto; display: block; }
|
||||
.nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 26px); }
|
||||
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
|
||||
.nav a:hover { color: var(--ink); }
|
||||
.nav a[aria-current="page"] { color: var(--accent); }
|
||||
.acct {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 38px; height: 38px; border-radius: 50%; color: var(--muted);
|
||||
}
|
||||
.acct:hover { color: var(--accent); background: #eef6f9; }
|
||||
|
||||
.gallery {
|
||||
flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
|
||||
padding: clamp(6px, 1.5vw, 16px) clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { goto, afterNavigate } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { getJSON } from '$lib/api.js';
|
||||
import HubBar from '$lib/components/HubBar.svelte';
|
||||
import { pushGameStatesBatch } from '$lib/gamesync.js';
|
||||
import { ritualState } from '$lib/ritual.js';
|
||||
import { prefs, initPrefs } from '$lib/prefs.svelte.js';
|
||||
@@ -270,20 +271,16 @@
|
||||
{#if isDevGated(game)}<meta name="robots" content="noindex" />{/if}
|
||||
</svelte:head>
|
||||
|
||||
<header class="bar">
|
||||
<div class="container inner">
|
||||
<a class="brand" href="/"><img class="logo" src="/logo.svg" alt="Upbeat Bytes" /></a>
|
||||
{#if view === 'hub'}
|
||||
<a class="back" href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>News</a>
|
||||
{:else}
|
||||
<button class="back" onclick={back}>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>{view === 'play' ? 'Game Selection' : 'Play Hub'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
<HubBar active="games" />
|
||||
|
||||
<main class="container page" class:gameview={view === 'play'}>
|
||||
{#if view !== 'hub'}
|
||||
<!-- in-game step-back (selection / hub); the global nav lives in HubBar above -->
|
||||
<button class="gameback" onclick={back}>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
{view === 'play' ? 'Game Selection' : 'Play Hub'}
|
||||
</button>
|
||||
{/if}
|
||||
{#if view === 'hub'}
|
||||
<h1>Play</h1>
|
||||
<p class="sub">A small calm thing after the brief. One of each a day — no rush, no score to beat but your own.</p>
|
||||
@@ -428,13 +425,15 @@
|
||||
</main>
|
||||
|
||||
<style>
|
||||
header.bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
|
||||
.inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
||||
.logo { height: 40px; display: block; }
|
||||
.back { color: var(--accent-deep); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px;
|
||||
background: none; border: none; font-family: inherit; cursor: pointer; }
|
||||
.back svg { width: 17px; height: 17px; display: block; }
|
||||
.page { padding: 22px 20px 70px; }
|
||||
/* in-game step-back, below the shared HubBar (matches the hub Back affordance) */
|
||||
.gameback { color: var(--accent-deep); font-size: 0.9rem; font-weight: 600; display: inline-flex;
|
||||
align-items: center; gap: 6px; background: none; border: none; font-family: inherit;
|
||||
cursor: pointer; padding: 6px 10px 6px 0; margin-bottom: 4px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.gameback svg { width: 16px; height: 16px; display: block; transition: transform 0.15s ease; }
|
||||
.gameback:hover { color: var(--accent); }
|
||||
.gameback:hover svg { transform: translateX(-2px); }
|
||||
.page { padding: 16px 20px 70px; }
|
||||
h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 6px 0 6px; }
|
||||
.seltitle { font-size: clamp(1.7rem, 4.5vw, 2.2rem); }
|
||||
.sub { color: var(--muted); margin: 0 0 24px; max-width: 540px; }
|
||||
|
||||
Reference in New Issue
Block a user