style: Add dynamic root font-size calculation on body style

rezozero · May 2, 2024 · 20b4686 · 20b4686
1 parent 754e703
commit 20b4686
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
@@ -1,3 +1,24 @@
+:root {
+    --size: 375;
+    @include media('>=md') {
+        --size: #{breakpoint(md, $strip-unit: true)};
+    }
+    @include media('>=lg') {
+        --size: #{breakpoint(lg, $strip-unit: true)};
+    }
+    @include media('>=vl') {
+        --size: #{breakpoint(vl, $strip-unit: true)};
+    }
+    @include media('>=xl') {
+        --size: #{breakpoint(xl, $strip-unit: true)};
+    }
+}
+
+html {
+    --vw-ratio: 0.3;
+    font-size: calc((100vw / var(--size)) * (16 * var(--vw-ratio)) + 1rem * calc(1 - var(--vw-ratio)));
+}
+
 body {
     font-family: sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -27,13 +48,13 @@ button {
     }
 }
 
-input{
+input {
     color: inherit;
     font-size: inherit;
     line-height: inherit;
 
-    &[type="submit"],
-    &[type="reset"] {
+    &[type='submit'],
+    &[type='reset'] {
         cursor: pointer;
     }
 }

diff --git a/assets/scss/functions/_breakpoint.scss b/assets/scss/functions/_breakpoint.scss
@@ -3,14 +3,20 @@
 /*
  * @param {string} $key - breakpoint e.g. xl
  */
-@function breakpoint($key) {
+@function breakpoint($key, $strip-unit: false) {
     @if type-of($breakpoints) != map {
         @warn "$breakpoints is not defined";
         @return null;
     }
 
     @if map.has-key($breakpoints, $key) {
-        @return map.get($breakpoints, $key);
+        $value: map.get($breakpoints, $key);
+
+        @if $strip-unit {
+            @return strip-units($value)
+        } @else {
+            @return $value
+        }
     }
 
     @warn "Unkown '#{$key}' in $breakpoints.";