diff --git a/app/assets/scss/modules/_arrow.scss b/app/assets/scss/modules/_arrow.scss index 47b4c80..43c8ab2 100644 --- a/app/assets/scss/modules/_arrow.scss +++ b/app/assets/scss/modules/_arrow.scss @@ -1,85 +1,84 @@ -.arrow{ - width: 0; - height: 0; - border-left: 70px solid transparent; - border-right: 70px solid transparent; +.arrow { + width: 0; + height: 0; + border-left: 70px solid transparent; + border-right: 70px solid transparent; - &--about{ - position: absolute; - bottom: -60px; - z-index: 1; - left: 50%; - transform:translateX(-50%); + &--about { + position: absolute; + bottom: -60px; + z-index: 1; + left: 50%; + transform: translateX(-50%); - @include atMedium{ - position: relative; - bottom: -40px; - left: 50%; - transform: translateX(-50%); - } + @include atMedium { + position: relative; + bottom: -40px; + left: 50%; + transform: translateX(-50%); + } - @include atLarge{ - position: relative; - bottom: -60px; - left: 50%; - transform: translateX(-50%); - } - } + @include atLarge { + position: relative; + bottom: -55px; + left: 50%; + transform: translateX(-50%); + } + } - &--how-it-works-1{ - position: absolute; - bottom: -60px; - z-index: 1; - left: 50%; - transform:translateX(-50%); + &--how-it-works-1 { + position: absolute; + bottom: -60px; + z-index: 1; + left: 50%; + transform: translateX(-50%); - @include atMedium{ - position: relative; - bottom: 0px; - left: 50%; - transform: translateX(-50%); - } + @include atMedium { + position: relative; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + } - @include atLarge{ - position: relative; - bottom: 0px; - left: 70%; - transform: translateX(-50%); - } - } + @include atLarge { + position: relative; + bottom: 0px; + left: 70%; + transform: translateX(-50%); + } + } - &--how-it-works-2{ - position: absolute; - bottom: -60px; - z-index: 1; - left: 50%; - transform:translateX(-50%); + &--how-it-works-2 { + position: absolute; + bottom: -60px; + z-index: 1; + left: 50%; + transform: translateX(-50%); - @include atMedium{ - position: relative; - bottom: 0px; - left: 50%; - transform: translateX(-50%); - } + @include atMedium { + position: relative; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + } - @include atLarge{ - position: relative; - bottom: 0px; - left: 50%; - transform: translateX(-50%); - } - } + @include atLarge { + position: relative; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + } + } - &--red{ - border-top: 85px solid $myRed; - } + &--red { + border-top: 85px solid $myRed; + } - &--darkGreen{ - border-top: 85px solid $myDarkGreen; - } + &--darkGreen { + border-top: 85px solid $myDarkGreen; + } - &--lightGreen{ - border-top: 85px solid $myLightGreen; - } - -} \ No newline at end of file + &--lightGreen { + border-top: 85px solid $myLightGreen; + } +} diff --git a/app/assets/scss/modules/_rows.scss b/app/assets/scss/modules/_rows.scss index 5f9f3c8..b906aa2 100644 --- a/app/assets/scss/modules/_rows.scss +++ b/app/assets/scss/modules/_rows.scss @@ -1,74 +1,70 @@ -.row{ +.row { + @include clearfix(); - @include clearfix(); + &--large-only { + display: none; - &--large-only{ - display: none; + @include atLarge { + display: inline-block; + } + } - @include atLarge{ - display: inline-block; - } - } + &--gutters { + margin-right: -60px; + margin-bottom: 15px; + } - &--gutters { - margin-right: -60px; - } + &--gutters > div { + padding-right: 60px; + } - &--gutters > div { - padding-right: 60px; - } + @include atLarge() { + &__medium-3--larger { + float: left; + width: 30%; + } - @include atLarge(){ + &__medium-4 { + float: left; + width: 33.33%; + } - &__medium-3--larger { - float: left; - width: 30%; - } + &__medium-6 { + float: left; + width: 50%; + } - &__medium-4 { - float: left; - width: 33.33%; - } + &__medium-8 { + float: right; + width: 66.66%; + } - &__medium-6 { - float: left; - width: 50%; - } + &__medium-9--smaller { + float: right; + width: 70%; + } + } - &__medium-8 { - float: right; - width: 66.66%; - } + /* Begin Equal Height Rules */ + .flexbox &--equal-height-at-medium { + @include atMedium() { + display: flex; + } - &__medium-9--smaller { - float: right; - width: 70%; - } + & > div { + float: none; + display: flex; + } + } - } - - /* Begin Equal Height Rules */ - .flexbox &--equal-height-at-medium { + .flexbox &--equal-height-at-large { + @include atMedium() { + display: flex; + } - @include atMedium(){ - display: flex; - } - - & > div { - float: none; - display: flex; - } - } - - .flexbox &--equal-height-at-large { - - @include atMedium(){ - display: flex; - } - - & > div { - float: none; - display: flex; - } - } -} \ No newline at end of file + & > div { + float: none; + display: flex; + } + } +} diff --git a/app/assets/scss/modules/_video-container.scss b/app/assets/scss/modules/_video-container.scss index d6e3960..acd7879 100644 --- a/app/assets/scss/modules/_video-container.scss +++ b/app/assets/scss/modules/_video-container.scss @@ -1,32 +1,31 @@ .video-container { - position:relative; - padding-bottom:63.15%; - height:0; - overflow:hidden; - box-shadow: -3px 3px 10px #000000ba; - margin-right: -18px; - margin-left: -18px; + position: relative; + padding-bottom: 63.15%; + height: 0; + overflow: hidden; + box-shadow: -3px 3px 10px #000000ba; + margin-right: -18px; + margin-left: -18px; - @include atSmall{ - padding-bottom:60%; - } + @include atSmall { + padding-bottom: 60%; + } - @include atMedium{ - padding-bottom:59%; - } + @include atMedium { + padding-bottom: 59%; + } - - @include atLarge{ - padding-bottom:56.25%; - margin-right: 0px; - margin-left: 0px; - } + @include atLarge { + padding-bottom: 54.5%; + margin-right: 0px; + margin-left: 0px; + } } -.video-container video{ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; +.video-container video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } diff --git a/app/en/index.html b/app/en/index.html index 6ec10b7..898ef95 100644 --- a/app/en/index.html +++ b/app/en/index.html @@ -86,10 +86,7 @@
- +
diff --git a/app/index.html b/app/index.html index 24bcc34..635957a 100644 --- a/app/index.html +++ b/app/index.html @@ -4,19 +4,9 @@ Biobulkbende - - - + + + @@ -29,26 +19,17 @@
- Netherlands flag + Netherlands flag