From 74285393d885870340ecb60a6d8b79f360abfaea Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Mon, 12 Aug 2019 12:43:53 +0200
Subject: [PATCH] improve global display

---
 src/app/app.component.scss                    |  4 ++++
 .../ui/navigation/navigation.component.scss   | 19 ++++++++++++++++++-
 src/assets/scss/atoms/_headings.scss          |  1 +
 .../{_global_layout.scss => atoms/_main.scss} | 10 +++-------
 src/assets/scss/atoms/_section.scss           |  7 +++++++
 src/assets/scss/default.scss                  |  6 ++++++
 src/styles.scss                               |  4 +++-
 7 files changed, 42 insertions(+), 9 deletions(-)
 rename src/assets/scss/{_global_layout.scss => atoms/_main.scss} (61%)
 create mode 100644 src/assets/scss/atoms/_section.scss
 create mode 100644 src/assets/scss/default.scss

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index feca0e40..68a285a8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -9,3 +9,7 @@ header {
     }
   }
 }
+
+i {
+  display: block;
+}
\ No newline at end of file
diff --git a/src/app/ui/navigation/navigation.component.scss b/src/app/ui/navigation/navigation.component.scss
index 5048ee17..87f2205e 100644
--- a/src/app/ui/navigation/navigation.component.scss
+++ b/src/app/ui/navigation/navigation.component.scss
@@ -1,10 +1,27 @@
 @charset "UTF-8";
 
 nav {
+  text-align: center;
+  margin-bottom: 3.2rem;
+  padding-top: 1.6rem;
+  padding-bottom: 1.6rem;
+  border-top: 2px solid #ffd52c;
+  border-bottom: 2px solid #ffd52c;
+
   a {
-    &::before,
+    &::before {
+      display: inline-block;
+      position: relative;
+      width: auto;
+      background: none;
+    }
     &::after {
       display: none;
     }
+
+    &:not(:first-of-type)::before {
+      content: ' | ';
+      
+    }
   }
 }
diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss
index fe2a91f8..6bfe0bb7 100644
--- a/src/assets/scss/atoms/_headings.scss
+++ b/src/assets/scss/atoms/_headings.scss
@@ -3,6 +3,7 @@
 
 h1 {
   display: inline-block;
+  margin-bottom: 3rem;
 
   &::after {
     content: "";
diff --git a/src/assets/scss/_global_layout.scss b/src/assets/scss/atoms/_main.scss
similarity index 61%
rename from src/assets/scss/_global_layout.scss
rename to src/assets/scss/atoms/_main.scss
index c813a300..cb902305 100644
--- a/src/assets/scss/_global_layout.scss
+++ b/src/assets/scss/atoms/_main.scss
@@ -1,13 +1,9 @@
 @charset "UTF-8";
 
-
-html { 
-  font-size: 62.5%; /* 10px */
-  font-size: calc(1em * 0.625); /* fix */
-}
-
-app-root {
+main {
   max-width: 500px; // to look like the styleguide, to remove when we will have full width views
+  width: 100%;
   display: block;
   margin: 0 auto;
+  padding: 0 1.2rem;
 }
diff --git a/src/assets/scss/atoms/_section.scss b/src/assets/scss/atoms/_section.scss
new file mode 100644
index 00000000..a07953ea
--- /dev/null
+++ b/src/assets/scss/atoms/_section.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+section {
+    & + & {
+        margin-top: 6rem;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/scss/default.scss b/src/assets/scss/default.scss
new file mode 100644
index 00000000..c8273a42
--- /dev/null
+++ b/src/assets/scss/default.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+html { 
+  font-size: 62.5%; /* 10px */
+  font-size: calc(1em * 0.625); /* fix */
+}
diff --git a/src/styles.scss b/src/styles.scss
index 2ed2020c..2705b3d7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "assets/scss/variables";
-@import "assets/scss/global_layout";
+@import "assets/scss/default";
 
+@import "assets/scss/atoms/main";
+@import "assets/scss/atoms/section";
 @import "assets/scss/atoms/fonts";
 @import "assets/scss/atoms/headings";
 @import "assets/scss/atoms/buttons";