From f68334983feafcbc846c6cc60741b55b5a720810 Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Sun, 9 Oct 2016 01:20:50 +0200
Subject: [PATCH] (Update) Hero: Optimize spacing and padding across various
 screensizes

---
 src/scss/_hero.scss   | 24 +++++++++++++++++++-----
 src/scss/_layout.scss | 16 ++++++++++++----
 src/scss/_page.scss   |  6 ++++++
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss
index f5a014d..c996bd3 100644
--- a/src/scss/_hero.scss
+++ b/src/scss/_hero.scss
@@ -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*/
diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
index 48b2c48..83f1535 100644
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@@ -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;
 }
 
diff --git a/src/scss/_page.scss b/src/scss/_page.scss
index 6aa52fd..98c531e 100644
--- a/src/scss/_page.scss
+++ b/src/scss/_page.scss
@@ -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();