diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html
index 65bbdc4d..9cbaff0c 100644
--- a/src/app/pages/answers/answers.component.html
+++ b/src/app/pages/answers/answers.component.html
@@ -1,11 +1,12 @@
diff --git a/src/assets/_global_layout.scss b/src/assets/_global_layout.scss
deleted file mode 100644
index 065f327b..00000000
--- a/src/assets/_global_layout.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// form inputs
-.funky-box {
- background: $light;
- padding: 1em;
- border-radius: 0.25em;
- border: 1px solid $main_color;
- border-bottom: 3px solid $main_color_strong;
-
- &:focus {
- color: $main_color_strong;
- }
-}
-
-input, textarea,
-select {
- @extend .funky-box;
-}
-
-textarea {
- margin-top: 1em;
- border-left: 3px solid $main_color_strong;
-}
-
-
-// buttons
-.btn {
- display: inline-block;
- padding: 1em;
- border-radius: 0.25em;
- background: $main_color_strong;
- color: $light;
- border: 0;
- margin: 1em;
- min-height: 1.5rem;
-}
-
-.btn-block {
- display: block;
- font-weight: 600;
- font-size: 1.25em;
- text-align: center;
-}
-
-a {
- text-decoration: none;
-
- nav & {
-
- @extend .btn-outline, .btn;
- display: inline-block;
- margin: 0.5em;
- padding: 0.5em;
- color: #000;
- font-size: 1rem;
- }
-}
-
-.home_link {
- text-decoration: none;
-}
-
-.btn-outline {
- background: $light;
- border: solid 1px $main_color_strong;
-}
-
-.striked {
- @extend .btn-outline;
- color: $main_color_strong;
-}
diff --git a/src/assets/fonts/.gitkeep b/src/assets/fonts/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/fonts/PT_Sans/.gitkeep b/src/assets/fonts/PT_Sans/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/fonts/PT_Sans/PT_Sans_Bold.ttf b/src/assets/fonts/PT_Sans/PT_Sans_Bold.ttf
new file mode 100644
index 00000000..d288c1d8
Binary files /dev/null and b/src/assets/fonts/PT_Sans/PT_Sans_Bold.ttf differ
diff --git a/src/assets/fonts/PT_Sans/PT_Sans_Regular.ttf b/src/assets/fonts/PT_Sans/PT_Sans_Regular.ttf
new file mode 100644
index 00000000..ed0372db
Binary files /dev/null and b/src/assets/fonts/PT_Sans/PT_Sans_Regular.ttf differ
diff --git a/src/assets/fonts/Proza_Libre/.gitkeep b/src/assets/fonts/Proza_Libre/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/fonts/Proza_Libre/ProzaLibre-Bold.ttf b/src/assets/fonts/Proza_Libre/ProzaLibre-Bold.ttf
new file mode 100644
index 00000000..d6fbf7dd
Binary files /dev/null and b/src/assets/fonts/Proza_Libre/ProzaLibre-Bold.ttf differ
diff --git a/src/assets/fonts/Proza_Libre/ProzaLibre-Medium.ttf b/src/assets/fonts/Proza_Libre/ProzaLibre-Medium.ttf
new file mode 100644
index 00000000..55056826
Binary files /dev/null and b/src/assets/fonts/Proza_Libre/ProzaLibre-Medium.ttf differ
diff --git a/src/assets/fonts/Proza_Libre/ProzaLibre-Regular.ttf b/src/assets/fonts/Proza_Libre/ProzaLibre-Regular.ttf
new file mode 100644
index 00000000..7f991752
Binary files /dev/null and b/src/assets/fonts/Proza_Libre/ProzaLibre-Regular.ttf differ
diff --git a/src/assets/fonts/Proza_Libre/ProzaLibre-SemiBold.ttf b/src/assets/fonts/Proza_Libre/ProzaLibre-SemiBold.ttf
new file mode 100644
index 00000000..2a9a38d1
Binary files /dev/null and b/src/assets/fonts/Proza_Libre/ProzaLibre-SemiBold.ttf differ
diff --git a/src/assets/scss/_global_layout.scss b/src/assets/scss/_global_layout.scss
new file mode 100644
index 00000000..2210bfbc
--- /dev/null
+++ b/src/assets/scss/_global_layout.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+body {
+ background-color: #fff;
+}
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_buttons.scss b/src/assets/scss/atoms/_buttons.scss
new file mode 100644
index 00000000..b8505830
--- /dev/null
+++ b/src/assets/scss/atoms/_buttons.scss
@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+// buttons
+.btn {
+ display: inline-block;
+ padding: 1em;
+ border-radius: 0.25em;
+ background: $primary_color;
+ // color: $light;
+ border: 0;
+ margin: 1em;
+ min-height: 1.5rem;
+}
+
+.btn-block {
+ display: block;
+ font-weight: 600;
+ font-size: 1.25em;
+ text-align: center;
+}
+
+.btn-outline {
+ // background: $light;
+ border: solid 1px $primary_color;
+}
+
+.striked {
+ @extend .btn-outline;
+ color: $primary_color;
+}
diff --git a/src/assets/_font.scss b/src/assets/scss/atoms/_fonts.scss
similarity index 67%
rename from src/assets/_font.scss
rename to src/assets/scss/atoms/_fonts.scss
index 6c1bb39d..f6c59b0b 100644
--- a/src/assets/_font.scss
+++ b/src/assets/scss/atoms/_fonts.scss
@@ -1,7 +1,15 @@
+@charset "UTF-8";
+
body {
font-family: "DejaVu Sans Light", "Arial", "DejaVu Sans Mono";
+ font-size: 1.4rem;
}
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
font-family: "Brie Light", "Arial", "DejaVu Sans Mono";
}
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
new file mode 100644
index 00000000..9aac85d5
--- /dev/null
+++ b/src/assets/scss/atoms/_forms.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// form inputs
+.funky-box {
+ // background: $light;
+ padding: 1em;
+ border-radius: 0.25em;
+ border-bottom: 3px solid $primary_color;
+
+ &:focus {
+ color: $primary_color;
+ }
+}
+
+input,
+textarea,
+select {
+ @extend .funky-box;
+}
+
+textarea {
+ margin-top: 1em;
+ border-left: 3px solid $primary_color;
+}
diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_headings.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_images.scss b/src/assets/scss/atoms/_images.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_images.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_links.scss b/src/assets/scss/atoms/_links.scss
new file mode 100644
index 00000000..0148c21f
--- /dev/null
+++ b/src/assets/scss/atoms/_links.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+a {
+ text-decoration: none;
+
+ nav & {
+ @extend .btn-outline, .btn;
+ display: inline-block;
+ margin: 0.5em;
+ padding: 0.5em;
+ color: #000;
+ font-size: 1rem;
+ }
+}
+
+.home_link {
+ text-decoration: none;
+}
diff --git a/src/assets/scss/atoms/_lists.scss b/src/assets/scss/atoms/_lists.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_lists.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/_debug.scss b/src/assets/scss/molecules/_debug.scss
similarity index 100%
rename from src/assets/_debug.scss
rename to src/assets/scss/molecules/_debug.scss
diff --git a/src/assets/_logo.scss b/src/assets/scss/molecules/_logo.scss
similarity index 72%
rename from src/assets/_logo.scss
rename to src/assets/scss/molecules/_logo.scss
index 41ee0682..1b1ebd96 100644
--- a/src/assets/_logo.scss
+++ b/src/assets/scss/molecules/_logo.scss
@@ -1,5 +1,5 @@
.logo_first {
- color: $logo_color;
+ color: $font_color;
}
.logo_second {
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
new file mode 100644
index 00000000..a1f4c378
--- /dev/null
+++ b/src/assets/scss/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+$primary_color: #FFD52C;
+
+$font_color: #000;
+
+$logo_color_2: #8A9B51;
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
deleted file mode 100644
index 9bff7463..00000000
--- a/src/assets/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$main_color: #fdffbf;
-$main_color_strong: #FFD52C;
-$second_color: cyan;
-$light: white;
-
-$logo_color: #000;
-$logo_color_2: #8A9B51;
diff --git a/src/styles.scss b/src/styles.scss
index de03bb14..2ed2020c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,14 @@
/* You can add global styles to this file, and also import other style files */
-@import "assets/variables";
-@import "assets/font";
-@import "assets/global_layout";
-@import "assets/logo";
-@import "assets/debug";
+@import "assets/scss/variables";
+@import "assets/scss/global_layout";
+
+@import "assets/scss/atoms/fonts";
+@import "assets/scss/atoms/headings";
+@import "assets/scss/atoms/buttons";
+@import "assets/scss/atoms/links";
+@import "assets/scss/atoms/forms";
+@import "assets/scss/atoms/lists";
+@import "assets/scss/atoms/images";
+
+@import "assets/scss/molecules/logo";
+@import "assets/scss/molecules/debug";