Skip to content

Improve navbar #5

@AJaccP

Description

@AJaccP

🧠 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

  1. 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.

  2. 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.

  3. 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

  • The CCSS logo appears to the left of the brand text and the brand stays one link to /projects.
  • Route links are more prominent than the current small/muted state, but still smaller/lighter than the brand.
  • Nav links stay text-only (no per-route icons).
  • Active-state and hover both color the link Carleton red (existing behavior preserved).
  • No new dependencies; styling uses existing tokens.
  • pnpm format:check, pnpm check, and pnpm build all pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions