rework style for desktop and tablet versions

mate-academy · Aug 11, 2024 · ce3ae02 · ce3ae02
1 parent 149d1cf
commit ce3ae02
Show file tree

Hide file tree

Showing 13 changed files with 577 additions and 1,601 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@linthtml/linthtml": "^0.9.5",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.7.3",
+    "@mate-academy/scripts": "^1.8.6",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "jest": "^29.7.0",

diff --git a/src/index.html b/src/index.html
@@ -164,7 +164,7 @@ <h3 class="section__title">Compare Bikes</h3>
         <div class="bikes">
           <article class="article bikes__article">
             <img
-              class="article__image"
+              class="bikes__image"
               src="./images/photos/bike-1.jpg"
               alt="Sporty 4"
             />
@@ -181,7 +181,7 @@ <h4 class="article__title">Sporty 4</h4>
 
           <article class="article bikes__article">
             <img
-              class="article__image"
+              class="bikes__image"
               src="./images/photos/bike-2.jpg"
               alt="Ride in town ST"
             />
@@ -198,7 +198,7 @@ <h4 class="article__title">Ride in town ST</h4>
 
           <article class="article bikes__article">
             <img
-              class="article__image"
+              class="bikes__image"
               src="./images/photos/bike-3.jpg"
               alt="Agile ride 3"
             />
@@ -216,10 +216,10 @@ <h4 class="article__title">Agile ride 3</h4>
       </section>
 
       <section
-        class="section main__section"
+        class="section main__section section--details"
         id="details"
       >
-        <h3 class="title section__title">The Details</h3>
+        <h3 class="title section__title section__title--details">The Details</h3>
 
         <article class="article section__article">
           <div class="pictures article__pictures">
@@ -265,7 +265,7 @@ <h3 class="title section__title">The Details</h3>
           </div>
 
           <p class="title article__title">Range & Integrated lights</p>
-          <p class="main__paragraph">
+          <p class="article__paragraph">
             The removable battery has up to 70km battery autonomy and weighs
             only 2.4 kg. Lights integrated into the frame give you always-on
             visibility day and night.
@@ -293,7 +293,7 @@ <h3 class="title section__title">The Details</h3>
           <p class="title article__title">
             Hydraulic disc brakes & Lightweight
           </p>
-          <p class="main__paragraph">
+          <p class="article__paragraph">
             Brakes with total stopping power the second you make contact. The
             removable battery has up to 70km battery autonomy and weighs only
             2.4 kg. Lights integrated into the frame give you always-on

diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss
@@ -1,3 +1,5 @@
+@use '../utils/mixins' as *;
+
 .address {
   display: flex;
   flex-direction: column;
@@ -7,6 +9,15 @@
   font-style: normal;
   color: #fff;
   text-align: left;
+  align-self: start;
+
+  @include for-tablet {
+    padding-top: 0;
+  }
+
+  @include for-desktop {
+    padding-top: 0;
+  }
 
   &__label {
     margin-bottom: 8px;

diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -23,15 +23,6 @@
     line-height: 34px;
   }
 
-  &__image {
-    display: block;
-    margin: 0 auto;
-    margin-bottom: 32px;
-    height: 228px;
-    width: 280px;
-    object-fit: cover;
-  }
-
   &__pictures {
     margin-bottom: 16px;
   }
@@ -41,7 +32,17 @@
   }
 
   &__button {
-    margin-bottom: 40px;
+
+    margin-top: 40px;
+
+    @include for-tablet {
+      margin-top: 48px;
+    }
+
+    @include for-desktop {
+      margin-top: 48px;
+    }
+
     grid-column: span 2;
 
     @include for-tablet {

diff --git a/src/styles/blocks/bikes.scss b/src/styles/blocks/bikes.scss
@@ -9,10 +9,31 @@
 
     @include for-tablet {
       grid-column: 2 / 6;
+      margin-bottom: 48px;
     }
 
     @include for-desktop {
       grid-column: span 4;
+      margin-bottom: 48px;
+    }
+  }
+
+  &__image {
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 32px;
+    height: 228px;
+    width: 280px;
+    object-fit: cover;
+
+    @include for-tablet {
+      height: 319px;
+      width: 392px;
+    }
+
+    @include for-desktop {
+      height: 256px;
+      width: 324px;
     }
   }
 }
