johan
/
vault1984-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2026-03-02 04:15:06 -05:00
parent 32316a91d0
commit d9e5b03e3d
4 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
hosted.html
View File

@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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> <style>
*{box-sizing:border-box} *{box-sizing:border-box}
body{background:#0A1628;color:#f1f5f9;font-family:Inter,sans-serif;margin:0} body{background:#0A1628;color:#f1f5f9;font-family:Inter,sans-serif;margin:0}
@ -24,30 +24,18 @@
</head> </head>
<body> <body>
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5"> <nav class="nav">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div class="nav-inner">
<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> <a href="/" class="nav-logo">vault<span class="n">1984</span></a>
<div class="hidden md:flex items-center gap-6 text-sm"> <div class="nav-links">
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="text-gray-400 hover:text-white transition-colors">GitHub</a> <a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">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="/hosted.html" class="nav-link active">Hosted</a>
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a> <a href="/install.html" class="nav-link">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="#" class="nav-link btn btn-ghost" style="padding:0.375rem 1rem">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 &mdash; $12/yr</a> <a href="/hosted.html" class="btn btn-primary">Get hosted &mdash; $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>
</div> </div>
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md"> </div>
<div class="px-6 py-4 space-y-3"> </nav>
<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 &mdash; $12/yr</a>
</div>
</div>
</nav>
<!-- Hero --> <!-- 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"> <div style="padding-top:100px;padding-bottom:2.5rem;text-align:center;max-width:1100px;margin:0 auto;padding-left:2rem;padding-right:2rem">

15
styleguide.html
View File

@ -19,7 +19,20 @@
</head> </head>
<body> <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 &mdash; $12/yr</a>
</div>
</div>
</nav>
<div class="container" style="padding-top:80px">
<div style="padding: 5rem 0 2rem"> <div style="padding: 5rem 0 2rem">
<p class="label accent mb-3">Design System</p> <p class="label accent mb-3">Design System</p>
<h1>vault<span style="color:var(--accent)">1984</span> Styleguide</h1> <h1>vault<span style="color:var(--accent)">1984</span> Styleguide</h1>

BIN
vault1984-web
View File

Binary file not shown.

13
vault1984.css
View File

@ -6,7 +6,7 @@
/* === TOKENS === */ /* === TOKENS === */
:root { :root {
--width: 1100px; --width: 1280px;
--pad: 2rem; --pad: 2rem;
--radius: 1rem; --radius: 1rem;
--radius-sm: 0.5rem; --radius-sm: 0.5rem;
@ -113,3 +113,14 @@ p.lead { font-size: 1.125rem; }
/* === ANIMATIONS === */ /* === ANIMATIONS === */
@keyframes hostedPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.8); } } @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; }