add font size variables

TarasKachmar2022 · Mar 8, 2024 · e87b09e · e87b09e
1 parent 6ffcfaa
commit e87b09e
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 15 deletions.
diff --git a/src/sass/base/_variables.scss b/src/sass/base/_variables.scss
@@ -7,6 +7,20 @@
   // Font weight
   --fw-s: 300;
   --fw-m: 400;
+  // Font sizes
+  --fs-btn-t: 18px;
+  --fs-logo-m: 32px;
+  --fs-logo-t: 35px;
+  --fs-nav-t: 18px;
+  --fs-main-title-m: 52px;
+  --fs-main-title-t: 55px;
+  --fs-uppertitle-m: 18px;
+  --fs-uppertitle-t: 20px;
+  --fs-section-title: 38px;
+  --fs-description-t: 18px;
+  --fs-copyright-t: 18px;
+  --fs-hero-descr: 22px;
+  --fs-team-subtitle: 23px;
   // Text colors
   --main-txt-cl: #ffffff;
   --secondary-txt-cl: #333333;

diff --git a/src/sass/components/_btn.scss b/src/sass/components/_btn.scss
@@ -19,7 +19,7 @@
   transition-timing-function: var(--timing-function);
 
   @media screen and (min-width: 768px) {
-    font-size: 18px;
+    font-size: var(--fs-btn-t);
     line-height: 1.56;
   }
 

diff --git a/src/sass/components/_logo.scss b/src/sass/components/_logo.scss
@@ -5,12 +5,12 @@
   color: var(--accent-cl);
 
   @media screen and (min-width: 320px) {
-    font-size: 32px;
+    font-size: var(--fs-logo-m);
     line-height: 1.31;
   }
 
   @media screen and (min-width: 768px) {
-    font-size: 35px;
+    font-size: var(--fs-logo-t);
     line-height: 1.2;
     transition-property: scale;
     transition-duration: var(--duration);

diff --git a/src/sass/components/_nav.scss b/src/sass/components/_nav.scss
@@ -40,7 +40,7 @@
   transition-timing-function: var(--timing-function);
 
   @media screen and (min-width: 768px) {
-    font-size: 18px;
+    font-size: var(--fs-nav-t);
     line-height: 1.56;
   }
 

diff --git a/src/sass/components/_titles.scss b/src/sass/components/_titles.scss
@@ -1,36 +1,36 @@
 .main-title {
   font-weight: var(--fw-s);
-  font-size: 52px;
+  font-size: var(--fs-main-title-m);
   line-height: 1.27;
 
   @media screen and (min-width: 768px) {
-    font-style: 55px;
+    font-size: var(--fs-main-title-t);
     line-height: 1.2;
   }
 }
 
 .uppertitle {
   font-weight: var(--fw-m);
-  font-size: 18px;
+  font-size: var(--fs-uppertitle-m);
   line-height: 1.67;
 
   @media screen and (min-width: 768px) {
-    font-size: 20px;
+    font-size: var(--fs-uppertitle-t);
     line-height: 1.65;
   }
 }
 
 .section-title {
   font-weight: var(--fw-s);
-  font-size: 38px;
+  font-size: var(--fs-section-title);
   line-height: 1.26;
 }
 
 .description {
   line-height: 1.63;
 
   @media screen and (min-width: 768px) {
-    font-size: 18px;
+    font-size: var(--fs-description-t);
     line-height: 1.56;
   }
 }
diff --git a/src/sass/layout/_contact.scss b/src/sass/layout/_contact.scss
@@ -50,11 +50,10 @@
 
 .contact__title {
   font-weight: var(--fw-s);
-  font-size: 38px;
+  font-size: var(--fs-section-title);
   line-height: 1.26;
 
   @media screen and (min-width: 1360px) {
-    font-size: 38px;
     line-height: 1.26;
   }
 }

diff --git a/src/sass/layout/_footer.scss b/src/sass/layout/_footer.scss
@@ -8,7 +8,7 @@
   text-align: center;
 
   @media screen and (min-width: 768px) {
-    font-size: 18px;
+    font-size: var(--fs-copyright-t);
     line-height: 1.56;
   }
 }
diff --git a/src/sass/layout/_hero.scss b/src/sass/layout/_hero.scss
@@ -96,7 +96,7 @@
 }
 
 .hero__descr {
-  font-size: 22px;
+  font-size: var(--fs-hero-descr);
   line-height: 1.68;
   margin-bottom: 27px;
 

diff --git a/src/sass/layout/_team.scss b/src/sass/layout/_team.scss
@@ -96,12 +96,14 @@
     padding: 14px;
   }
 }
+
 .team__subtitle {
   font-weight: var(--fw-m);
-  font-size: 23px;
+  font-size: var(--fs-team-subtitle);
   line-height: 1.26;
   margin-bottom: 11px;
 }
+
 .team__subdescr {
   line-height: 1.63;
 }