Improve navigation between main app, conditions, and dashboard
- Main app: split tagline into attribution + Station/Dashboard nav pills (always visible, styled with border/hover) - Conditions page: add Dashboard → link and ← App back-link in header - Dashboard: add Conditions link, rename App → ← Weather in header nav Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
2986301599
commit
f67e38857e
4 files changed
+47
-3
No files matched your search
@@ -119,12 +119,28 @@ html, body {
|
|||||||
0%,100% { opacity:1; transform:scale(1); }
|
0%,100% { opacity:1; transform:scale(1); }
|
||||||
50% { opacity:.45; transform:scale(.8); }
|
50% { opacity:.45; transform:scale(.8); }
|
||||||
}
|
}
|
||||||
|
.hdr-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
.hdr-time {
|
.hdr-time {
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.hdr-dash-link {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: .85;
|
||||||
|
transition: opacity .15s;
|
||||||
|
}
|
||||||
|
.hdr-dash-link:hover { opacity: 1; }
|
||||||
|
|
||||||
/* ── Hero ────────────────────────────────────────────────── */
|
/* ── Hero ────────────────────────────────────────────────── */
|
||||||
.hero {
|
.hero {
|
||||||
@@ -340,7 +356,10 @@ canvas { display: block; }
|
|||||||
<span class="hdr-station" id="stationName">Genesis 8:22</span>
|
<span class="hdr-station" id="stationName">Genesis 8:22</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="hdr-live"><span class="live-dot"></span>Live</div>
|
<div class="hdr-live"><span class="live-dot"></span>Live</div>
|
||||||
<div class="hdr-time" id="hdrTime"></div>
|
<div class="hdr-right">
|
||||||
|
<a href="/dashboard" class="hdr-dash-link">Dashboard →</a>
|
||||||
|
<div class="hdr-time" id="hdrTime"></div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
|
|||||||
@@ -214,7 +214,8 @@ canvas.sparkline { display: block; width: 100%; height: 22px; margin-top: 0.4rem
|
|||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<span class="station-name" id="stationName"></span>
|
<span class="station-name" id="stationName"></span>
|
||||||
<a href="/" class="logout">App</a>
|
<a href="/conditions" class="logout">Conditions</a>
|
||||||
|
<a href="/" class="logout">← Weather</a>
|
||||||
<a href="/dashboard/logout" class="logout">Sign out</a>
|
<a href="/dashboard/logout" class="logout">Sign out</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -29,7 +29,11 @@
|
|||||||
<button class="tab" data-tab="learn">Learn</button>
|
<button class="tab" data-tab="learn">Learn</button>
|
||||||
<button class="tab" data-tab="settings">Settings</button>
|
<button class="tab" data-tab="settings">Settings</button>
|
||||||
</nav>
|
</nav>
|
||||||
<span class="tagline">Open-Meteo · RainViewer · <a href="/conditions" class="tagline-link">Station</a> · <a href="/dashboard" class="tagline-link">Dashboard</a></span>
|
<span class="tagline">Open-Meteo · RainViewer</span>
|
||||||
|
<nav class="station-links">
|
||||||
|
<a href="/conditions" class="station-link">Station</a>
|
||||||
|
<a href="/dashboard" class="station-link">Dashboard</a>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Loading -->
|
<!-- Loading -->
|
||||||
|
|||||||
@@ -109,6 +109,26 @@ a:hover { text-decoration: underline; }
|
|||||||
}
|
}
|
||||||
.tagline-link:hover { opacity: 1; text-decoration: underline; }
|
.tagline-link:hover { opacity: 1; text-decoration: underline; }
|
||||||
|
|
||||||
|
.station-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.station-link {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--card-sub);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: .85;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: opacity .15s, background .15s;
|
||||||
|
}
|
||||||
|
.station-link:hover { opacity: 1; background: var(--card-bg-soft); }
|
||||||
|
|
||||||
.settings-nav-links {
|
.settings-nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
|
|||||||
Reference in new issue
Block a user