ATM-39: Add Base Theme to Meetup Repo

[ninjaofawesome]

Description

• This PR adds a base theme to the repository. It currently only has font families and colors.

Issue

#39

Notes

• This PR does not include a dark theme as currently it is not in use. However, it would be nice to have a dark theme at some point, this could be ticketed separately.
• The "gradients" mentioned in the issue were meaning like a gradient background on an element, but there are different tints of the primary, secondary, and tertiary colors named primaryGradient, secondaryGradient, and tertiaryGradient. These can be renamed for clarity if desired.
• This PR uses locally hosted font files, could be somewhere on a CDN. This could be a fast follow ticket if we prefer to go that direction. (Also unfortunately did not use system fonts against my own suggestion.)
• The colors and font families were arbitrarily chosen from one of the existing flyers. If we'd like a different set of colors or fonts, happy to switch things up!
• Unsure if the postCSS package is needed for imports, but added it so that directives could be imported and used as needed, where needed. Could the reference to the postCss package be in the tailwind.config.mjs file under plugins?
• Added autoprefixer for vendor prefixes. If it feels unnecessary, for now I can remove it.
• Organized files for directives and theming into a new src/styles directory.
• Only minimally applied styles to elements in the feed, as that would be out of scope at the moment.

How to test

• Pull this branch and fire it up with npm run dev
• See that the base font family is now NotoSans
• Add a color to any element from the themes, see it apply appropriately.

Screenshots

Swatches:

Font Families:

Example of type elements applied on feed:

[reggi]

🎉 Looks great! I normally wouldn't commit on your branch but I had to add merge conflicts from main & add some configuration for astro to point to the right files. Also ran into snag with Bold in one of the file names and had some issues getting CI to pass.

I'm curious how the images of swatches / fonts are being made, and if you could add them as an html page on the site?

[reggi]

@ninjaofawesome let me know if this is ready to be merged 👍

[ninjaofawesome]

I'm curious how the images of swatches / fonts are being made, and if you could add them as an html page on the site?

I actually did it the most hack-tastic way possible by just adding each swatch manually (and then removing it before putting out the PR). How about I make a separate issue for that and get on that next?