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;
+    }
   }
 }

public/styles/index.scss

@@ -73,6 +73,7 @@
 
 //Components
 @import './components/_body-section.scss';
+@import './components/_clear-section.scss';
 @import './components/_footer.scss';
 @import './components/_image-section.scss';
 @import './components/_page.scss';
@@ -81,6 +82,7 @@
 @import './components/_video-section.scss';
 
 //Pages
+@import './pages/_contact-page.scss';
 @import './pages/_home-page.scss';
 
 //Utilities

public/styles/objects/_background.scss

@@ -18,34 +18,9 @@
   z-index: $s-z--background;
   overflow: hidden;
 
-  //Civil Twilight
-  &--style-twilight {
-    //http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100
-    background: #bea9d0;
-    background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
-  }
-
   &__inner {
     position: relative;
     width: 100%;
     height: 100%;
-
-  }
-
-  //Elements that fill
-  &__grain {
-    @include t-absolute-fill();
-    background-image: url('./../images/grain.png');
-  }
-
-  &__palm {
-    position: absolute;
-    width: 150%;
-    bottom: -10%;
-    left: -40%;
-    @include t-drop-shadow(2.5vw, 2.5vw, 0, rgba(0, 0, 0, 0.5));
   }
 }

public/styles/objects/_navbar.scss

@@ -99,7 +99,9 @@ $o-navbar--link-thickness: 5px;
   }
 
   @include t-media-query($s-small-up) {
-    //padding: 3em;
+    &.is-stuck {
+      top: 5%;
+    }
 
     &__logo {
       width: 12em;

public/styles/pages/_contact-page.scss

@@ -0,0 +1,23 @@
+/*
+ *  Contact Page
+ *    Contact Page specific styles and designs
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/28
+ */
+.p-contact-page {
+  background-image: url('./../images/pattern_poly.svg');
+
+  &__message-element {
+    resize: none;
+  }
+
+  &__floppy {
+    width: 80%;
+    display: block;
+    margin: auto;
+    max-width: 320px;
+  }
+}