From 5c65108bfc88e69d82d816dd3ebd823388364fd0 Mon Sep 17 00:00:00 2001
From: Romain <romain.rousseau5@gmail.com>
Date: Sun, 14 Jun 2020 16:59:50 +0200
Subject: [PATCH] media queries for responsiveness

---
 components/HomeSection.js                 |  4 +++-
 components/modules/CaseSection.module.css | 21 +++++++++++++++++++++
 components/modules/HomeSection.module.css | 19 ++++++++++++++++++-
 styles/global.css                         |  1 +
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/components/HomeSection.js b/components/HomeSection.js
index 64ca8c8..60eccbb 100644
--- a/components/HomeSection.js
+++ b/components/HomeSection.js
@@ -23,7 +23,9 @@ export default function HomeSection(props) {
           />
           <Avatar size={"big"} />
 
-          <Infos infos={person.infos} />
+          <div className={styles.infosHolder}>
+            <Infos infos={person.infos} />
+          </div>
         </div>
 
         <div className={styles.buttonContainer}>
diff --git a/components/modules/CaseSection.module.css b/components/modules/CaseSection.module.css
index d3a03d4..471e9b9 100644
--- a/components/modules/CaseSection.module.css
+++ b/components/modules/CaseSection.module.css
@@ -28,7 +28,28 @@
 }
 
 @media screen and (max-width: 1440px) {
+  .content {
+    padding: 2rem;
+  }
+
   .cardRow {
     flex-direction: column;
   }
+
+  .title {
+    margin-bottom: 2rem;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
 }
diff --git a/components/modules/HomeSection.module.css b/components/modules/HomeSection.module.css
index cc41518..bbb7d15 100644
--- a/components/modules/HomeSection.module.css
+++ b/components/modules/HomeSection.module.css
@@ -27,7 +27,7 @@
   width: 1.25rem;
   height: 1.25rem;
 
-  margin: 1rem auto;
+  margin: 1rem auto 0 auto;
 }
 
 .buttonContainer {
@@ -42,3 +42,20 @@
   align-content: center;
   justify-content: center;
 }
+
+@media screen and (max-width: 840px) {
+  .bg {
+    display: none;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
+}
diff --git a/styles/global.css b/styles/global.css
index 231ac22..8edbf50 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -34,6 +34,7 @@ body {
 .wrapper {
   position: relative;
   height: 100vh;
+  min-height: 100vh;
 }
 
 h1 {