CSS cleanup and .module SASS
#191
Assignees
Labels
long term
a problem that we'd have to work on over a long chunk of time
Comments
This was referenced Jul 7, 2021
Merged
mattxwang
added a commit
that referenced
this issue
Sep 2, 2021
This PR does two main things:
1. swaps out the footer CSS to be module'd, use grid in favor of fixed-width spacing, and uses classes instead of nested specificity
* this comes with the added benefit of increasing accessibility, since we're relying on less hacky positioning!
2. adds links to the footer - every single page under the "ACM" category, and a link to each committee
* under evan's suggestion, I've converted each committee link to a dark version of their logo + wordmark, to add some flair!
Motivating goals for adding the links to the footer:
1. as we add new pages (Impact, JEDI, etc.) we need to put them somewhere - and the navbar is quite a bit of work!
2. for the Tech Gala page, there's no way to get to it other than the homepage alert banner
3. the current flow to get to a committee's website is always 2+ clicks from the homepage, which seems bad
4. this is typical practice (I personally always scroll down to footers to find relevant links)
Some comments I'll make:
* ~~I kinda dislike how the links align, but a simple left/right text align looks even worse~~
* ~~how often do the footer links change? we may want to plop this into a data file~~
* when we add JEDI/Impact/w.e, where should they go? I'm thinking a new section under ACM called "Events and Initiatives", and we can bundle tech gala in there as well
* ~~are there any spacing issues and/or mobile view things I should look into fixing?~~
* added an extra util
Inadvertently part of #191.
mattxwang
added
the
long term
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We have a lot of repetitive CSS, some of which can be cleaned up or made more generalized.
Using
.moduleSASS should deal with some of this repetition, and works better with next.js as wellElaborating following conversation with @mattxwang :
The idea is to scope our CSS to be component-level, so we don’t have style collision (which we do have rn).
Only global styles should be variables. Globals, navbar, footer, button; everything else should be component level
Relevant link.
This would require refactoring our entire CSS code and using
.modulefiles to hold styling for each individual component typeThe text was updated successfully, but these errors were encountered: