From 8c531cda07d28a0c04c79da99f81b83def2d528f Mon Sep 17 00:00:00 2001
From: Demilad <demileye06@yahoo.co.uk>
Date: Sun, 20 Jan 2019 22:34:35 +0100
Subject: [PATCH] Added media queries

---
 index.html                       |  2 +-
 scss/layout/_background.scss     |  3 +-
 scss/layout/_header.scss         |  3 +-
 scss/layout/_section.scss        | 14 +++++--
 scss/main.scss                   |  4 ++
 scss/responsive/_background.scss | 19 +++++++++
 scss/responsive/_header.scss     | 71 ++++++++++++++++++++++++++++++++
 scss/responsive/_section.scss    | 21 ++++++++++
 8 files changed, 130 insertions(+), 7 deletions(-)
 create mode 100644 scss/responsive/_background.scss
 create mode 100644 scss/responsive/_header.scss
 create mode 100644 scss/responsive/_section.scss

diff --git a/index.html b/index.html
index bc31555..2c8cbfb 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
             <div class="logo">
                 <img src="images/NigeriaLogos_logo.svg" alt="NigeriaLogos logo">
             </div>
-            <h1>An <a href="#!">open source</a> collection of high quality, pixel perfect Nigerian company logos for free use.</h1>
+            <h1>An <a href="#!">open source</a> collection of high quality, <br> pixel perfect Nigerian company logos <br> for free use.</h1>
         </div>
         <div class="searchbar">
             <div class="select">
diff --git a/scss/layout/_background.scss b/scss/layout/_background.scss
index b346612..b27dec7 100644
--- a/scss/layout/_background.scss
+++ b/scss/layout/_background.scss
@@ -36,7 +36,7 @@
         grid-template-rows: 1fr;
     }
     &__stripe {
-        border-right: .25px $col-grey-3;
+        border-right: .035rem $col-grey-3;
         opacity: .6;
         width: 100%;
         height: 100%;
@@ -44,6 +44,7 @@
 
         &:nth-child(even) {
             border-right-style: solid;
+            opacity: .45;
         }
 
     }
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index a4c48fb..c3f18a8 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -17,7 +17,7 @@ header {
             margin-top: 0;
 
             & img {
-                width: 100%;
+                width: 5vh;
                 transform: translateY(-15%);
             }
         }
@@ -60,6 +60,7 @@ header {
         }
         .select {
             flex-basis: 30%;
+            min-width: 120px;
             position: relative;
             cursor: pointer;
 
diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss
index dbe2424..3886b42 100644
--- a/scss/layout/_section.scss
+++ b/scss/layout/_section.scss
@@ -7,13 +7,12 @@ main {
     margin-bottom: 10%;
 }
 .logo {
-    width: 17.6vw;
-    margin-top: 5%;
+    width: calc(25% - 20px); //20px accounts for the margin
+    margin-top: 8%;
 
     &__holder {
         border-radius: 4px;
         width: 100%;
-        height: 17.6vw;
         background-color: $col-grey-4;
         display: flex;
         justify-content: center;
@@ -21,7 +20,13 @@ main {
         text-align: center;
         position: relative;
 
-        &:hover > .logo__download{
+        &::before {
+            content: "";
+            display: block;
+            padding-top: 100%; 	
+        }
+
+        &:hover > .logo__download {
             opacity: 1;
         }
     }
@@ -33,6 +38,7 @@ main {
     &__text {
         width: 100%;
         overflow-x: hidden;
+        white-space: nowrap;
 
         &--primary { 
             font-weight: $fw-medium;
diff --git a/scss/main.scss b/scss/main.scss
index 65d41f2..29e460c 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -8,3 +8,7 @@
 @import 'layout/background';
 @import 'layout/footer';
 @import 'layout/section';
+
+@import 'responsive/background';
+@import 'responsive/header';
+@import 'responsive/section';
diff --git a/scss/responsive/_background.scss b/scss/responsive/_background.scss
new file mode 100644
index 0000000..453d9f8
--- /dev/null
+++ b/scss/responsive/_background.scss
@@ -0,0 +1,19 @@
+@media screen and (max-width: 1215px){
+    .background__stripe {
+        opacity: .4;
+
+        &:nth-child(even) {
+            opacity: .25;
+        }
+    }
+}
+
+@media screen and (max-width: 600px){
+    .background__stripe {
+        opacity: .2;
+
+        &:nth-child(even) {
+            opacity: .05;
+        }
+    }
+}
\ No newline at end of file
diff --git a/scss/responsive/_header.scss b/scss/responsive/_header.scss
new file mode 100644
index 0000000..73f9d91
--- /dev/null
+++ b/scss/responsive/_header.scss
@@ -0,0 +1,71 @@
+@media screen and (max-width: 750px){
+    .searchbar {
+        min-width: 50vw;
+
+        & .search {
+            margin-right: 6vw;
+        }
+    }
+}
+
+@media screen and (max-width: 450px){
+    header {
+        padding: 0;
+        overflow-x: hidden;
+
+        .heading {
+           width: 100vw;
+
+            & .logo {
+
+                & img {
+                    width: 5vh;
+                    transform: translateX(32vw) translateY(2vh);
+                }
+            }
+        }
+        h1{
+            margin-bottom: 20vh;
+            width: 100vw;
+        }
+        .searchbar {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            margin-left: -2vw;
+            margin-top: 30vh;
+            margin-bottom: 50vh;
+            padding: 0;
+            width: 80vw;
+            height: 20vh;
+            position: absolute;
+
+            & .search {
+                width: 94%;
+                height: 8vh;
+
+                input{
+                    opacity: .7;
+                }
+
+                &::after {
+                    right: -3%;
+                    top: .4rem;
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    transform: scale(.6);
+                }
+            }
+            & .select {
+                position: absolute;
+                top: 5vh;
+                min-width: 100%;
+                height: 20vh;
+                font-size: 170%;
+            }
+        }
+
+    }
+}
+
diff --git a/scss/responsive/_section.scss b/scss/responsive/_section.scss
new file mode 100644
index 0000000..f21c265
--- /dev/null
+++ b/scss/responsive/_section.scss
@@ -0,0 +1,21 @@
+@media screen and (max-width: 1215px){
+    .logo {
+        width: calc(33.333333% - 20px); //20px accounts for the margin
+    }
+}
+
+@media screen and (max-width: 650px){
+    body {
+        font-size: 85%;
+    }
+
+    .logo {
+        width: calc(50% - 20px); //20px accounts for the margin
+    }
+}
+
+@media screen and (max-width: 450px){
+    body {
+        font-size: 60%;
+    }
+}
\ No newline at end of file