improve global display

src/app/app.component.scss

@@ -9,3 +9,7 @@ header {
     }
   }
 }
+
+i {
+  display: block;
+}

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

src/assets/scss/atoms/_headings.scss

@@ -3,6 +3,7 @@
 
 h1 {
   display: inline-block;
+  margin-bottom: 3rem;
 
   &::after {
     content: "";

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

src/assets/scss/atoms/_section.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+section {
+    & + & {
+        margin-top: 6rem;
+    }
+}

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 */
+}

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