refactor(text-styles): update to have mobile (#1546)

* refactor(text-styles): update to have mobile * fix(text-styles): shift to map-get --------- Co-authored-by: seaerchin <[email protected]>
isomerpages · Oct 3, 2023 · 51f8f0a · 51f8f0a
1 parent 86e2ac6
commit 51f8f0a
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/src/styles/isomer-template/theme/_text-styles.scss b/src/styles/isomer-template/theme/_text-styles.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 display-1 {
   color: $content-base;
 
@@ -9,26 +11,32 @@ display-1 {
   letter-spacing: -1.408px;
 }
 
-.h1 {
-  color: $content-base;
-
-  font-family: Lato;
-  font-size: 3rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 3.5rem; /* 116.667% */
-  letter-spacing: -1.056px;
+// 1024 and above
+@media screen and (min-width: map-get($breakpoints, "lg")) {
+  .h1 {
+    color: $content-base;
+
+    font-family: Lato;
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3.5rem; /* 116.667% */
+    letter-spacing: -0.066rem;
+  }
 }
 
-.h1-small {
-  color: $content-base;
-
-  font-family: Lato;
-  font-size: 2.75rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 3.5rem; /* 116.667% */
-  letter-spacing: -1.056px;
+// 1023 and below
+@media screen and (max-width: (map-get($breakpoints, "lg") - 1)) {
+  .h1 {
+    color: $content-base;
+
+    font-family: Lato;
+    font-size: 2.75rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3.5rem; /* 116.667% */
+    letter-spacing: -0.0605rem;
+  }
 }
 
 .h2 {
@@ -146,6 +154,6 @@ display-1 {
   text-decoration-line: underline;
 
   &:hover {
-    color: var(--site-secondary-color-hover)
+    color: var(--site-secondary-color-hover);
   }
 }