From 4bba618d566372fb377cca5de6e6c90992a06cb3 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Tue, 11 May 2021 15:08:09 +0300
Subject: [PATCH] created media queries

---
 src/SASS/abstracts/_include-media.scss | 12 +++--
 src/SASS/base/_base.scss               |  4 ++
 src/SASS/base/_typography.scss         |  5 ++
 src/SASS/components/components.scss    | 19 +++++++-
 src/SASS/layout/_layout.scss           | 28 ++++++++++++
 src/SASS/pages/_home.scss              | 63 +++++++++++++++++++++++++-
 6 files changed, 125 insertions(+), 6 deletions(-)

diff --git a/src/SASS/abstracts/_include-media.scss b/src/SASS/abstracts/_include-media.scss
index 0ff930c..48fec9c 100644
--- a/src/SASS/abstracts/_include-media.scss
+++ b/src/SASS/abstracts/_include-media.scss
@@ -29,9 +29,15 @@
 ///  $breakpoints: ('phone': 320px);
 ///
 $breakpoints: (
-  "phone": 320px,
-  "tablet": 768px,
-  "desktop": 1024px,
+  "smallest": 31.25em,
+  "small": 37.5em,
+  // 600px
+  "medium": 56.25em,
+  // 900px
+  "large": 68.75em,
+  // 1100px
+  "largest": 75em,
+  // 1200 px
 ) !default;
 
 ///
