🧠 Context
src/components/Header.astro currently has the brand "Carleton Computer Science Showcase" on the left and two text-only nav links (Projects / Webring) on the right. The links are small and muted, and there's no logo. This ticket polishes the header: add the CCSS logo to the left of the brand text, and make the route links a bit more prominent (they're currently small and dull).
The brand should stay the largest text in the header; bump the route links up only enough to read clearly (between the current small/muted state and the brand size). Keep the existing active-state and hover behavior (active/hover links go Carleton red via the tokens).
The header may also gain an unrelated control on the right separately, so keep the layout flexible (don't hardcode widths that assume only two items live on the right).
Files you'll touch:
src/components/Header.astro (the whole job)
Don't edit: the footer (the GitHub link lives there, not here), the layout, or the design tokens. Header-only.
🛠️ Implementation Plan
-
Add the CCSS logo left of the brand text. The logo SVG lives at public/ccss-logo.svg (if it's not committed yet, ask Jacc for it). Render it to the left of the existing brand link, vertically centered, at a small fixed height (e.g. h-6 w-auto):
<a
href="/projects"
class="flex items-center gap-2 text-lg font-bold tracking-tight"
>
<img src="/ccss-logo.svg" alt="CCSS logo" class="h-6 w-auto" />
Carleton Computer Science <span class="text-accent">Showcase</span>
</a>
Keep the whole thing one link to /projects.
Play around with the code and styling as needed.
-
Make the route links more prominent. They're currently text-sm and text-muted when inactive. Bump the size up a notch (e.g. text-base) and darken the inactive color toward text-ink (keep active = text-accent, and the hover:text-accent transition). The brand text must still read as larger/heavier than the route links. Leave the existing navLinks array and the active-state logic in place — this is a sizing/color tweak, not a restructure.
-
Verify in pnpm dev: logo shows beside the brand; the brand is still the biggest text; route links are clearly readable (no longer dull); active page and hover both color red; the layout still looks balanced with breathing room on the right.
✅ Acceptance Criteria
🧠 Context
src/components/Header.astrocurrently has the brand "Carleton Computer Science Showcase" on the left and two text-only nav links (Projects / Webring) on the right. The links are small and muted, and there's no logo. This ticket polishes the header: add the CCSS logo to the left of the brand text, and make the route links a bit more prominent (they're currently small and dull).The brand should stay the largest text in the header; bump the route links up only enough to read clearly (between the current small/muted state and the brand size). Keep the existing active-state and hover behavior (active/hover links go Carleton red via the tokens).
The header may also gain an unrelated control on the right separately, so keep the layout flexible (don't hardcode widths that assume only two items live on the right).
Files you'll touch:
src/components/Header.astro(the whole job)Don't edit: the footer (the GitHub link lives there, not here), the layout, or the design tokens. Header-only.
🛠️ Implementation Plan
Add the CCSS logo left of the brand text. The logo SVG lives at
public/ccss-logo.svg(if it's not committed yet, ask Jacc for it). Render it to the left of the existing brand link, vertically centered, at a small fixed height (e.g.h-6 w-auto):Keep the whole thing one link to
/projects.Play around with the code and styling as needed.
Make the route links more prominent. They're currently
text-smandtext-mutedwhen inactive. Bump the size up a notch (e.g.text-base) and darken the inactive color towardtext-ink(keep active =text-accent, and thehover:text-accenttransition). The brand text must still read as larger/heavier than the route links. Leave the existingnavLinksarray and the active-state logic in place — this is a sizing/color tweak, not a restructure.Verify in
pnpm dev: logo shows beside the brand; the brand is still the biggest text; route links are clearly readable (no longer dull); active page and hover both color red; the layout still looks balanced with breathing room on the right.✅ Acceptance Criteria
/projects.pnpm format:check,pnpm check, andpnpm buildall pass.