From 5381612b42aa2cdf6d29eb7f0246d5ea15230ece Mon Sep 17 00:00:00 2001
From: KerelOlivier <olivierboeren@live.nl>
Date: Sun, 27 Mar 2022 00:23:06 +0100
Subject: [PATCH] add: responsiveness

---
 images/download.svg | 51 +++++++++++++++++++++++++++++++++++++++++
 index.html          |  2 +-
 styles.css          | 56 ++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 images/download.svg

diff --git a/images/download.svg b/images/download.svg
new file mode 100644
index 0000000..cbe1fdb
--- /dev/null
+++ b/images/download.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   enable-background="new 0 0 24 24"
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#FFFFFF"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="download.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="36.041667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-width="1900"
+     inkscape:window-height="1060"
+     inkscape:window-x="1930"
+     inkscape:window-y="10"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8" />
+  <g
+     id="g4">
+    <rect
+       fill="none"
+       height="24"
+       width="24"
+       id="rect2" />
+  </g>
+  <g
+     id="g8">
+    <path
+       d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"
+       id="path6"
+       style="fill:#212121;fill-opacity:1" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 9fe5a30..033e50f 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
 					<a href="https://github.com/KerelOlivier"><img src="./images/github.svg" alt="github"></a>
 				</div>
 			</section>
-			<a class="resume">Resume</a>
+			<a class="resume"><img src="./images/download.svg"> Resume</a>
 		</section>
 		<section class="info">
 			<h1 id="about">ABOUT</h1>
diff --git a/styles.css b/styles.css
index 47adf62..a223b5e 100644
--- a/styles.css
+++ b/styles.css
@@ -7,12 +7,18 @@ body{
     background-attachment: fixed;
     margin: 0;
     margin-top: 50px;
+    margin-bottom: 30px;
 }
 
 a{
     text-decoration: none;
     color: #155d77;
 }
+.resume img{
+    height: 25px;
+    position: relative;
+    top: 5px;
+}
 
 a:hover{
     color: #424242;
@@ -161,4 +167,52 @@ nav a:hover{
 }
 .project h2, p{
     margin: 0;
-}
\ No newline at end of file
+}
+
+
+/* Responsiveness */
+@media screen and (max-width: 1280px){
+    body{
+        margin-bottom: 5%;
+    }
+    nav{
+        width: 100%;
+        padding: 0;
+        text-align: center;
+    }
+    .content{
+        flex-direction: column;
+        width: 90%;
+    }
+    .profile{
+        width: 100%;
+    }
+    .info{
+        width: calc(100% - 100px);
+    }
+}
+@media screen and (max-width: 950px){
+    nav{
+        padding-left: 0;
+    }
+    .project{
+        flex-direction: column;
+        height: auto;
+    }
+    .project img{
+        width: 100%;
+        height: auto;
+    }
+}
+@media screen and (max-width: 550px){
+    .education{
+        flex-direction: column;
+        height: auto;
+    }
+    .education img{
+        width: 100%;
+        height: auto;
+    }
+
+}
+