In the Header component, I wanted to hide profileInfoVertical at a certain breakpoint, however profileInfoVertical comes from the ProfileInfo.module.scss, so I couldn't access it from the Header.module.scss.
As a temporary fix, I've set the profileInfoVertical class to be global, so I could access it in the globlal scope inside Header.module.scss.
Responsiveness with SCSS Modules is not yet clear to me.
I use SCSS Mixins to handle media queries.
For now, when I need to add a certain item at a certain breakpoint, I add a SCSS Module class name to it. No classname means it's for fullscreen, since that doesn't need a breakpoint.
Behaviour seems to be similar across components:
- Don't display items with a certain breakpoint classname, until screen reaches that size
- When it reaches that size,
display: revertthem.
- Figma's "Tripma" project for
box-shadowelevation variants - Adobe Color wheel for generating the color palette
- Hopper's painting for my avatar