Migrate from `px` to `rem` in SCSS Files

[ProchaLu]

Improve the SCSS files to use rem units instead of px. After researching about this topic we came up with a styling guide and adapted these rules to our codebase. This change makes for a more flexible and user-friendly styling approach that takes into account different screen sizes and improves overall consistency.

Reasons and benefits for using rem units

• Responsiveness: rem units scale proportionally with the font size of the user's browser, making sure that text and layout elements adapt seamlessly to different screen sizes and devices.
• Consistency: rem units provide consistent visual relationships between elements, regardless of the font size settings of the user's browser
• Maintainability: rem units promote better organization and maintainability of code

Styling Guidelines

Use rem:

• for text (font-size)
• layout properties under 32px (padding, margin, gap, etc)

Specific cases you may want to use px:

• for media queries (easier to calculate mobile device sizes)
• for "decorational" styling properties like border, box-shadow, text-shadow, etc(use integer values and to more easily create sharp edges)

Resources

Don't use rem for paddings margins and more This article describes why we should not use rem for everything.

Is it better to use ems/rems than px for font-size? This article by CSS-Tricks provides a small explanation and a link to a more detailed blog post on the topic. Pixels vs. Relative Units in CSS: why it’s still a big deal

Which is Better to Use in CSS: px, em, or rem This article by W3Docs provides a detailed discussion on the pros and cons of px, em, and rem units.

Why You Should Move from Pixels (px) to Relative Units (rem) in CSS This article provides a detailed discussion on the pros and cons of px and rem units, along with some best practices for using them together.

Should I use px or rem value units in my CSS? This thread provides a detailed discussion on the pros and cons of px and rem units.

PX or REM in CSS? Just Use REM Dev.to post on why rem units are better than px units.

[karlhorky]

@ProchaLu in the PR we're missing the description for why this is being done and the justification for the approach:

1. why switch every CSS property to rem?
2. if not, why not switch every CSS property?
3. if switching some CSS properties and not other CSS properties, why switching those CSS properties?

benefits, justification, resource links

[karlhorky]

what about Don’t use rem/em for paddings, margins and more?

maybe this should be worked into your decisions and suggestions above too?

[karlhorky]

probably at the end of this, I should create a accessibility / CSS / design cheatsheet for this on the Learning Platform, because of how nuanced this is