diff --git a/AGENTS.md b/AGENTS.md index 78d7eef..29c80eb 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -56,7 +56,7 @@ Do not hand-edit or commit generated runtime/tooling directories: `.nuxt/`, `.ou - Follow **“Variante 1 – klar & kartenbasiert”**: light, clear and friendly, with whitespace, subtle borders/shadows and small radii. No dark theme, neon, glassmorphism or pill buttons. - Reuse Tailwind tokens and shared classes in `app/assets/css/main.css`; avoid arbitrary inline styling, a second CSS system or large UI frameworks. Keep the local Manrope font. See [design-reference.md](docs/design-reference.md) and [typography.md](docs/typography.md). -- Body and descriptions: at least 16 px, important desktop copy 18 px with 28/32 px line height. Use the existing `.prose` (max 48rem), not `prose-sm`. Card titles are 20 px; desktop navigation/buttons at least 16 px, mobile navigation 18 px. Keep secondary copy/tags/footer at 14 px; `text-xs` is reserved for genuine microinformation (currently map attribution). Do not shrink copy to force it into a layout; allow reflow and preserve text contrast. +- Body and descriptions: at least 16 px, important desktop copy 18 px with 28/32 px line height. Use the existing `.prose` (max 48rem), not `prose-sm`. Card titles are 20 px; desktop navigation/buttons at least 16 px, mobile navigation 18 px. Keep secondary copy/tags/footer metadata at 14 px; main footer navigation uses 16 px; `text-xs` is reserved for genuine microinformation (currently map attribution). Do not shrink copy to force it into a layout; allow reflow and preserve text contrast. - The sole organisation master is [public/brand/oklabflensburg-logo.png](public/brand/oklabflensburg-logo.png), unchanged from the [canonical upstream PNG](https://github.com/oklabflensburg/.github/blob/main/resources/oklabflensburg_logo_quadrat.png). Use `site.logo` through `AppLogo.vue`, including header/footer/mobile navigation. No redraw, vectorization, crop, stretch, filters, recolouring, duplicate source or extra wordmark. - Keep organisation, individual project signets, supporting association and network identities distinct. The OK Lab logo is neither every project's icon nor the association/network logo. - Keep images/fonts local and retain provenance/licences. Prefer `NuxtImg` with explicit dimensions and meaningful alt text; existing direct SVG project images remain valid. Use existing assets; the approved Plausible integration in `app/app.vue` is the sole analytics integration (see [analytics.md](docs/analytics.md)). Do not add other trackers or unnecessary third-party embeds. diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 97a1d21..6a6fce7 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -117,13 +117,22 @@ .join-card p { @apply mb-5 text-base leading-7 text-text-muted md:text-lg md:leading-8; } .blog-grid { @apply grid gap-6 md:grid-cols-2; } .blog-card .byline { @apply mb-0 mt-4 text-sm leading-6; } - .footer { @apply border-t border-border bg-white py-6; } - .footer-inner { @apply flex flex-wrap items-center justify-between gap-x-8 gap-y-5; } - .footer-tagline { @apply m-0 max-w-72 text-sm leading-6 text-text-muted; } - .footer-links { @apply flex flex-col gap-2 md:items-end; } - .footer-social { @apply flex items-center gap-2; } - .footer nav { @apply flex flex-wrap gap-x-4 gap-y-2; } - .footer nav a { @apply inline-flex min-h-11 items-center py-2 text-sm text-text-muted no-underline hover:text-brand hover:underline; } + .footer { @apply border-t border-border bg-surface-muted; } + .footer-inner { @apply grid gap-10 py-10 md:grid-cols-2 md:py-12 xl:grid-cols-[2fr_1fr_1fr_1fr] xl:gap-12; } + .footer-inner > * { @apply min-w-0; } + .footer-identity .brand { @apply mb-5 min-h-11 w-fit; } + .footer-tagline { @apply mb-5 max-w-md text-lg leading-8 font-semibold; } + .footer-meeting { @apply mb-6 flex items-start gap-3 text-base leading-7 text-text-muted; } + .footer-meeting svg { @apply mt-1; } + .footer-group-title { @apply mb-3 text-base leading-7 font-bold; } + .footer-group ul { @apply m-0 list-none p-0; } + .footer-group a { @apply inline-flex min-h-11 items-center gap-3 py-2 text-base leading-7 text-text-muted no-underline hover:text-brand hover:underline; } + .footer-meta { @apply flex flex-col gap-3 border-t border-border py-5 text-sm leading-6 text-text-muted xl:flex-row xl:items-center xl:justify-between xl:gap-8; } + .footer-affiliations { @apply flex flex-col sm:flex-row sm:flex-wrap sm:gap-x-6; } + .footer-affiliations p { @apply m-0; } + .footer-meta nav { @apply flex flex-wrap gap-x-5; } + .footer-meta a { @apply inline-flex min-h-11 items-center py-2 text-text-muted underline hover:text-brand; } + .breadcrumbs { @apply pt-6 text-sm text-text-muted; } .breadcrumbs ol { @apply m-0 flex list-none flex-wrap gap-2 p-0; } .breadcrumbs li:not(:last-child)::after { @apply ml-2 text-text-muted; content: '/'; } diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue index 9862845..02ea4be 100644 --- a/app/components/AppFooter.vue +++ b/app/components/AppFooter.vue @@ -4,22 +4,58 @@ const localePath = useLocalePath()