joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-26 23:06:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

24
src/scss/_hero.scss
View file

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

16
src/scss/_layout.scss
View file

@ -1,16 +1,24 @@
body {
margin: 0;
margin: 0 auto;
padding: 0;
color: $color-black;
background-color: $color-white;
}
// Acutally optimising for 4K+, pff you crazy.
@include mq($from: 3840px) {
html {
background-color: #f8f8f8;
}
body {
max-width: 3840px;
}
}
.content {
width: $content-max-width;
max-width: 96%;
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;
}

6
src/scss/_page.scss
View file

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