Testing some designs

public/styles/components/_clear-section.scss

@@ -0,0 +1,13 @@
+/*
+ *  Clear section
+ *    Simple section that is designed to clear pass the navbar. Can also be used
+ *    to add a little spacing between sections.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/05
+ */
+.c-clear-section {
+  height: 20vh;
+}

public/styles/components/_footer.scss

@@ -8,12 +8,15 @@
  *  Version:
  *    1.0.0 - 2018/05/16
  */
+$c-footer--shadow: 1em;
 .c-footer {
-  padding-top: 2em;
-  padding-bottom: 3em;
+  padding-top: 4em;
+  padding-bottom: 6em;
   position: relative;
   overflow: hidden;
-  background: white;
+  background-color: #F3E4C6;
+  background-image: url('./../images/grain.png');
+  @include t-box-shadow(0px, -$c-footer--shadow, $c-footer--shadow, 0px, rgba(0, 0, 0, 0.5));
 
   &__inner {
     text-align: center;
@@ -35,4 +38,12 @@
     padding-left: 1em;
    }
   }
+
+  &__part {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+  }
 }

public/styles/components/_page.scss

@@ -9,6 +9,7 @@
  *    1.0.0 - 2018/05/05
  */
 .c-page {
+  padding-bottom: 5em;
 
   &__boundary {
     max-width: $s-screen-boundary;
@@ -18,5 +19,9 @@
       position: relative;
       height: 100%;
     }
+
+    &.is-small {
+      max-width: $s-screen-boundary / 2;
+    }
   }
 }