Use full logotype in nav/footer and improve header layout

Replace symbol+text logo with full FABRO logotype SVG in both nav and
footer. Move Docs link to left side next to logo. Replace GitHub text
link with GitHub SVG icon on the right side.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-03-16 09:54:59 -04:00
parent 3b8e8f5f23
commit 7acbcb41b3
2 changed files with 20 additions and 11 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.8 KiB

View file

@ -46,13 +46,16 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
<!-- Nav -->
<nav class="fixed top-0 z-50 w-full border-b border-navy-800/60 bg-navy-950/70 backdrop-blur-xl">
<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
<a href="/" class="flex items-center gap-3">
<img src="/symbol.svg" alt="Fabro" class="h-8 w-8" />
<span class="font-display text-xl font-bold tracking-tight text-ice-50">Fabro</span>
</a>
<div class="flex items-center gap-6">
<div class="flex items-center gap-8">
<a href="/" class="flex items-center">
<img src="/logotype.svg" alt="Fabro" class="h-7" />
</a>
<a href="https://docs.fabro.sh" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">Docs</a>
<a href="https://github.com/fabro-sh/fabro" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">GitHub</a>
</div>
<div class="flex items-center gap-5">
<a href="https://github.com/fabro-sh/fabro" class="text-ice-300 hover:text-ice-50 transition-colors" aria-label="GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
</a>
<a
href="https://docs.fabro.sh/getting-started/quick-start"
class="rounded-lg bg-teal-700 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-teal-500 hover:shadow-[0_0_20px_-4px_rgba(53,127,158,0.5)]"
@ -646,13 +649,15 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
<footer class="border-t border-navy-800/60 py-12">
<div class="mx-auto max-w-6xl px-6">
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
<div class="flex items-center gap-3">
<img src="/symbol.svg" alt="Fabro" class="h-6 w-6" />
<span class="text-sm text-ice-300">Fabro — Open source, MIT-licensed</span>
<div class="flex items-center gap-4">
<img src="/logotype.svg" alt="Fabro" class="h-5" />
<span class="text-sm text-ice-300/60">Open source, MIT-licensed</span>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-5">
<a href="https://docs.fabro.sh" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">Docs</a>
<a href="https://github.com/fabro-sh/fabro" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">GitHub</a>
<a href="https://github.com/fabro-sh/fabro" class="text-ice-300 hover:text-ice-50 transition-colors" aria-label="GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
</a>
</div>
</div>
</div>