Fix footer position on blog/404

Also makes the branding colour (the blue) a variable `brand-color`.

Signed-off-by: John McCabe <john@johnmccabe.net>

404.html

@@ -3,5 +3,5 @@
 description: This page doesn't exist!
 image: https://source.unsplash.com/BcoGknSqlDc/2000x1322?a=.png
 permalink: /404.html
-layout: page
+layout: fullpage
 ---

_layouts/archive.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<!-- <section class="hero" style="background-image: url(https://source.unsplash.com/MqJX_8EaStM/2000x1322)"> -->
+<div class="full">
 <section class="hero">
 	<div class="inner-hero text-container">
 		<div class="hero-text-container">
@@ -21,3 +21,4 @@ <h1>The latest news</h1>
 		</ul>
 	</div>
 </section>
+</div>

_layouts/fullpage.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<!-- <section class="hero" style="background-image: url({% include relative-src.html src=page.image %})"> -->
+<section class="hero full" {% include relative-post-hero.html src=page.image %}>
+		<div class="inner-hero text-container">
+		<div class="hero-text-container">
+			<h1>{{ page.title }}</h1>
+			<p class="subtext">{{ page.description }}</p>
+		</div>
+	</div>
+</section>
+
+{{ content }}

_sass/landing-page.scss

@@ -3,7 +3,7 @@
 	text-align: center;
 	height: 45vh;
 	min-height: 550px;
-	background: rgba(69,99,221,1);
+	background: $brand-color;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center center;
@@ -42,6 +42,12 @@
 	}
 }
 
+
+.full {
+	min-height: calc(100vh - 53px);
+	background-color: #f9f9f9;
+}
+
 .image {
 	text-align: center;
 }

_sass/openfaas-landing/landing.scss

@@ -107,7 +107,7 @@ footer {
 		width: 100%;
 		height: 100%;
 		position: absolute;
-		background: rgba(69,99,221,1);
+		background: $brand-color;
 		z-index: 2;
 	}
 	#whale {

_sass/variables.scss

@@ -1,4 +1,4 @@
-$brand-color: #6ba1f3;
+$brand-color: rgba(69,99,221,1);
 
 // Breakpoints
 $tablet: "(min-width: 450px)";

blog/index.html

@@ -4,7 +4,8 @@
 image: https://source.unsplash.com/MqJX_8EaStM/2000x1322?a=.png
 ---
 
-<!-- <section class="hero" style="background-image: url({% include relative-src.html src=page.image %})"> -->
+
+<div class="full">
 <section class="hero">
 	<div class="inner-hero text-container">
 		<div class="hero-text-container">
@@ -35,3 +36,4 @@ <h1 class="editable">The latest news</h1>
 		{% endif %}
 	</div>
 </section>
+</div>

css/openfaas.scss

@@ -1,5 +1,6 @@
 ---
 ---
+@import "variables";
 @import "openfaas-landing/foundation";
 @import "openfaas-landing/mixins/landing";
 @import "openfaas-landing/fonts";