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