♿️(styles) use em-based media queries for high text-only zoom

One huge advantage of using em-based MQs is that it auto-solves one big
thing that is quite annoying to solve otherwise: high text-only zoom.

For RGAA's compliance, we need to have a visually OK website with
text-only zoom at 200%.

Bootstrap itself had this debate multiple times and ended up sticking
with pixels, in my point of view, without a convincing reason (see for
example twbs/bootstrap#17403).

Author: manuhabitela

CHANGELOG.md

@@ -23,6 +23,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - Improve overall accessibility, especially for screen reader users,
   on all content pages: category list, category details, blogpost list,
   blogpost details, program list, program details, organization detail.
+- Use `em` based media queries instead of `px` based media queries to fix all
+  UI bugs when using the website with a huge text-only zoom
 
 ### Fixed
 

src/frontend/scss/settings/_variables.scss

@@ -10,24 +10,24 @@ $onepixel: 0.0625rem;
 // Add a new breakpoint "xxl" for more granular downgrading
 $grid-breakpoints: (
   xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1900px,
+  sm: em-calc(576px),
+  md: em-calc(768px),
+  lg: em-calc(992px),
+  xl: em-calc(1200px),
+  xxl: em-calc(1900px),
 );
 
 // Add max width for "xxl" breakpoint
 $container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1240px,
+  sm: rem-calc(540px),
+  md: rem-calc(720px),
+  lg: rem-calc(960px),
+  xl: rem-calc(1140px),
+  xxl: rem-calc(1240px),
 );
 
 // More space between columns
-$grid-gutter-width: 20px;
+$grid-gutter-width: rem-calc(20px);
 
 // Base body
 $body-color: r-theme-val(body-content, base-color);

src/frontend/scss/tools/_rem.scss

@@ -16,4 +16,8 @@ $rem-calc-base-font-size: 16px !default;
   $remSize: math.div($size, $rem-calc-base-font-size);
   @return $remSize * 1rem;
 }
+
+@function em-calc($size) {
+  $emSize: math.div($size, $rem-calc-base-font-size);
+  @return $emSize * 1em;
 }