Create LANDING Cretive Bakery

mate-academy · Dec 17, 2023 · 7136d1c · 7136d1c
1 parent a1239fd
commit 7136d1c
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 76 deletions.
diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss
@@ -5,17 +5,17 @@
   flex-direction: column;
   gap: 64px;
 
-  @include onTablet {
+  @include on-tablet {
     margin-block: 152px;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     margin-top: 178px;
     margin-bottom: 349px;
   }
 
   &__wrap {
-    @include baseGridTemplate;
+    @include base-grid-template;
 
     row-gap: 32px;
     align-items: center;
@@ -28,13 +28,13 @@
     font-weight: 400;
     line-height: 41px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
       font-size: 56px;
       line-height: 48px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 3;
       font-size: 72px;
       line-height: 61px;
@@ -47,11 +47,11 @@
     font-weight: 400;
     line-height: 24px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: 5 / -1;
     }
   }
@@ -66,14 +66,14 @@
     background-repeat: no-repeat;
     background-size: contain;
 
-    @include onTablet {
+    @include on-tablet {
       left: 20%;
       top: 15%;
       width: 526px;
       height: 493px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       top: 0;
       left: 23%;
       width: 718px;
@@ -87,14 +87,14 @@
     width: 100%;
     row-gap: 48px;
 
-    @include baseGridTemplate;
+    @include base-grid-template;
 
-    @include onTablet {
+    @include on-tablet {
       margin-top: 72px;
       row-gap: 80px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       margin-top: 144px;
     }
   }
@@ -105,11 +105,11 @@
     gap: 8px;
     grid-column: span 2;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 2;
     }
   }

diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss
@@ -3,13 +3,13 @@
   background: rgba(28, 26, 38, 1);
   color: rgba(255, 255, 255, 1);
 
-  @include baseGridTemplate;
+  @include base-grid-template;
 
   grid-template-rows: repeat(4), 1fr;
   row-gap: 40px;
   padding-block: 56px;
 
-  @include onTablet {
+  @include on-tablet {
     padding-block: 88px;
   }
 
@@ -19,12 +19,12 @@
     background-size: contain;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 1 / 2;
       grid-column: 1 / 3;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 2;
     }
   }
@@ -34,34 +34,34 @@
     text-align: left;
 
     &--menu {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 2 / 3;
         grid-column: 1 / 5;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-column: 1 / 3;
       }
     }
 
     &--numbers {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 2 / 3;
         grid-column: 5 / -1;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-column: 5 / 7;
       }
     }
 
     &--email {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 3 / 4;
         grid-column: 5 / -1;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-row: 2 / 3;
         grid-column: 7 / -1;
       }
@@ -75,14 +75,14 @@
     line-height: 41px;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 1 / 2;
       grid-column: 5 / -1;
       font-size: 56px;
       line-height: 48px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       font-size: 72px;
       line-height: 61px;
     }
@@ -94,7 +94,6 @@
     gap: 16px;
 
     &-link {
-
       @include transition;
 
       &:hover {
@@ -118,7 +117,7 @@
     display: flex;
     gap: 34px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 4 / 5;
     }
   }
@@ -169,7 +168,7 @@
     color: rgba(127, 128, 150, 1);
     grid-column: 1 / 2;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 4 / 5;
       grid-column: 5 / -1;
     }

diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
@@ -1,18 +1,18 @@
 .header {
   height: 100vh;
 
-  @include onTablet {
+  @include on-tablet {
     height: auto;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     height: 100vh;
   }
 
   &__content {
     position: relative;
 
-    @include baseGridTemplate;
+    @include base-grid-template;
   }
 
   &__text {
@@ -23,21 +23,21 @@
     text-align: center;
     margin-block: 32px;
 
-    @include onTablet {
+    @include on-tablet {
       margin-top: 80px;
       margin-bottom: 146px;
       grid-column: span 3;
       text-align: left;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       width: 100%;
       margin-top: 135px;
       margin-bottom: 8px;
       grid-column: span 2;
     }
 
-    @include onLargeDisplay {
+    @include on-large-display {
       margin-top: 144px;
       margin-bottom: 40px;
       grid-column: 1 / 3;
@@ -53,13 +53,13 @@
     text-transform: uppercase;
     letter-spacing: -5px;
 
-    @include onTablet {
+    @include on-tablet {
       font-size: 80px;
       line-height: 68px;
       grid-column: 1 / -1;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 8;
       font-size: 136px;
       line-height: 116px;
@@ -76,20 +76,20 @@
     background-repeat: no-repeat;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       position: absolute;
       z-index: -1;
       width: 100%;
       height: 328px;
       top: 144px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       height: 546px;
       top: 0;
     }
 
-    @include onLargeDisplay {
+    @include on-large-display {
       height: 586px;
     }
   }
@@ -143,12 +143,12 @@
       }
     }
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: 3 / 7;
       margin-top: 210px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: 1 / 3;
       margin-top: 64px;
 

diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss
@@ -9,7 +9,7 @@
     gap: 64px;
     width: 100%;
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       display: flex;
     }
 
@@ -104,7 +104,7 @@
         @include transition;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         display: none;
       }
     }