Final page v0.2

mate-academy · Aug 15, 2024 · 8eb43bb · 8eb43bb
1 parent 50afdaf
commit 8eb43bb
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -81,7 +81,7 @@ <h1 class="header__title">Take the Streets</h1>
           class="navigation__item"
         >
           <img
-            class="navigation__logo-image"
+            class="navigation__image--logo"
             src="./images/menu-logo.svg"
             alt="menu-logo"
           />

diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss
@@ -8,7 +8,7 @@
   padding-top: 48px;
   font-family: $page-font-family;
   font-style: normal;
-  color: #fff;
+  color: $main-color;
   text-align: left;
   align-self: start;
 
@@ -22,7 +22,7 @@
 
   &__item {
     text-decoration: none;
-    color: #fff;
+    color: $main-color;
     transition: $page-transition;
   }
 

diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -6,9 +6,9 @@
   text-align: left;
 
   &__paragraph {
-    font-size: 16px;
+    font-size: $article-font-size;
     font-weight: 400;
-    line-height: 22px;
+    line-height: $article-line-height;
 
     &--details {
       @include page-grid;

diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -5,7 +5,7 @@
   height: 56px;
   border: 0;
   border-radius: 40px;
-  background-color: #fff;
+  background-color: $button-background-color;
   font-family: $page-font-family;
   font-size: 16px;
   font-weight: 700;

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -17,45 +17,39 @@
 
   @include for-tablet {
     background-position: center;
-  }
-
-  @include for-desktop {
-    background-position: center;
-  }
-
-  @include for-tablet {
     padding: 36px 20px 130px;
   }
 
   @include for-desktop {
+    background-position: center;
     padding: 36px 20px 203px;
   }
 
   @include page-grid;
 
   &__title {
     font-family: $page-font-family;
-    font-size: 36px;
+    font-size: $header-title-font-size;
     font-weight: 700;
-    line-height: 36px;
+    line-height: $header-title-font-size;
     letter-spacing: -1.5px;
     text-align: center;
-    color: #fff;
+    color: $main-color;
 
     align-self: end;
     grid-column: 1 / 3;
     grid-row: 2 / 3;
 
     @include for-tablet {
       grid-column: 1 / 7;
-      font-size: 64px;
-      line-height: 64px;
+      font-size: calc($header-title-font-size + 28px);
+      line-height: calc($header-title-font-size + 28px);
     }
 
     @include for-desktop {
       grid-column: 1 / 13;
-      font-size: 80px;
-      line-height: 80px;
+      font-size: calc($header-title-font-size + 44px);
+      line-height: calc($header-title-font-size + 44px);
     }
   }
 

diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss
@@ -7,7 +7,7 @@
   font-family: $page-font-family;
   font-weight: 400;
   text-align: left;
-  color: #fff;
+  color: $main-color;
 
   @include page-grid;
 
@@ -21,22 +21,22 @@
 
   &__title {
     margin-bottom: 32px;
-    font-size: 32px;
-    font-weight: 500;
-    line-height: 32px;
+    font-size: $main-title-font-size;
+    font-weight: $main-title-font-weight;
+    line-height: $main-title-font-size;
     letter-spacing: -1.5px;
     grid-column: 1 / 3;
 
     @include for-tablet {
       grid-column: 1 / 4;
-      font-size: 48px;
-      line-height: 48px;
+      font-size: calc($main-title-font-size + 16px);
+      line-height: calc($main-title-font-size + 16px);
     }
 
     @include for-desktop {
       grid-column: 1 / 6;
-      font-size: 64px;
-      line-height: 64px;
+      font-size: calc($main-title-font-size + 32px);
+      line-height: calc($main-title-font-size + 32px);
     }
   }
 
@@ -65,9 +65,9 @@
     }
 
     &--semi-bold {
-      font-size: 23px;
-      font-weight: 500;
-      line-height: 32px;
+      font-size: $main-font-size;
+      font-weight: $main-font-weight;
+      line-height: $main-line-height;
     }
   }
 

diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
@@ -16,6 +16,14 @@
   background-color: $menu-background-color;
   overflow-y: auto;
 
+  @include for-tablet {
+    padding: 36px 20px;
+  }
+
+  @include for-desktop {
+    padding: 36px 20px;
+  }
+
   @include page-grid;
 
   align-content: start;

diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss
@@ -36,7 +36,7 @@
     line-height: 16px;
     letter-spacing: 2px;
     text-align: right;
-    color: #fff;
+    color: $main-color;
     transform: translate(calc(-100% - 20px));
   }
 

diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss
@@ -94,9 +94,9 @@
   &__paragraph {
     margin-bottom: 16px;
     font-family: $page-font-family;
-    font-size: 16px;
+    font-size: $article-font-size;
     font-weight: 400;
-    line-height: 22px;
+    line-height: $article-line-height;
     text-align: left;
   }
 }
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -1,9 +1,19 @@
 $page-font-family: Poppins, Helvetica, sans-serif;
 $page-transition: 300ms;
+$header-title-font-size: 36px;
 $main-background-color: #1d1d1d;
+$main-color: #fff;
+$main-title-font-size: 32px;
+$main-title-font-weight: 500;
+$main-font-size: 23px;
+$main-line-height: calc($main-font-size + 9px);
+$main-font-weight: 500;
 $menu-background-color: #c2c2c2;
 $menu-color: #1d1d1d;
+$button-background-color: #fff;
 $section-title-size: 32px;
 $section-title-size-tablet: 48px;
 $section-title-size-desktop: 64px;
 $section-contact-title-size-desktop: 48px;
+$article-font-size: 16px;
+$article-line-height: calc($article-font-size + 6px);