Last commit before refactor

public/styles/components/_background-layer.scss

@@ -0,0 +1,44 @@
+/*
+ *  Background Layer
+ *    Styles for the background layer component.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/21
+ */
+ $starSize: 1024px;
+ $starTime: 4s;
+ $starSizeMobile: 0.5;
+ $starTimeMobile: $starTime / $starSizeMobile;
+
+.c-background-layers {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  &__wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  perspective: 0px;
+}
+
+.c-background-layer {
+  width: 100%;
+  background-repeat: repeat;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  @for $i from 0 through 3 {
+    &--stars-#{$i} {
+      height: 200% + (50% * $i);
+      background-image: url('./../images/stars#{$i}.png');
+    }
+  }
+}

public/styles/components/_footer.scss

@@ -12,13 +12,14 @@
  */
 $c-footer--text-color: $s-color--text;
 $c-footer--background-color: $s-color--background-default;
-
+$c-footer--z-index: 10;//Should render over most if not all body elements
 
 .c-footer {
   width: 100%;
   background: $c-footer--background-color;
   @extend %t-flexbox;
   @include t-flex-wrap(wrap);
+  z-index: $c-footer--z-index;
 }
 
 .c-footer__copyright {

public/styles/components/_page.scss

@@ -12,7 +12,13 @@
 .c-page {
   min-height: 100%;
   @include t-flex-grow(1);
-  @include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
+  //@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
   padding-bottom: 5em;
-  background-attachment: fixed;
+
+  //background-attachment: fixed;
+  //background-color: #000019;
+  //background-image: url('./../images/space.png');
+  //background-repeat: repeat-x;
+  //background-position: center bottom;
+  //background-size: (16px / 1) (384px / 1);
 }

public/styles/components/_section--style-three.scss

@@ -17,8 +17,7 @@
 
 .c-section--style-three__canvas {
   width: 100%;
-  height: 100%;
-  height: 80vmin;
+  height: 100vh;
   top: 0;
   left: 0;
   position: absolute;

public/styles/components/_section.scss

@@ -15,6 +15,7 @@
   max-width: $s-layout--page-max;
   z-index: 1;
   position:relative;
+  margin: 0 auto;
 }
 
 .c-section--full-width {

public/styles/index.scss

@@ -46,6 +46,7 @@
 
 //Components
 @import './components/_app.scss';
+@import './components/_background-layer';
 @import './components/_footer.scss';
 @import './components/_form.scss';
 @import './components/_header.scss';