From cf39a2cd48c0927aee911872c0b064f177db871c Mon Sep 17 00:00:00 2001
From: Elisa <elisablancart@gmail.com>
Date: Fri, 10 Jul 2020 20:37:43 +0200
Subject: [PATCH] Update index.html and main.css

---
 src/index.html | 29 +++++++++++++++-----------
 src/main.css   | 55 +++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/index.html b/src/index.html
index d0511e3..c1746e0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -240,18 +240,23 @@
                 </div>
                 <div>
                     <div class="h4"><span class="couleur">Manifeste de mode de seconde main,</span> Manifeste pour la mode de demain.</div>
-                    <div class="rs">
-                        Vous avez aimez notre idée, vous souhaitez nous suivre de plus près? Rendez vous sur Mét-amorphose 
-                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
-                            <g fill="#4c8f29">
-                                <path d="M180.8,30.13333h-135.6c-8.32433,0 -15.06667,6.74233 -15.06667,15.06667v135.6c0,8.32433 6.74233,15.06667 15.06667,15.06667h75.33333v-67.8h-22.6v-22.6h22.6v-12.1362c0,-22.97667 11.19453,-33.0638 30.29153,-33.0638c9.14547,0 13.98187,0.678 16.272,0.98687v21.61313h-13.02513c-8.10587,0 -10.9384,4.27893 -10.9384,12.94227v9.65773h23.76013l-3.22427,22.6h-20.53587v67.8h37.66667c8.32433,0 15.06667,-6.74233 15.06667,-15.06667v-135.6c0,-8.32433 -6.74987,-15.06667 -15.06667,-15.06667z"></path>
-                            </g>
-                        </svg>, Méta-morphose 
-                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
-                            <g fill="#4c8f29">
-                                <path d="M75.31862,22.6c-29.07113,0 -52.71862,23.66938 -52.71862,52.74805v75.33333c0,29.07113 23.66938,52.71862 52.74805,52.71862h75.33333c29.07113,0 52.71862,-23.66938 52.71862,-52.74805v-75.33333c0,-29.07113 -23.66938,-52.71862 -52.74805,-52.71862zM165.73333,52.73333c4.1584,0 7.53333,3.37493 7.53333,7.53333c0,4.1584 -3.37493,7.53333 -7.53333,7.53333c-4.1584,0 -7.53333,-3.37493 -7.53333,-7.53333c0,-4.1584 3.37493,-7.53333 7.53333,-7.53333zM113,67.8c24.9278,0 45.2,20.2722 45.2,45.2c0,24.9278 -20.2722,45.2 -45.2,45.2c-24.9278,0 -45.2,-20.2722 -45.2,-45.2c0,-24.9278 20.2722,-45.2 45.2,-45.2zM113,82.86667c-16.64218,0 -30.13333,13.49115 -30.13333,30.13333c0,16.64218 13.49115,30.13333 30.13333,30.13333c16.64218,0 30.13333,-13.49115 30.13333,-30.13333c0,-16.64218 -13.49115,-30.13333 -30.13333,-30.13333z"></path>
-                            </g>
-                        </svg>
+                    <div>
+                        Vous avez aimez notre idée, vous souhaitez nous suivre de plus près?
+                        Rendez vous sur 
+                        <a href="https://www.facebook.com/groups/555617581784273" class="rs">Métamorphose
+                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
+                                <g fill="#4c8f29">
+                                    <path d="M180.8,30.13333h-135.6c-8.32433,0 -15.06667,6.74233 -15.06667,15.06667v135.6c0,8.32433 6.74233,15.06667 15.06667,15.06667h75.33333v-67.8h-22.6v-22.6h22.6v-12.1362c0,-22.97667 11.19453,-33.0638 30.29153,-33.0638c9.14547,0 13.98187,0.678 16.272,0.98687v21.61313h-13.02513c-8.10587,0 -10.9384,4.27893 -10.9384,12.94227v9.65773h23.76013l-3.22427,22.6h-20.53587v67.8h37.66667c8.32433,0 15.06667,-6.74233 15.06667,-15.06667v-135.6c0,-8.32433 -6.74987,-15.06667 -15.06667,-15.06667z"></path>
+                                </g>
+                            </svg>
+                        </a>, 
+                        <a href="https://www.instagram.com/Meta_morpho.se" class="rs">Meta_morpho.se
+                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 226 226">
+                                <g fill="#4c8f29">
+                                    <path d="M75.31862,22.6c-29.07113,0 -52.71862,23.66938 -52.71862,52.74805v75.33333c0,29.07113 23.66938,52.71862 52.74805,52.71862h75.33333c29.07113,0 52.71862,-23.66938 52.71862,-52.74805v-75.33333c0,-29.07113 -23.66938,-52.71862 -52.74805,-52.71862zM165.73333,52.73333c4.1584,0 7.53333,3.37493 7.53333,7.53333c0,4.1584 -3.37493,7.53333 -7.53333,7.53333c-4.1584,0 -7.53333,-3.37493 -7.53333,-7.53333c0,-4.1584 3.37493,-7.53333 7.53333,-7.53333zM113,67.8c24.9278,0 45.2,20.2722 45.2,45.2c0,24.9278 -20.2722,45.2 -45.2,45.2c-24.9278,0 -45.2,-20.2722 -45.2,-45.2c0,-24.9278 20.2722,-45.2 45.2,-45.2zM113,82.86667c-16.64218,0 -30.13333,13.49115 -30.13333,30.13333c0,16.64218 13.49115,30.13333 30.13333,30.13333c16.64218,0 30.13333,-13.49115 30.13333,-30.13333c0,-16.64218 -13.49115,-30.13333 -30.13333,-30.13333z"></path>
+                                </g>
+                            </svg>
+                        </a>
                     </div>
                 </div>
             </div>
