joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(nav): restructure header + add footer for council portal

Browse source 
Nav now reads Pulse · Roadmap · Members · Events · [Admin]. Old links
(Home / Vision / Product / Updates / Contribute) are dropped from the
header; Vision moves to the footer alongside a Council manifesto stub.

Header keeps the name + Sign out on the right exactly as before — Sign out
is NOT duplicated in the footer.

Footer: small Fenja icon mark + © year + two text links. Uses the existing
ghost-border, no shadows, matches editorial flatness.

/council-manifesto added as a one-screen stub so the link doesn't 404.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-11 14:46:55 +02:00
parent 20209db2d8
commit 267ba34747
2 changed files with 120 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/layouts/AppLayout.astro
View file

@ -10,15 +10,19 @@ interface Props {
const { title, user } = Astro.props;
const navLinks = [
{ href: '/', label: 'Home' },
{ href: '/vision', label: 'Vision' },
{ href: '/product', label: 'Product' },
{ href: '/updates', label: 'Updates' },
{ href: '/roadmap', label: 'Roadmap' },
{ href: '/contribute', label: 'Contribute'},
{ href: '/pulse', label: 'Pulse' },
{ href: '/roadmap', label: 'Roadmap' },
{ href: '/members', label: 'Members' },
{ href: '/events', label: 'Events' },
];
const footerLinks = [
{ href: '/vision', label: 'Vision' },
{ href: '/council-manifesto', label: 'Council manifesto' },
];
const currentPath = Astro.url.pathname;
const year = new Date().getFullYear();
---
<BaseLayout title={title}>
<div class="app">
@ -59,6 +63,20 @@ const currentPath = Astro.url.pathname;
<main class="main-content">
<slot />
</main>
<footer class="footer" role="contentinfo">
<div class="footer-inner">
<div class="footer-left">
<img src="/logo-icon.svg" alt="" class="footer-mark" />
<span class="footer-copy label-sm">© {year} Fenja AI</span>
</div>
<nav class="footer-links" aria-label="Secondary">
{footerLinks.map(({ href, label }) => (
<a href={href} class="footer-link label-sm">{label}</a>
))}
</nav>
</div>
</footer>
</div>
</BaseLayout>
@ -181,4 +199,59 @@ const currentPath = Astro.url.pathname;
.main-content {
flex: 1;
}
/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
margin-top: var(--space-16);
padding: var(--space-6) 0;
border-top: var(--ghost-border);
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: 0 var(--space-10);
max-width: var(--content-max);
margin: 0 auto;
width: 100%;
}
.footer-left {
display: flex;
align-items: center;
gap: var(--space-3);
}
.footer-mark {
height: 16px;
width: auto;
display: block;
opacity: 0.7;
}
.footer-copy {
color: var(--on-surface-muted);
letter-spacing: var(--tracking-wide);
font-weight: 400;
}
.footer-links {
display: flex;
gap: var(--space-5);
}
.footer-link {
color: var(--on-surface-muted);
text-decoration: none;
border-bottom: none;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
transition: color var(--duration-fast) var(--ease-standard);
}
.footer-link:hover {
color: var(--on-surface-variant);
border-bottom: none;
}
</style>

41
src/pages/council-manifesto.astro Normal file
View file

@ -0,0 +1,41 @@
---
import AppLayout from '../layouts/AppLayout.astro';
const user = Astro.locals.user;
---
<AppLayout title="Council manifesto" user={user}>
<div class="page">
<header class="page-header">
<p class="label-sm eyebrow">Council manifesto</p>
<h1 class="display-md page-title">A document, in draft.</h1>
</header>
<div class="reading-col">
<p class="lead">
The Council manifesto is being written together with the founding members.
A first draft will land here before the kickoff session — followed by a window
for council members to mark it up directly.
</p>
</div>
</div>
</AppLayout>
<style>
.page {
padding: var(--space-12) var(--space-20) var(--space-16);
max-width: var(--content-max);
margin: 0 auto;
}
.page-header {
max-width: 44rem;
margin-bottom: var(--space-8);
}
.eyebrow {
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--on-surface-muted);
margin-bottom: var(--space-3);
}
.page-title { margin: 0; }
.reading-col { max-width: var(--reading-max); }
.lead { color: var(--on-surface-variant); }
</style>