diff --git a/_scss/base/_variables.scss b/_scss/base/_variables.scss index 1581ac0..5927b67 100644 --- a/_scss/base/_variables.scss +++ b/_scss/base/_variables.scss @@ -2,6 +2,12 @@ $body-bg: #2A2A2A; $alternate-bg: #ff5800; +$color-mine-shaft: #2A2A2A; +$color-international-orange: #ff5800; + +$background-primary: $color-mine-shaft; +$background-alternative: $color-international-orange; + /* Size */ $screen-xs: 600px !default; $screen-xs-min: $screen-xs !default; diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index 8205555..52b7717 100644 --- a/_scss/module/_indexpage.scss +++ b/_scss/module/_indexpage.scss @@ -1,33 +1,37 @@ section { min-height: 100vh; - width: 100%; + position: relative; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - background: $body-bg; - /*&:not(:first-child):before*/ &:before { - content: ""; - width: 100%; - height: 30px; - position: absolute; - top: -30px; - right: 0; - background: linear-gradient(to left bottom, $alternate-bg 0%,$alternate-bg 49%,$body-bg 50%,$body-bg 100%); - background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%); - } - &.even { - background: $alternate-bg; - &:before { - background: linear-gradient(to left bottom, $body-bg 0%,$body-bg 49%,$alternate-bg 50%,$alternate-bg 100%); - background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%); - } - } + flex-direction: column; + align-items: center; + justify-content: center; + background-color: $background-primary; + background-image: linear-gradient( + to left bottom, + $background-primary 50%, + $background-alternative 50% + ); + background-size: 100% 60px; + background-repeat: no-repeat; + background-position: bottom; + + &:nth-of-type(even) { + background-color: $background-alternative; + background-image: linear-gradient( + to left bottom, + $background-alternative 50%, + $background-primary 50% + ); + } + &:last-of-type { + background-image: none; + } +} + +section { .paragraphs { column-count: 2; - margin: 1rem 1rem 200px; h3, p { max-width: 300px; font-family: 'Roboto', sans-serif;