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 @@
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;