aligned font sizes

for several device sizes
webcomponents-preview · May 5, 2023 · 2b0e3cb · 2b0e3cb
1 parent 899c58a
commit 2b0e3cb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/root/root.component.scss b/src/components/root/root.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:math';
 @use '@/styles/utils' as utils;
 
 // prettier-ignore
@@ -50,16 +52,23 @@
 
   background-color: var(---wcp-root-background);
   color: var(---wcp-root-color);
-  
+
   font-family: var(--wcp-font-family);
   font-feature-settings: normal;
   font-size: 15px;
   line-height: 1.3;
 
-
   @include utils.breakpoint(sm) {
     font-size: 13px;
   }
+
+  @include utils.breakpoint(md) {
+    font-size: 15px;
+  }
+
+  @include utils.breakpoint(lg) {
+    font-size: 17px;
+  }
 }
 
 :host(:not([inline])) {

diff --git a/src/styles/mixins/breakpoint.mixin.scss b/src/styles/mixins/breakpoint.mixin.scss
@@ -3,8 +3,10 @@
 // use scss variables for media queries
 $breakpoints: (
   xs: 480px,
-  // unsued yet
   sm: 768px,
+  md: 992px,
+  lg: 1200px,
+  xl: 1600px,
 );
 
 @mixin breakpoint($name) {