Add CTA buttons for adding projects and joining the webring

[davewjrh]

An "Add a project" button and "Join the webring" button have been added to their corresponding page header rows.

[davewjrh]

Note: The transition/hover properties were not working as expected until the line @custom-variant hover (&:hover); was added to global.css, as this would override Tailwinds @media (hover: hover) wrapper for touchscreen devices. The trade-off for this meant that hover effects can become 'stuck' if a tap event is triggered until a tap elsewhere is detected.

[AJaccP]

Button looks good overall, but could you pull it out into a shared component at src/components/CTAButton.Astro that takes label and href as props. This helps prevent the two buttons' definitions from drifting (which they slightly have already)

• /projects has duration-200, /webring doesn't — so the hover fade runs at 200ms on one page and Tailwind's default 150ms on the other.
• One uses gap-1, the other gap-x-1.

They're minor differences and not actually noticeable right now, but it would still be nice to ensure that both stay consistent.

The frontmatter for the component would be something like:

import { Icon } from 'astro-icon/components';

interface Props {
  label: string;
  href: string;
}

const { label, href } = Astro.props;

The actual would be mostly the same, I'd say use what's on /projects now (the one with duration-200 and gap-1) and swap the hardcoded urls + labels for props ( {href} and {label} )

Then each page can just use the component in place of the , for example:

<CTAButton
  label="Add a project"
  href="https://github.com/CarletonComputerScienceSociety/showcase#adding-a-project"
/>

One more minor fix while you're making these changes:

• opacity-100 as an explicit class can be removed since that's the default value