mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
(Update) Hero: Optimize spacing and padding across various screensizes
This commit is contained in:
parent
77b4fdd16c
commit
f68334983f
3 changed files with 37 additions and 9 deletions
|
@ -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*/
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue