feat: update nav to match standard rstack-header style
- Nav changed from sticky to fixed position - Background/border colors matched to rstack-header dark theme - Added gradient r* logo badge (28x28, matching rstack-header dimensions) - Added "Try Demo" button with standard rApp styling - Right side wrapped in nav-right for consistent layout - Hero padding adjusted for fixed nav offset - Section scroll-margin-top set for proper anchor scrolling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
7dbcb33398
commit
6975cbe8a2
80
index.html
80
index.html
|
|
@ -24,21 +24,24 @@
|
|||
.hl-green { color: #34d399; font-weight: 600; }
|
||||
.hl-orange { color: #fb923c; font-weight: 600; }
|
||||
|
||||
/* ── Nav ──────────────────────────────────────── */
|
||||
/* ── Nav (matches rstack-header) ─────────────── */
|
||||
|
||||
nav {
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(11, 17, 32, 0.85);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -48,7 +51,7 @@
|
|||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
|
|
@ -59,6 +62,28 @@
|
|||
color: #e2e8f0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.nav-brand-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
color: #0b1120;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -76,11 +101,28 @@
|
|||
|
||||
.nav-links a:hover { color: #e2e8f0; }
|
||||
|
||||
.nav-demo-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
background: linear-gradient(135deg, #14b8a6, #0d9488);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(20, 184, 166, 0.25);
|
||||
}
|
||||
.nav-demo-btn:hover { opacity: 0.88; }
|
||||
|
||||
/* ── Hero ─────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 7rem 1.5rem 5rem;
|
||||
padding-top: calc(56px + 5rem);
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -345,9 +387,12 @@
|
|||
|
||||
.area-block {
|
||||
margin-bottom: 4rem;
|
||||
scroll-margin-top: 80px;
|
||||
scroll-margin-top: 72px;
|
||||
}
|
||||
|
||||
/* Ensure section anchors clear fixed nav */
|
||||
.section[id] { scroll-margin-top: 72px; }
|
||||
|
||||
.area-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -925,7 +970,9 @@
|
|||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="nav-left">
|
||||
<a href="/" class="nav-brand">rStack</a>
|
||||
<a href="/" class="nav-brand">
|
||||
<span class="nav-brand-badge">r*</span>
|
||||
</a>
|
||||
<div class="app-switcher" id="appSwitcher">
|
||||
<button class="app-switcher-trigger" id="appSwitcherTrigger" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="app-switcher-badge">r*</span>
|
||||
|
|
@ -1068,11 +1115,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#areas">Apps</a>
|
||||
<a href="#identity">Identity</a>
|
||||
<a href="#self-host">Self-Host</a>
|
||||
<a href="#open-source">Open Source</a>
|
||||
<div class="nav-right">
|
||||
<div class="nav-links">
|
||||
<a href="#areas">Apps</a>
|
||||
<a href="#identity">Identity</a>
|
||||
<a href="#self-host">Self-Host</a>
|
||||
<a href="#open-source">Open Source</a>
|
||||
</div>
|
||||
<a class="nav-demo-btn" href="https://demo.rspace.online/rspace">Try Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in New Issue