Improve footer

[AJaccP]

🧠 Context

src/components/Footer.astro is the scaffold's minimal footer: a Carleton accent bar over a single muted, static line reading "Carleton Computer Science Society". This ticket fills it out into a two-side footer:

• Left: © <year> Carleton Computer Science Society, where "Carleton Computer Science Society" is a link to the main CCSS site (https://ccss.carleton.ca). The year is dynamic.
• Right: a link to this site's GitHub repo (https://github.com/CarletonComputerScienceSociety/showcase) with a standard external-link arrow icon next to it.

Both links highlight to Carleton red on hover. On small screens the two sides stack vertically. Keep the two behaviors the scaffold already has: the sticky bottom-0 positioning and the red accent bar. The footer text is currently dull/muted — make it read clearly.

Files you'll touch:

• src/components/Footer.astro (the whole job)

Don't touch: the header, the layout, or the design tokens. This is footer-only.

---

🛠️ Implementation Plan

Style everything with Tailwind utility classes — not raw CSS or inline style attributes. The scaffold already uses utilities + the design tokens (text-muted, text-accent, bg-accent, etc.); stay in that system.

1. Frontmatter + dynamic year. The block fenced by --- at the top of an .astro file is the component frontmatter — JS/TS that runs at build time (on the server), not in the browser. Remove the scaffold comment currently sitting between the --- fences and compute the current year there (and import the icon component you'll need in step 3):

   ---
   import { Icon } from 'astro-icon/components';
   const year = new Date().getFullYear();
   ---

   You'll reference {year} in the markup.

2. Lay out the two sides. Build the footer as a shell — work out the actual classes yourself:

   <footer>
     {/* keep the existing sticky positioning */}
     {/* keep the Carleton accent bar */}
     {
       /* container: copyright on the left, GitHub link on the right —
         a flex column on mobile, a row with justify-between on sm: and up */
     }
   </footer>

   The one fiddly bit is the copyright line: plain text + the dynamic year + an inline link, all in one paragraph. Render it like this (only the society name is the link; © {year} is plain text, and {' '} keeps the space before the link):

   <p>
     © {year}{' '}
     <a href="https://ccss.carleton.ca" target="_blank" rel="noopener">
       Carleton Computer Science Society
     </a>
   </p>

3. GitHub link + arrow icon. The right side links to the repo with the lucide external-link arrow next to the label. Using the Icon you imported:

   <a
     href="https://github.com/CarletonComputerScienceSociety/showcase"
     target="_blank"
     rel="noopener"
   >
     GitHub
     <Icon name="lucide:external-link" class="h-3.5 w-3.5" aria-hidden="true" />
   </a>

   aria-hidden hides the icon from screen readers only (it stays visible), so the link isn't announced as "GitHub, image." astro-icon renders an inline SVG that inherits currentColor, so it follows the link color and the red hover automatically.

4. Keep the accent bar and sticky behavior. Leave the <div class="bg-accent/80 h-0.5 w-full"> accent bar above the content, and keep sticky bottom-0 z-10 on the <footer>. Make sure the muted text reads clearly against the canvas; both links should visibly shift to text-accent on hover.

5. Verify in pnpm dev: footer sticks to the bottom; on a wide screen the copyright is left and the GitHub link is right; on a narrow screen they stack; the year is current; both links go red on hover and open in a new tab; the accent bar is intact.

---

✅ Acceptance Criteria

• Left side reads © <dynamic year> Carleton Computer Science Society, with the society name linking to https://ccss.carleton.ca.
• Right side links to the repo (…/CarletonComputerScienceSociety/showcase) with an inline external-link arrow icon.
• Both links transition to Carleton red on hover.
• The two sides sit left/right on wide screens and stack vertically on small screens.
• The red accent bar and the sticky bottom-0 behavior are preserved; footer text reads clearly (no longer dull).
• The arrow uses <Icon name="lucide:external-link" /> (astro-icon), themed via currentColor and aria-hidden.
• Styling is done with Tailwind utility classes (no raw CSS or inline style).
• pnpm format:check, pnpm check, and pnpm build all pass.