diff --git a/src/SASS/base/_base.scss b/src/SASS/base/_base.scss
index a4c7d4f..e2a3312 100644
--- a/src/SASS/base/_base.scss
+++ b/src/SASS/base/_base.scss
@@ -8,6 +8,10 @@
 
 html {
   font-size: 62.5%; // 1 rem = 10px; 10px/16px = 62.5% (16 is default browser font size)
+
+  @include media("<large") {
+    font-size: 50%;
+  }
 }
 
 body {
diff --git a/src/SASS/base/_typography.scss b/src/SASS/base/_typography.scss
index e34e9f3..61dff08 100644
--- a/src/SASS/base/_typography.scss
+++ b/src/SASS/base/_typography.scss
@@ -10,6 +10,11 @@ body {
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 1.5rem 3rem;
+
+  @include media("<small") {
+    font-size: 1.8rem;
+    padding: 1.25rem 2rem;
+  }
 }
 
 .paragraph:not(:last-of-type) {
diff --git a/src/SASS/components/components.scss b/src/SASS/components/components.scss
index cab46b6..68f5934 100644
--- a/src/SASS/components/components.scss
+++ b/src/SASS/components/components.scss
@@ -11,6 +11,10 @@
   &__item {
     flex: 0 0 50%;
     margin-bottom: 0.7rem;
+
+    @include media("<smallest") {
+      font-size: 1.3rem;
+    }
   }
 
   &__item::before {
@@ -32,6 +36,10 @@
   display: flex;
   align-items: center;
 
+  &__friends {
+    display: flex;
+  }
+
   &__photo {
     box-sizing: content-box;
     height: 4rem;
@@ -40,7 +48,7 @@
     border: 3px solid $color-white;
   }
   &__photo:not(:last-child) {
-    margin-right: -1.5rem;
+    margin-right: -2rem;
   }
 
   &__count {
@@ -57,6 +65,11 @@
   position: relative;
   overflow: hidden;
 
+  @include media("<medium") {
+    padding: 2rem;
+    margin-bottom: 3rem;
+  }
+
   &__text {
     margin-bottom: 2rem;
     z-index: 2;
@@ -95,6 +108,10 @@
     color: $color-primary;
     font-size: 2.2rem;
     font-weight: 300;
+
+    @include media("<small") {
+      font-size: 0 1.5rem;
+    }
   }
 
   &::before {
diff --git a/src/SASS/layout/_layout.scss b/src/SASS/layout/_layout.scss
index c0dd104..29bf45f 100644
--- a/src/SASS/layout/_layout.scss
+++ b/src/SASS/layout/_layout.scss
@@ -3,10 +3,20 @@
   margin: 8rem auto;
   background-color: $color-grey-light-2;
   box-shadow: $shadow-blurry;
+
+  @include media("<largest") {
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+  }
 }
 
 .content {
   display: flex;
+
+  @include media("<medium") {
+    flex-direction: column;
+  }
 }
 
 .hotel-view {
@@ -21,6 +31,14 @@
   background-color: $color-grey-light-1;
   border-bottom: $line;
   font-size: $normal-font-size;
+
+  @include media("<medium") {
+    padding: 3rem;
+  }
+
+  @include media("<small") {
+    flex-direction: column;
+  }
 }
 
 .description {
@@ -29,6 +47,16 @@
   padding: 3rem;
   flex: 0 0 60%;
   margin-right: 4.5rem;
+
+  @include media("<medium") {
+    padding: 2rem;
+    margin-right: 3rem;
+  }
+
+  @include media("<small") {
+    margin-right: 0;
+    margin-bottom: 3rem;
+  }
 }
 
 .user-reviews {
diff --git a/src/SASS/pages/_home.scss b/src/SASS/pages/_home.scss
index 59c7f65..e2879f1 100644
--- a/src/SASS/pages/_home.scss
+++ b/src/SASS/pages/_home.scss
@@ -6,6 +6,12 @@
   display: flex;
   font-size: $normal-font-size;
 
+  @include media("<smallest") {
+    flex-wrap: wrap;
+    align-content: space-around;
+    height: 12rem;
+  }
+
   // main axis
   justify-content: space-between;
 
@@ -24,6 +30,12 @@
     align-items: center;
     justify-content: center;
 
+    @include media("<smallest") {
+      order: 1;
+      flex: 0 0 100%;
+      background-color: $color-grey-light-2;
+    }
+
     &--input {
       font-family: inherit;
       font-size: inherit;
@@ -137,11 +149,21 @@
     list-style: none;
     margin-top: 3.5rem;
 
+    @include media("<medium") {
+      display: flex;
+      margin: 0;
+    }
+
     &--item {
       position: relative;
 
       &:not(:last-child) {
         margin-bottom: 0.5rem;
+
+        @include media("<medium") {
+          flex: 1;
+          margin-bottom: 0;
+        }
       }
 
       &::before {
@@ -180,6 +202,16 @@
 
       display: flex;
       align-items: center;
+
+      @include media("<medium") {
+        justify-content: center;
+        padding: 2rem;
+      }
+
+      @include media("<small") {
+        flex-direction: column;
+        padding: 1.5rem 0.5rem;
+      }
     }
 
     &--icon {
@@ -187,6 +219,13 @@
       height: 1.75rem;
       margin-right: 2rem;
       fill: currentColor;
+
+      @include media("<small") {
+        margin-bottom: 0.7rem;
+        margin-right: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+      }
     }
   }
 
@@ -195,6 +234,10 @@
     color: $color-grey-light-4;
     text-align: center;
     padding: 2.5rem;
+
+    @include media("<medium") {
+      display: none;
+    }
   }
 }
 
@@ -245,17 +288,29 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+
+    @include media("<small") {
+      padding: 0 1.5rem;
+    }
   }
 
   &__rating-average {
     font-size: 2.25rem;
     font-weight: 300;
-    margin-bottom: -4px;
+    margin-bottom: -3px;
+
+    @include media("<small") {
+      font-size: 1.8rem;
+    }
   }
 
   &__rating-count {
-    font-size: $small-font-size;
+    font-size: 1rem;
     text-transform: uppercase;
+
+    @include media("<smallest") {
+      display: none;
+    }
   }
 }
 
@@ -263,6 +318,10 @@
   padding: 3.5rem 0;
   text-align: center;
 
+  @include media("<medium") {
+    padding: 2.5rem 0;
+  }
+
   &__book-now {
     font-size: 1.5rem;
     font-weight: 300;