From bf2bddeb32d8675aa98f7b3ec0d4da8db2e56cf9 Mon Sep 17 00:00:00 2001
From: maxime_senza <maxime@happy-dev.fr>
Date: Fri, 29 May 2020 00:28:53 +0200
Subject: [PATCH] feature : css for about page : colors & make clean on mobile

---
 src/page-about.pug         |  2 +-
 src/styles/base/about.scss | 29 +++++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/page-about.pug b/src/page-about.pug
index ae58d0d..39f42f1 100644
--- a/src/page-about.pug
+++ b/src/page-about.pug
@@ -13,5 +13,5 @@
 				h3 Contacte-nous
 				p Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ? 
 
-				div
+				sib-link.main-cta
 					p Contact 
\ No newline at end of file
diff --git a/src/styles/base/about.scss b/src/styles/base/about.scss
index 40691c1..c202d11 100644
--- a/src/styles/base/about.scss
+++ b/src/styles/base/about.scss
@@ -1,9 +1,14 @@
 #about{
+	$main-color: rgb(236, 94, 92);
+	$second-color: white;
 	h2,h3{
 		text-transform: uppercase;
 	}
 	.flex-content-white{ 
 		display: flex;
+		@media only screen and (max-width: 768px) {
+        	flex-direction: column;
+        }
 		>div{
 			padding: 4.2em 4.7em; 
 			text-align: center;
@@ -16,12 +21,32 @@
 				justify-content: space-between;
 			}
 		}
-
 		>div:first-child{
-			width: 100%;
+			width: 60%;
 		}
 		>div:last-child{
 			width: 35%;
+			@media only screen and (max-width: 768px) {
+	         	width: 60%;
+	        }
 		}
 	}
+
+	.main-cta{
+		background: $second-color none repeat scroll 0% 0%;
+		border: 1px solid $main-color;
+		border-radius: 55px;
+		color: $main-color;
+		cursor: pointer;
+		font-weight: bold;
+		text-transform: uppercase;
+		width: 25%;
+		font-size: 1rem;
+	}
+
+	.main-cta:hover{
+		background: $main-color none repeat scroll 0% 0%;
+		border : 1px solid $second-color;
+		color: $second-color;
+	}
 }
\ No newline at end of file