Replaced pixel based font size to percent for A11Y

amir2mi · Sep 13, 2022 · 3ffd696 · 3ffd696
1 parent 1a75517
commit 3ffd696
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/scss/_config.scss b/scss/_config.scss
@@ -284,8 +284,8 @@ $TAB_SHOW_ANIMATION_DURATION: 300ms !default;
 $TAB_HIDE_ANIMATION_DURATION: 200ms !default;
 
 // *** Typography: font size, font family, line height
-$MIN_FONT_SIZE: 14 !default; // must be without unit
-$MAX_FONT_SIZE: 16 !default; // must be without unit
+$MIN_FONT_SIZE: 85% !default; // must be percent
+$MAX_FONT_SIZE: 100% !default; // must be percent
 $PRIMARY_FONT_FAMILY: "Nunito", sans-serif !default;
 $HEADING_FONT_FAMILY: $PRIMARY_FONT_FAMILY !default;
 $CODE_FONT_FAMILY: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

diff --git a/scss/_reset.scss b/scss/_reset.scss
@@ -24,17 +24,17 @@
 // *** Root
 :root {
   @include break-xs {
-    font-size: var(--#{$CSS_VAR_PFX}min-font-size-with-unit);
+    font-size: var(--#{$CSS_VAR_PFX}min-font-size);
   }
 
   $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, "sm");
   $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
   @media (min-width: $sm-bp) and (max-width: $xl-bp) {
-    font-size: #{"calc( var(--#{$CSS_VAR_PFX}min-font-size-with-unit) + ( var(--#{$CSS_VAR_PFX}max-font-size) - var(--#{$CSS_VAR_PFX}min-font-size) ) * ( ( 100vw - #{$sm-bp} ) / ( #{math.div($xl-bp,1px)} - #{math.div($sm-bp,1px)} ) ) )"};
+    font-size: #{"calc( var(--#{$CSS_VAR_PFX}min-font-size) + ( var(--#{$CSS_VAR_PFX}max-font-size) - var(--#{$CSS_VAR_PFX}min-font-size) ) * ( ( 100vw - #{$sm-bp} ) / ( #{math.div($xl-bp,1px)} - #{math.div($sm-bp,1px)} ) ) )"};
   }
 
   @include break-xl-min {
-    font-size: var(--#{$CSS_VAR_PFX}max-font-size-with-unit);
+    font-size: var(--#{$CSS_VAR_PFX}max-font-size);
   }
 
   @if $SUPPORT_SMOOTH_SCROLL {

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -9,8 +9,6 @@
   // *** Typography
   --#{$CSS_VAR_PFX}max-font-size: #{$MAX_FONT_SIZE};
   --#{$CSS_VAR_PFX}min-font-size: #{$MIN_FONT_SIZE};
-  --#{$CSS_VAR_PFX}max-font-size-with-unit: #{$MAX_FONT_SIZE + px};
-  --#{$CSS_VAR_PFX}min-font-size-with-unit: #{$MIN_FONT_SIZE + px};
 
   --#{$CSS_VAR_PFX}primary-font-family: #{$PRIMARY_FONT_FAMILY};
   --#{$CSS_VAR_PFX}heading-font-family: #{$HEADING_FONT_FAMILY};