styling in mobile column

src/app/app.component.html

@@ -1,16 +1,18 @@
 <div style="text-align:center">
-	<a [routerLink]="'home'"
+	<a
-				class="home_link"
+		  [routerLink]="'home'"
-				aria-roledescription="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>

src/assets/scss/_global_layout.scss

@@ -2,4 +2,11 @@
 
 body {
   background-color: #fff;
-}
+  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;
+}

src/assets/scss/atoms/_buttons.scss

@@ -20,7 +20,7 @@
 }
 
 .btn-outline {
-  // background: $light;
+  background: $white;
   border: solid 1px $primary_color;
 }
 

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;
+    }
+  }
+}

src/assets/scss/atoms/_headings.scss

@@ -1 +1,10 @@
-@charset "UTF-8";
+@charset "UTF-8";
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  border-bottom: 1px solid $primary_color;
+}

src/assets/scss/molecules/_debug.scss

@@ -1,8 +1,15 @@
-.debug{
+.debug {
-  background: #dedede;
+  font-size: 1rem;
-  margin:2em;
+  background: $dark-lavender;
+  margin: 2em;
   padding: 2em;
-  ul{
+
+  ul {
     list-style-type: none;
   }
+
+  pre {
+    font-size: 1rem;
+    padding: 0.5em;
+  }
 }

src/assets/scss/molecules/_logo.scss

@@ -1,5 +1,5 @@
 .logo_first {
-  color: $font_color;
+  color: $logo_color;
 }
 
 .logo_second {

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;
+// interpretations in app
-
+$primary_color: $sun-yellow;
-$logo_color_2: #8A9B51;
+$font_color: $black;
+$logo_color: $dark-lavender;
+$logo_color_2: $camo;