diff --git a/src/styles/blocks/compaire-bikes.scss b/src/styles/blocks/compaire-bikes.scss
@@ -1,3 +1,5 @@
+@use '../utils/mixins' as *;
+
 .compaire-bikes {
   &__paragraph {
     margin-bottom: 16px;

diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -1,7 +1,18 @@
+@use '../utils/mixins' as *;
+
 .footer {
   height: 200px;
   background-image: url(../images/photos/footer-background.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 83%;
+
+  @include for-tablet {
+    height: 480px;
+    background-position: 80%;
+  }
+
+  @include for-desktop {
+    height: 555px;
+  }
 }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -7,6 +7,14 @@
   background-repeat: no-repeat;
   background-size: cover;
 
+  @include for-tablet {
+    background-position: center;
+  }
+
+  @include for-desktop {
+    background-position: center;
+  }
+
   &__title {
     font-family: Poppins, Helvetica, sans-serif;
     font-size: 36px;
@@ -38,11 +46,11 @@
   min-height: 100vh;
 
   @include for-tablet {
-    padding: 24px 20px 130px;
+    padding: 36px 20px 130px;
   }
 
   @include for-desktop {
-    padding: 24px 20px 203px;
+    padding: 36px 20px 203px;
   }
 
   @include page-grid;

diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss
@@ -9,6 +9,13 @@
   color: #fff;
 
   @include page-grid;
+  @include for-tablet {
+    padding: 120px 20px 120px;
+  }
+
+  @include for-desktop {
+    padding: 120px 20px 120px;
+  }
 
   &__title {
     margin-bottom: 32px;
@@ -20,15 +27,28 @@
 
     @include for-tablet {
       grid-column: 1 / 4;
+      font-size: 48px;
+      line-height: 48px;
     }
 
     @include for-desktop {
       grid-column: 1 / 6;
+      font-size: 64px;
+      line-height: 64px;
     }
   }
 
   &__paragraph {
-    margin-bottom: 40px;
+    margin-bottom: 92px;
+
+    @include for-tablet {
+      margin-bottom: 132px;
+    }
+
+    @include for-desktop {
+      margin-bottom: 164px;
+    }
+
     font-size: 16px;
     line-height: 22px;
 

diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
@@ -3,6 +3,7 @@
 .menu {
   position: fixed;
   inset: 0;
+  z-index: 1;
   transform: translateX(100%);
   transition: transform 0.3s ease;
   box-sizing: border-box;

diff --git a/src/styles/blocks/pictures.scss b/src/styles/blocks/pictures.scss
@@ -45,5 +45,6 @@
     height: 100%;
     position: absolute;
     object-fit: cover;
+    z-index: 0;
   }
 }
diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss
@@ -1,8 +1,29 @@
+@use '../utils/mixins' as *;
+
 .section {
-  padding-top: 52px;
+
+  &--details {
+    padding-top: 52px;
+
+    @include for-tablet {
+      padding-top: 72px;
+    }
+
+    @include for-desktop {
+      padding-top: 96px;
+    }
+  }
 
   &--contact-us {
     padding-top: 40px;
+
+    @include for-tablet {
+      padding-top: 72px;
+    }
+
+    @include for-desktop {
+      padding-top: 112px;
+    }
   }
 
   &__title {
@@ -13,9 +34,33 @@
     line-height: 32px;
     letter-spacing: -1.5px;
     text-align: center;
+
+    @include for-tablet {
+      font-size: 48px;
+      line-height: 48px;
+    }
+
+    @include for-desktop {
+      font-size: 64px;
+      line-height: 64px;
+    }
+
+    &--details {
+      @include for-tablet {
+        margin-bottom: 64px;
+      }
+    }
   }
 
   &__article {
     margin-bottom: 40px;
+
+    @include for-tablet {
+      margin-bottom: 48px;
+    }
+
+    @include for-desktop {
+      margin-bottom: 48px;
+    }
   }
 }