Body font size (#676)

* Use fluid font-size for body text * Increase font-size of small text
epfl-si · Aug 11, 2023 · 2bf236c · 2bf236c
1 parent 55285f2
commit 2bf236c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/assets/config/typography.scss b/assets/config/typography.scss
@@ -1,14 +1,11 @@
 @charset 'utf-8';
 
 body {
-  font-size: $font-size-base * 1.125;
+  font-size: 1rem;
+  font-size: clamp( 1rem, calc(0.9375rem + 0.25vw), 1.125rem );
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-
-  @include media-breakpoint-down(sm) { font-size: $font-size-base; }
-
-  @include media-breakpoint-down(xs) { font-size: $font-size-base * 0.875; }
 }
 
 .h1,
@@ -67,11 +64,8 @@ h6,
 }
 
 .lead {
-  font-size: 1.375rem;
-
-  @include media-breakpoint-down(md) { font-size: 1.25rem; }
-
-  @include media-breakpoint-down(xs) { font-size: 1rem; }
+  font-size: 1.125rem;
+  font-size: clamp( 1rem, calc(0.8125rem + 0.75vw) , 1.375rem );
 }
 
 small {

diff --git a/assets/config/variables.scss b/assets/config/variables.scss
@@ -34,6 +34,15 @@ $opacities: map.merge((
   "100": 1,
 ), $opacities);
 
+// Font-size
+
+$small-font-size: 0.875rem;
+
+$btn-font-size-sm: 0.875rem;
+$btn-padding-y-sm: 0.375rem;
+$btn-padding-x-sm: 0.75rem;
+$btn-line-height-sm: 1.5;
+
 // Legacy font-size
 $legacy-font-size-xl:   1.25rem;
 $legacy-font-size-lg:   1.125rem;