(Update) Hero: Optimize spacing and padding across various screensizes

This commit is contained in:
0xfff 2016-10-09 01:20:50 +02:00
parent 77b4fdd16c
commit f68334983f
3 changed files with 37 additions and 9 deletions

View file

@ -1,6 +1,6 @@
.hero { .hero {
position: relative; position: relative;
min-height: 600px; min-height: 420px;
color: $color-white; color: $color-white;
background-image: $gradient-dash-sky; background-image: $gradient-dash-sky;
overflow: hidden; overflow: hidden;
@ -32,18 +32,19 @@
&__content { &__content {
@extend .content; // DEV: Todo @extend .content; // DEV: Todo
padding: 60px 0 120px; padding: 30px 0 120px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
z-index: 3; z-index: 3;
@include mq($from: large) { @include mq($from: large) {
padding-top: 60px;
padding-bottom: 140px; padding-bottom: 140px;
} }
@include mq($from: 1600px) { @include mq($from: 1600px) {
padding-bottom: 180px; padding-bottom: 180px;
} }
@include mq($from: 1920px) { @include mq($from: 2200px) {
padding-bottom: 240px; padding-bottom: 200px;
} }
} }
@ -61,7 +62,7 @@
&__title { &__title {
@include font-title-xxlarge(); @include font-title-xxlarge();
margin-bottom: 15px; /*optical*/ margin-bottom: 15px; /*optical*/
margin-left: -7px; /*optical*/ margin-left: -3px; /*optical*/
} }
&__lead { &__lead {
@ -92,6 +93,19 @@
&--post { &--post {
min-height: 420px; min-height: 420px;
.hero__content {
padding: 30px 0 60px;
@include mq($from: large) {
padding-bottom: 100px;
}
@include mq($from: 1600px) {
padding-top: 40px;
padding-bottom: 120px;
}
@include mq($from: 2200px) {
padding-bottom: 150px;
}
}
.hero__title { .hero__title {
@include font-title-xlarge(); @include font-title-xlarge();
margin-bottom: 9px; /*optical*/ margin-bottom: 9px; /*optical*/

View file

@ -1,16 +1,24 @@
body { body {
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
color: $color-black; color: $color-black;
background-color: $color-white; background-color: $color-white;
} }
// Acutally optimising for 4K+, pff you crazy.
@include mq($from: 3840px) {
html {
background-color: #f8f8f8;
}
body {
max-width: 3840px;
}
}
.content { .content {
width: $content-max-width; width: $content-max-width;
max-width: 96%;
max-width: calc(100% - 40px); // TODO: Refactor this. Use padding on container instead max-width: calc(100% - 40px); // TODO: Refactor this. Use padding on container instead
@media (max-width: 1024px) {
max-width: 96.1%; // at 1024px 40px is 3.9% of screen width
}
margin: 0 auto; margin: 0 auto;
} }

View file

@ -2,6 +2,12 @@ $m: 'page';
.#{$m} { .#{$m} {
padding-top: 50px; padding-top: 50px;
@include mq($from: 1800px) {
padding-top: 30px;
}
@include mq($from: 2200px) {
padding-top: 0;
}
&--post { &--post {
@include clearfix(); @include clearfix();