From 4719175af7cde9dedd010c436fc272f6c119dba8 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Fri, 29 Jun 2018 15:41:12 +0200
Subject: [PATCH] =?UTF-8?q?:art:=20empeche=20l'effet=20'FOUC'=20et=20am?=
 =?UTF-8?q?=C3=A9liore=20la=20page=20d'accueil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                 |  5 ++++
 source/components/inFranceApp/Landing.css  | 28 +++++++++++++++++-----
 source/components/inFranceApp/ui/index.css |  4 ++++
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 221dbf364..e2297276b 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,11 @@
 	<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
 	<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
 	<link rel="manifest" href="/manifest.webmanifest">
+	<style>
+		#js {
+			display: none
+		}
+	</style>
 	<meta name="theme-color" content="#2975d1">
 </head>
 
diff --git a/source/components/inFranceApp/Landing.css b/source/components/inFranceApp/Landing.css
index 9b87b7590..a14807772 100644
--- a/source/components/inFranceApp/Landing.css
+++ b/source/components/inFranceApp/Landing.css
@@ -3,7 +3,16 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 2rem;
+}
+
+@media (min-width: 500px) {
+	.landing__header {
+		padding: 1.75rem;
+	}
+	.landing__banner {
+		border-top-left-radius: 0.7rem;
+		border-top-right-radius: 0.7rem;
+	}
 }
 .landing__header h1 {
 	color: inherit;
@@ -11,15 +20,17 @@
 
 .landing__header header {
 	text-align: center;
+	animation: fade-in 1s;
+
 	background: linear-gradient(
-		227deg,
+		80deg,
 		rgba(39, 69, 195, 0.87) 10%,
 		rgba(41, 117, 209, 1) 60%,
 		rgba(200, 40, 120, 0.52) 100%
 	);
 	color: white;
 
-	border: 1px solid rgba(255, 255, 255, 0.9);
+	border: 1px solid rgba(255, 255, 255, 1);
 	padding: 1rem;
 }
 .landing__header ul {
@@ -38,14 +49,19 @@
 .landing__banner {
 	height: 100px;
 	width: 100%;
-	opacity: 0.9;
 	display: flex;
 	justify-content: space-between;
 	background: white;
-	border-top-left-radius: 0.7rem;
-	border-top-right-radius: 0.7rem;
 	padding: 1rem;
 }
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
 /* Pris sur urssaf.fr */
 @media (min-width: 1200px) {
 	.landing__banner,
diff --git a/source/components/inFranceApp/ui/index.css b/source/components/inFranceApp/ui/index.css
index ad47f166b..30df99093 100644
--- a/source/components/inFranceApp/ui/index.css
+++ b/source/components/inFranceApp/ui/index.css
@@ -27,3 +27,7 @@ body {
 ul.ui__.no-bullet {
 	list-style: none;
 }
+
+#js {
+	display: block;
+}