From 0eb562eea40507aa6fb72af0cbf0aa5e8d5e6258 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Fri, 7 May 2021 09:30:50 +0300
Subject: [PATCH] created media queries

---
 src/commons/about-section/about.jsx |  6 +++---
 src/sass/components/_popup.scss     |  7 +++++++
 src/sass/components/_story.scss     |  5 ++++-
 src/sass/layout/_header.scss        | 21 ++++++++++++++++++---
 src/sass/pages/_home.scss           |  3 +++
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/commons/about-section/about.jsx b/src/commons/about-section/about.jsx
index 183d059..f6a935f 100644
--- a/src/commons/about-section/about.jsx
+++ b/src/commons/about-section/about.jsx
@@ -40,7 +40,7 @@ function About() {
           <div className="composition">
             <img
               srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 1"
               className="composition__photo composition__photo--p1"
               src={nat1Large}
@@ -48,7 +48,7 @@ function About() {
 
             <img
               srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 2"
               className="composition__photo composition__photo--p2"
               src={nat2Large}
@@ -56,7 +56,7 @@ function About() {
 
             <img
               srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 3"
               className="composition__photo composition__photo--p3"
               src={nat3Large}
diff --git a/src/sass/components/_popup.scss b/src/sass/components/_popup.scss
index 5d9b775..190e43f 100644
--- a/src/sass/components/_popup.scss
+++ b/src/sass/components/_popup.scss
@@ -10,6 +10,13 @@
   visibility: hidden;
   transition: all 0.3s;
 
+  @supports (-webkit-backdrop-filter: blur(10px)) or
+    (backdrop-filter: blur(10px)) {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: rgba($color-black, 0.3);
+  }
+
   &__content {
     @include center-horizontal-vertical;
     width: 75%;
diff --git a/src/sass/components/_story.scss b/src/sass/components/_story.scss
index a8dfe1f..9bede4e 100644
--- a/src/sass/components/_story.scss
+++ b/src/sass/components/_story.scss
@@ -17,6 +17,7 @@
 
   @include respond(phone) {
     transform: skewX(0);
+    padding-left: 4rem;
   }
 
   &__shape {
@@ -24,6 +25,7 @@
     height: 15rem;
     float: left;
     shape-outside: circle(50% at 50% 50%);
+    -webkit-clip-path: circle(50% at 50% 50%);
     clip-path: circle(50% at 50% 50%);
     transform: translateX(-3rem) skewX(12deg);
     position: relative;
@@ -32,9 +34,10 @@
       transform: translateX(-3rem) skewX(0);
       shape-outside: none;
       clip-path: circle(50%);
-      left: 22%;
       margin-bottom: 1rem;
       margin-top: -2rem;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 
diff --git a/src/sass/layout/_header.scss b/src/sass/layout/_header.scss
index 4c1481e..ed2bf50 100644
--- a/src/sass/layout/_header.scss
+++ b/src/sass/layout/_header.scss
@@ -1,16 +1,31 @@
 .header {
-  height: 95vh;
+  height: 85vh;
   background-image: linear-gradient(
       to right bottom,
       rgba($color-primary-light, 0.8),
       rgba($color-primary-dark, 0.8)
     ),
-    url(../../commons/images/hero.jpg);
+    url(../../commons/images/hero-small.jpg);
   background-size: cover;
   background-position: top;
-  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
   position: relative;
 
+  @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+    height: 95vh;
+  }
+
+  @media (min-resolution: 192dpi) and (min-width: 37.5em),
+    (-webkit-min-device-pixel-ratio: 2) and (min-width: 125em) {
+    background-image: linear-gradient(
+        to right bottom,
+        rgba($color-primary-light, 0.8),
+        rgba($color-primary-dark, 0.8)
+      ),
+      url(../../commons/images/hero.jpg);
+  }
+
   @include respond(phone) {
     clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
   }
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index 4c2d615..7edf52e 100644
--- a/src/sass/pages/_home.scss
+++ b/src/sass/pages/_home.scss
@@ -6,6 +6,9 @@
   @include respond(tab-port) {
     padding: 20rem 0;
   }
+  @include respond(phone) {
+    padding: 22rem 0;
+  }
 }
 
 .section-features {