From 56a7271325dde04724aa1648e4cb3433b56020d9 Mon Sep 17 00:00:00 2001
From: tykayn <tykayn@gmail.com>
Date: Sun, 11 Aug 2019 17:06:07 +0200
Subject: [PATCH] styling in mobile column

---
 src/app/app.component.html            | 16 +++++++++-------
 src/assets/scss/_global_layout.scss   |  9 ++++++++-
 src/assets/scss/atoms/_buttons.scss   |  2 +-
 src/assets/scss/atoms/_forms.scss     | 15 +++++++++++++++
 src/assets/scss/atoms/_headings.scss  | 11 ++++++++++-
 src/assets/scss/molecules/_debug.scss | 15 +++++++++++----
 src/assets/scss/molecules/_logo.scss  |  2 +-
 src/assets/scss/variables.scss        | 17 +++++++++++++----
 8 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 58804dc6..32ced6ff 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,16 +1,18 @@
 <div style="text-align:center">
-	<a [routerLink]="'home'"
-				class="home_link"
-				aria-roledescription="home">
+	<a
+		  [routerLink]="'home'"
+		  class="home_link"
+		  aria-roledescription="home"
+	>
 		<h1>
-			<span i18n>Bienvenue sur </span>
 			<span class="logo_first">Frama</span>
 			<span class="logo_second">date</span>
 		</h1>
+		<i i18n>
+			Ceci est une démo
+		</i>
 	</a>
-	<i i18n>
-		Ceci est une démo
-	</i>
+
 </div>
 <framadate-navigation></framadate-navigation>
 <router-outlet></router-outlet>
diff --git a/src/assets/scss/_global_layout.scss b/src/assets/scss/_global_layout.scss
index 2210bfbc..b14f4ffb 100644
--- a/src/assets/scss/_global_layout.scss
+++ b/src/assets/scss/_global_layout.scss
@@ -2,4 +2,11 @@
 
 body {
   background-color: #fff;
-}
\ No newline at end of file
+  padding: 1rem;
+}
+
+app-root {
+  max-width: 500px; // to look like the styleguide, to remove when we will have full width views
+  display: block;
+  margin: 0 auto;
+}
diff --git a/src/assets/scss/atoms/_buttons.scss b/src/assets/scss/atoms/_buttons.scss
index b8505830..37ee6a5c 100644
--- a/src/assets/scss/atoms/_buttons.scss
+++ b/src/assets/scss/atoms/_buttons.scss
@@ -20,7 +20,7 @@
 }
 
 .btn-outline {
-  // background: $light;
+  background: $white;
   border: solid 1px $primary_color;
 }
 
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
index 9aac85d5..b417d92e 100644
--- a/src/assets/scss/atoms/_forms.scss
+++ b/src/assets/scss/atoms/_forms.scss
@@ -22,3 +22,18 @@ textarea {
   margin-top: 1em;
   border-left: 3px solid $primary_color;
 }
+
+label {
+  &[for] {
+    cursor: pointer;
+  }
+
+  &:not([for]) {
+    color: $dusty-orange;
+
+    &:before {
+      content: "ce label n'a pas d'attribut for, c'est mal.";
+      color: $violet;
+    }
+  }
+}
diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss
index 03bb3631..b8042a49 100644
--- a/src/assets/scss/atoms/_headings.scss
+++ b/src/assets/scss/atoms/_headings.scss
@@ -1 +1,10 @@
-@charset "UTF-8";
\ No newline at end of file
+@charset "UTF-8";
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  border-bottom: 1px solid $primary_color;
+}
diff --git a/src/assets/scss/molecules/_debug.scss b/src/assets/scss/molecules/_debug.scss
index fee3fcca..892dfcbd 100644
--- a/src/assets/scss/molecules/_debug.scss
+++ b/src/assets/scss/molecules/_debug.scss
@@ -1,8 +1,15 @@
-.debug{
-  background: #dedede;
-  margin:2em;
+.debug {
+  font-size: 1rem;
+  background: $dark-lavender;
+  margin: 2em;
   padding: 2em;
-  ul{
+
+  ul {
     list-style-type: none;
   }
+
+  pre {
+    font-size: 1rem;
+    padding: 0.5em;
+  }
 }
diff --git a/src/assets/scss/molecules/_logo.scss b/src/assets/scss/molecules/_logo.scss
index 1b1ebd96..41ee0682 100644
--- a/src/assets/scss/molecules/_logo.scss
+++ b/src/assets/scss/molecules/_logo.scss
@@ -1,5 +1,5 @@
 .logo_first {
-  color: $font_color;
+  color: $logo_color;
 }
 
 .logo_second {
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index a1f4c378..e774d329 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -1,7 +1,16 @@
 @charset "UTF-8";
 
-$primary_color: #FFD52C;
+// colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
+$camo: #839546;
+$black: #000000;
+$sun-yellow: #ffd52c;
+$white: #ffffff;
+$dark-lavender: #7d6c99;
+$dusty-orange: #f18647;
+$violet: #bd10e0;
 
-$font_color: #000;
-
-$logo_color_2: #8A9B51;
+// interpretations in app
+$primary_color: $sun-yellow;
+$font_color: $black;
+$logo_color: $dark-lavender;
+$logo_color_2: $camo;