diff --git a/src/main.css b/src/main.css
index e333913..7a02ed8 100644
--- a/src/main.css
+++ b/src/main.css
@@ -11,6 +11,11 @@ body {
 	color: #444;
 }
 
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
 button, .button {
 	cursor: pointer;
 }
@@ -24,7 +29,7 @@ button, .button {
 h1 {
 	font-family: Kiona;
 	font-size: 121px;
-	letter-spacing: -5px;
+	letter-spacing: -0.047619047619047616em;
 	line-height: 0.7em;
 	margin: calc(0.8em + 5vh) auto 20px;
 	text-align: left;
@@ -183,11 +188,13 @@ header #download {
 	width: 150px;
 	border-radius: 100%;
 	overflow: hidden;
+	flex-shrink: 0;
 }
 
 .profil .role {
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 }
 
 .profil .role svg {
@@ -197,7 +204,7 @@ header #download {
 .participants {
 	display: flex;
 	justify-content: space-around;
-	margin: 4em 5em;
+	margin: 4em 5%;
 }
 
 .participants > div {
@@ -401,7 +408,7 @@ footer {
 .rs {
 	text-align: center;
 	align-items: center;
-	display: flex;
+	display: inline-flex;
 	justify-content: center;
 }
 
@@ -448,3 +455,45 @@ footer {
 	padding: 7px 0;
 	color: #111;
 }
+
+
+@media (max-width: 690px) {
+	h1 {
+		font-size: 90px;
+	}
+}
+
+@media (max-width: 660px) {
+		.profil {
+    	display: flex;
+    	width: 100%;
+    }
+
+    .profil > div:not(.img) {
+    	width: 100%;
+    	text-align: center;
+    }
+}
+
+@media (max-width: 520px) {
+	h1 {
+		font-size: 66px;
+	}
+}
+
+@media (max-width: 410px) {
+	h1 {
+		font-size: 50px;
+	}
+
+	.img {
+		height: 100px;
+		width: 100px;
+	}
+}
+
+@media (max-width: 300px) {
+	h1 {
+		font-size: 35px;
+	}
+}
\ No newline at end of file