added caffiene free parallax effect

assets/css/base.css

@@ -230,44 +230,87 @@ template {
 -------------------------------
 **/
 html {
-  background: #113641;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
-  color: #fffacd;
-}
-a {
-  font: 300 1em $titleType;
-  color: #7ed07e;
-  text-decoration: underline;
-  -moz-transition: all 0.1s linear;
-  -webkit-transition: all 0.1s linear;
-  -o-transition: all 0.1s linear;
-  transition: all 0.1s linear;
-}
-a:hover {
-  color: #daf1da;
-  background: #113641;
 }
-svg.icons {
-  width: 20px;
-  fill: #fc6399;
+body {
+  color: #fff;
+  margin: 0;
+  padding: 0;
+  perspective: 1px;
+  transform-style: preserve-3d;
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
-.main-container {
-  margin: 0 auto;
-  z-index: 10;
+header {
+  box-sizing: border-box;
+  min-height: 100vh;
   position: relative;
+  transform-style: inherit;
+  width: 100vw;
+  text-align: center;
+  color: #fc6399;
+  text-shadow: 1px 1px 1px rgba(50,48,47,0.5);
+}
+header h1 {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.main-container header {
+header .menu {
   width: 100%;
-  height: 600px;
-  border-top: 5px #7ed07e solid;
-  border-bottom: 2px #f9690e solid;
+  text-align: left;
 }
-.main-container section {
-  overflow: hidden;
+header,
+header:before {
+  background: 50% 50%/cover;
+}
+header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  background: url("/assets/images/global/default-bg.jpg");
+  background-size: cover;
+  transform-origin: center center 0;
+  transform: translateZ(-1px) scale(2);
+  z-index: -1;
+  min-height: 100vh;
+}
+.container {
+  z-index: 2;
+  position: absolute;
+  top: 100vh;
+  background: #32302f;
+  line-height: 30px;
+  font-weight: lighter;
+  padding: 40px;
+  color: #d5cfba;
+}
+.container article {
+  min-height: 500px;
 }
-.main-container section #index-content span {
+.container article span {
   font: 600 2em/2 Helvetica, Arial, sans-serif;
-  color: #fc6399;
+  color: #f9690e;
+  text-decoration: underline;
+}
+.container footer {
+  background: #32302f;
+  border-top: 1px #7ed07e solid;
+  height: 100px;
+  padding: 20px 0 0 0;
 }
 @media only screen and (max-width: 640px) {
   .main-container .content #the-intro {
@@ -294,7 +337,7 @@ svg.icons {
     font-size: 3.3rem;
   }
   .main-container .header .header-desc span a {
-    color: #fffacd;
+    color: #d5cfba;
     width: 250px;
     font-weight: 300;
     display: inline-block;
@@ -364,7 +407,7 @@ header #header-two #the-intro {
   position: relative;
 }
 #index-display #recent-title {
-  color: #fffacd;
+  color: #d5cfba;
   font: 400 2em $titleType;
   vertical-align: top;
 }
@@ -492,7 +535,7 @@ select {
 }
 #post-content #header-post #header-one span#post-title {
   font: 200 4.5em/1em $titleType;
-  color: #fffacd;
+  color: #d5cfba;
   margin: 20px 0 0 10px;
   padding: 20px 0 80px 0;
   display: block;

assets/scripts/start.min.js

@@ -198,7 +198,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50107" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "60014" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

frame.pug

@@ -10,8 +10,14 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         meta(name="twitter:image" content=image)
         link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
     body
-      .main-container#main-content
+      .container#main-content
         block main-content
+      header
+        .menu
+          | LINKZ
+          br
+          | LINKZ
+        h1 Hello There
       script(src='/assets/scripts/start.min.js' type="text/javascript")
               
           

index.pug

@@ -1,11 +1,10 @@
 extends frame
 
 block main-content
-  header(style="background: url("+default_bg+") scroll center center / cover")
-  section#index-content
-           
-      #index-display  
-        #index-content
-          span= title
-          div !{content_index}
+  article
+    .article-content
+      span= title
+      div !{content_index}
+  footer
+    | FOOTER PIPE
         

pug.config.js

@@ -8,7 +8,7 @@ module.exports = {
 		default_bg: '/assets/images/global/default-bg.jpg',
 		default_avi: '/assets/images/global/default-avi.png',
 		content_index:
-			'Hey, welcome to the show. This is the theme kit for making cool stuff with Fipamo, the most chill blog frame work ever. Because people have better things to do than mess with complicated blog set ups.',
+			"The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
 		content_page: 'This is some page content... for your broke ass',
 		bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }]
 	}

src/styles/_colors.styl

@@ -2,5 +2,5 @@ $primary = #113641;
 $secondary = #FC6399;
 $tertiary = #F9690E;
 $highlight = #7ED07E;
-$white = #FFFACD;
+$white = #d5cfba;
 $black = #32302f;

src/styles/_mixins.styl

@@ -14,3 +14,4 @@ background-opacity(rgb-value, opacity)
 custom-header(weight, size, line-height, color)
 	font: weight size/line-height $bodyType
 	color: color
+	text-decoration: underline

src/styles/_structure.styl

@@ -1,38 +1,76 @@
 html
-  background $primary
-  font 400 1.3em/1.3em $bodyType
-  color $white
-
-a
-  font 300 1em $titleType
-  color $highlight
-  text-decoration underline
-  object-transitions(.1s)
-
-a:hover
-    color lightness($highlight, 90%)
-    background $primary
-
-svg.icons
-  width 20px
-  fill $secondary
-
-.main-container
-  margin 0 auto
-  z-index 10
-  position relative
-  header
-    width: 100%;
-    height 600px;
-    border-top 5px $highlight solid
-    border-bottom 2px $tertiary solid
-  section
+    margin 0
+    padding 0
+    width 100%
+    height 100%
     overflow hidden
-    #index-content
+    font 400 1.3em/1.3em $bodyType
+
+body
+    color white
+    margin 0
+    padding 0
+    perspective 1px
+    transform-style preserve-3d
+    height 100%
+    width 100%
+    overflow-y scroll
+    overflow-x hidden
+
+header
+    box-sizing border-box
+    min-height 100vh
+    position relative
+    transform-style inherit
+    width 100vw
+    text-align center
+    color $secondary
+    text-drop-shadow($black, .5, 1px, 1px, 1px)
+    h1
+        margin 0
+        position absolute
+        top 50%
+        left 50%
+        transform translate(-50%, -50%)
+    .menu
+      width: 100%
+      text-align: left
+header,header:before
+    background 50% 50% / cover
+
+header::before
+        content ""
+        position absolute
+        top 0
+        left 0
+        right 0
+        bottom 0
+        display block
+        background url('/assets/images/global/default-bg.jpg')
+        background-size cover
+        transform-origin center center 0
+        transform translateZ(-1px) scale(2)
+        z-index -1
+        min-height 100vh
+
+.container
+    z-index 2
+    position absolute
+    top 100vh
+    background $black
+    line-height 30px
+    font-weight lighter
+    padding 40px
+    color $white
+    article
+      min-height 500px
       span
-        custom-header(600, 2em, 2, $secondary)
-
-      div
+        custom-header(600, 2em, 2, $tertiary)
+    footer 
+      background $black
+      border-top 1px $highlight solid
+      height 100px
+      padding 20px 0 0 0