From c93a134aed4763d5b1da2a848e32c683c0333297 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Thu, 6 May 2021 13:21:48 +0300
Subject: [PATCH] created media queries for images and stories component

---
 src/commons/about-section/about.jsx   | 23 +++++++++++++++++------
 src/commons/footer-section/footer.jsx | 15 ++++++++++++++-
 src/sass/components/_story.scss       |  6 ++++++
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/commons/about-section/about.jsx b/src/commons/about-section/about.jsx
index fc07ea0..183d059 100644
--- a/src/commons/about-section/about.jsx
+++ b/src/commons/about-section/about.jsx
@@ -1,6 +1,9 @@
 import nat1Large from "../../commons/images/nat-1-large.jpg";
+import nat1 from "../../commons/images/nat-1.jpg";
 import nat2Large from "../../commons/images/nat-2-large.jpg";
+import nat2 from "../../commons/images/nat-2.jpg";
 import nat3Large from "../../commons/images/nat-3-large.jpg";
+import nat3 from "../../commons/images/nat-3.jpg";
 
 function About() {
   return (
@@ -36,19 +39,27 @@ function About() {
         <div className="col-1-of-2">
           <div className="composition">
             <img
-              src={nat1Large}
-              alt="Nature 1"
+              srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
+              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              alt="Photo 1"
               className="composition__photo composition__photo--p1"
+              src={nat1Large}
             />
+
             <img
-              src={nat2Large}
-              alt="Nature 2"
+              srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
+              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              alt="Photo 2"
               className="composition__photo composition__photo--p2"
+              src={nat2Large}
             />
+
             <img
-              src={nat3Large}
-              alt="Nature 3"
+              srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
+              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              alt="Photo 3"
               className="composition__photo composition__photo--p3"
+              src={nat3Large}
             />
           </div>
         </div>
diff --git a/src/commons/footer-section/footer.jsx b/src/commons/footer-section/footer.jsx
index 4090d21..0690f92 100644
--- a/src/commons/footer-section/footer.jsx
+++ b/src/commons/footer-section/footer.jsx
@@ -1,10 +1,23 @@
 import logoLarge from "../images/logo-green-2x.png";
+import logoSmall from "../images/logo-green-1x.png";
+import logoGreenSmall from "../images/logo-green-small-1x.png";
+import logoGreenLarge from "../images/logo-green-small-2x.png";
 
 function Footer() {
   return (
     <footer className="footer">
       <div className="footer__logo-box">
-        <img src={logoLarge} alt="Large logo" className="footer__logo" />
+        <picture className="footer__logo">
+          <source
+            srcSet={`${logoGreenSmall} 1x, ${logoGreenLarge} 2x`}
+            media="(max-width: 37.5em)"
+          />
+          <img
+            srcSet={`${logoSmall} 1x, ${logoLarge} 2x`}
+            alt="Large logo"
+            src={logoLarge}
+          />
+        </picture>
       </div>
       <div className="row">
         <div className="col-1-of-2">
diff --git a/src/sass/components/_story.scss b/src/sass/components/_story.scss
index 2023dce..a8dfe1f 100644
--- a/src/sass/components/_story.scss
+++ b/src/sass/components/_story.scss
@@ -30,6 +30,11 @@
 
     @include respond(phone) {
       transform: translateX(-3rem) skewX(0);
+      shape-outside: none;
+      clip-path: circle(50%);
+      left: 22%;
+      margin-bottom: 1rem;
+      margin-top: -2rem;
     }
   }
 
@@ -44,6 +49,7 @@
 
     @include respond(phone) {
       transform: skewX(0);
+      display: inline-block;
     }
   }