feat: nav classes, --width:1280px, nav in styleguide
- .nav .nav-inner .nav-logo .nav-links .nav-link in vault1984.css - --width bumped 1100->1280px to match nav (one consistent width) - hosted.html nav converted to vault1984.css classes, tailwind removed - styleguide.html has live nav at top
This commit is contained in:
James
parent
32316a91d0
commit
d9e5b03e3d
36
hosted.html
36
hosted.html
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/tailwind.min.css">
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
body{background:#0A1628;color:#f1f5f9;font-family:Inter,sans-serif;margin:0}
|
||||
|
|
@ -24,30 +24,18 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-bold text-3xl text-white tracking-tight leading-none">vault<span class="text-accent font-mono">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/hosted" class="font-semibold transition-colors flex items-center gap-1.5" style="color:#D4AF37"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#D4AF37;animation:hostedPulse 2s ease-in-out infinite"></span>Hosted</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/hosted" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link active">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost" style="padding:0.375rem 1rem">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/hosted" class="block font-semibold" style="color:#D4AF37">✦ Hosted</a>
|
||||
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<div style="padding-top:100px;padding-bottom:2.5rem;text-align:center;max-width:1100px;margin:0 auto;padding-left:2rem;padding-right:2rem">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,20 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link active">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost" style="padding:0.375rem 1rem">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container" style="padding-top:80px">
|
||||
<div style="padding: 5rem 0 2rem">
|
||||
<p class="label accent mb-3">Design System</p>
|
||||
<h1>vault<span style="color:var(--accent)">1984</span> Styleguide</h1>
|
||||
|
|
|
|||
BIN
vault1984-web
BIN
vault1984-web
Binary file not shown.
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
/* === TOKENS === */
|
||||
:root {
|
||||
--width: 1100px;
|
||||
--width: 1280px;
|
||||
--pad: 2rem;
|
||||
--radius: 1rem;
|
||||
--radius-sm: 0.5rem;
|
||||
|
|
@ -113,3 +113,14 @@ p.lead { font-size: 1.125rem; }
|
|||
|
||||
/* === ANIMATIONS === */
|
||||
@keyframes hostedPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.8); } }
|
||||
|
||||
/* === NAV === */
|
||||
.nav { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(10,22,40,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
|
||||
.nav-inner { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.nav-logo { font-family: var(--font-mono); font-weight: 700; font-size: 1.75rem; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
|
||||
.nav-logo .n { color: var(--accent); }
|
||||
.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
|
||||
.nav-link { color: var(--muted); transition: color 0.15s; }
|
||||
.nav-link:hover { color: var(--text); }
|
||||
.nav-link.active { color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; }
|
||||
.nav-link.active::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); animation: hostedPulse 2s ease-in-out infinite; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue