enhancement: improve mobile responsiveness and touch targets

[KGFCH2]

Related Issue: Closes #97

Summary: Enhance mobile responsiveness and touch interactivity.

[Copilot]

Pull request overview

This PR (Closes #97) updates the landing page and user profile page styling to improve small-screen layout and add touch/press feedback for interactive elements.

Changes:

• Expanded mobile @media rules to adjust padding/spacing and element sizing for smaller viewports.
• Updated mobile CTA/layout behavior (e.g., stacking CTA buttons on the landing page).
• Added :active press states to provide touch feedback on tiles/buttons/cards.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
apps/web/src/routes/u/[username]/+page.svelte	Adjusts mobile profile layout spacing/sizing and adds :active styling for touch feedback.
apps/web/src/routes/+page.svelte	Tunes mobile landing page layout/typography and adds :active styling for touch feedback.

Comments suppressed due to low confidence (2)

apps/web/src/routes/u/[username]/+page.svelte:324

• For .cta-link, the transition is only defined in the :active rule; when the user releases, the element returns to the base state with no transition, so the scale snaps back instead of animating. Put the transition: transform ... on the base .cta-link style (and keep :active only for the transform) to make press/release feedback consistent.

  .platform-tile:active, .cta-link:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

apps/web/src/routes/u/[username]/+page.svelte:323

• .platform-tile:hover already uses transform: translateX(4px), and the new .platform-tile:active sets transform: scale(0.98). On desktop, pressing a hovered tile will replace the translate with the scale (visible jump). Consider composing the transforms for the pressed+hovered case, or use a non-transform pressed style so hover motion isn’t interrupted.

  .platform-tile:active, .cta-link:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.