From d981bfb26018d7ebd1af4beed540316a76d82791 Mon Sep 17 00:00:00 2001
From: Norore <norore@mailden.fr>
Date: Sat, 18 Jan 2020 14:41:17 +0100
Subject: [PATCH] Correction affichage sur mobile

---
 source/_asso.erb                 | 16 ++++++---
 source/stylesheets/site.css.scss | 57 ++++++++++++++++++++++++++++----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/source/_asso.erb b/source/_asso.erb
index 86d32cd..f27b185 100644
--- a/source/_asso.erb
+++ b/source/_asso.erb
@@ -12,23 +12,29 @@
 
 		<h2 class="mtm">Nous contacter</h2>
 
-		<div id="contact" class="autogrid has-gutter">
+                <div id="contact" class="autogrid has-gutter">
+                    <div>
 			<a href="mailto:bureau@passageenseine.fr" title="Courriel, ouvre une nouvelle fenêtre" alt="Courriel" target="_blank">
 				<%= svg_image_tag 'logos.svg', 'email' %>
-			</a>
+                        </a>
+                    </div>
+                    <div>
 			<a href="https://mamot.fr/@passageenseine" title="Mastodon, ouvre une nouvelle fenêtre" alt="Mastodon" target="_blank">
 				<%= svg_image_tag 'logos.svg', 'mastodon' %>
-			</a>
+                        </a>
+                    </div>
+                    <div>
 			<a href="https://twitter.com/passageenseine" title="Twitter, ouvre une nouvelle fenêtre" alt="Twitter" target="_blank">
 				<%= svg_image_tag 'logos.svg', 'twitter' %>
-			</a>
+                        </a>
+                    </div>
 		</div>
 
 		<h2 class="mtm">Nos partenaires</h2>
 
 		<div id="sponsors" class="autogrid has-gutter">
 			<% data.partners.each do |k, p| %>
-				<% content_tag :div, id: k do %>
+				<% content_tag :div do %>
 					<% link_to p.link, title: p.name, alt: p.name, target: :_blank do %>
 						<%= image_tag p.logo %>
 					<% end %>
diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss
index 7d467bf..2260f96 100644
--- a/source/stylesheets/site.css.scss
+++ b/source/stylesheets/site.css.scss
@@ -64,13 +64,12 @@ nav[role="navigation"] label.menu {
 	nav[role="navigation"] label.menu {
 		display: inline;
 		width: 100%;
-		/*font-size: 3rem;*/
-		margin-top: 1rem;
+		margin-top: .5rem;
 	}
 	nav[role="navigation"] label.menu:after {
 		position: absolute;
-		right: .25em;
-		top: 0;
+		right: 1.5rem;
+		top: 1.5rem;
 		content: "\2261";
 	}
 	nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
@@ -80,6 +79,12 @@ nav[role="navigation"] label.menu {
 		display: block;
 		font-size: 1.5rem;
 	}
+	.w50, .w60 {
+		width: 90%;
+	}
+	.pal {
+		padding: 1rem;
+	}
 }
 
 section div.descriptions {
@@ -163,10 +168,11 @@ section div.descriptions {
 }
 
 #contact svg, #sponsors img {
-	max-width: 200px;
+	max-width: 20rem;
+	max-height: 20rem;
 	background-color: $bg;
-	padding: 15px;
-	border-radius: 30px;
+	padding: 1.5rem;
+	border-radius: 3rem;
 }
 
 /* Modals */
@@ -275,6 +281,23 @@ progress {
 	}
 }
 
+@media screen and (max-width: 800px) {
+	#festival {
+		font-size: inherit;
+	}
+	[data-modal] {
+		border-radius: 2rem;
+		padding: 2rem;
+		padding-top: 4rem;
+	}
+	#contact svg, #sponsors img {
+		max-width: 10rem;
+		max-height: 10rem;
+		padding: 1rem;
+		border-radius: 1rem;
+	}
+}
+
 #needs {
 	.list {
 		display: flex;
@@ -290,3 +313,23 @@ progress {
 		}
 	}
 }
+
+@media screen and (max-width: 800px) {
+	#needs {
+		.list {
+			display: block;
+			& > ul {
+				padding-top: 1rem;
+			}
+		}
+	}
+	#location {
+		display: block;
+		padding: 2rem;
+		padding-top: 4rem;
+		& > img {
+			margin: 0;
+			padding-bottom: 2rem;
+		}
+	}
+}