Added styles from production site

public/scripts/vorkath.coffee

@@ -1,2 +1,17 @@
-$ ->
-	console.log('This is a test.')
+$(window).scroll ->
+  wScroll = $(this).scrollTop()
+
+  console.log(wScroll + ' | ' + window.innerHeight)
+
+  # Header parallax
+  $('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')
+  $('#header-logo h1').css('transform', 'translateY(-' + (wScroll / 2) + 'px)')
+
+  # YouTube section parallax
+  if not (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+    $('.youtube-section').each (i, e) ->
+      if wScroll >= ($(e).offset().top - window.innerHeight)
+        offset = (Math.min(0, wScroll - $(e).offset().top + window.innerHeight - 500)).toFixed()
+
+        $(e).find('.video-card:first-child').css('transform': 'translate(' + offset + 'px, ' + Math.abs(offset * 0.2) + 'px)')
+        $(e).find('.video-card:last-child').css('transform': 'translate(' + Math.abs(offset) + 'px, ' + Math.abs(offset * 0.2) + 'px)')

public/stylesheets/_variables.sass

@@ -0,0 +1,4 @@
+$footer-height: 165px
+
+$color-primary: #1e76d1
+$color-primary-hover: darken(#1e76d1, 10%)

public/stylesheets/zulrah.sass

@@ -1,2 +1,155 @@
+@import "_variables"
+
 body
-  background: grey
+  height: auto
+  font-family: "Gill Sans", sans-serif
+  font-size: 2rem
+  margin: 0
+  padding-bottom: $footer-height
+
+a
+  color: $color-primary
+  font-weight: 500
+  text-decoration: none
+  transition: color 300ms ease-in-out
+  &:hover
+    color: $color-primary-hover
+
+hr
+  margin-top: 35px
+  margin-bottom: 35px
+
+.u-text-center
+  text-align: center
+
+// this wrapper is only used to hide the footer
+#wrapper
+  position: relative
+  z-index: 10
+  width: 100%
+  margin: 0
+  padding: 0
+  background: white
+
+// header
+
+#header-box
+  position: relative
+  z-index: 2
+  height: 500px
+  background:
+    image: url(/assets/images/bg-banner.jpg)
+    size: auto 600px
+    position: top center
+    attachment: fixed
+  overflow: hidden
+
+#header-logo
+  height: 350px
+  width: 350px
+  background:
+    image: url(/assets/images/bg-icon.png)
+    position: center
+    repeat: no-repeat
+    size: contain
+  position: absolute
+  top: 40px
+  left: 50%
+  transform: translateX(-50%)
+
+  h1
+    margin-top: calc(100% + 25px)
+    color: white
+    font:
+      weight: bold
+    text-align: center
+
+#navigation
+  width: 100%
+  margin-top: 40px
+  margin-bottom: 40px
+  text-align: center
+
+  ul
+    list-style: none
+
+    li
+      display: inline-block
+      margin: 0
+      padding: 0
+      border-radius: 10px
+      font-size: 3rem
+      transition: all 300ms ease-in-out
+      &:hover
+        background: rgba(#000000, 0.1)
+        margin-left: 25px
+        margin-right: 25px
+        transform: scale(1.1)
+      a
+        padding: 20px 30px
+        text-decoration: underline
+
+#main-content
+  padding-bottom: 40px
+
+// home page styles
+
+.youtube-section
+  @media only screen and (min-device-width: 960px)
+    .row
+      position: relative
+      .video-card:nth-child(1)
+        transform: translate(100px, 20px)
+      .video-card:nth-child(2)
+        position: relative
+        z-index: 20
+      .video-card:nth-child(3)
+        transform: translate(-100px, 20px)
+
+  .video-card a
+    display: block
+    margin-bottom: 25px
+    padding: 15px 20px 0
+    background: white
+    border: 2px solid #bbb
+
+    img, p
+      transition: all 300ms ease-in-out
+
+    &:hover
+      img
+        transform: scale(1.1)
+
+      p
+        transform: translate(20px, 10px) scale(1.1)
+
+// Blog posts page
+
+#post-list
+  list-style: none
+
+  li
+    padding: 15px 20px 0
+    border: 2px solid #bbb
+
+  .post-title
+    margin-bottom: 3px
+
+  .post-info
+    color: #999
+
+  .post-body
+    margin-bottom: 0
+
+// footer section
+
+#footer
+  box-sizing: border-box
+  position: fixed
+  z-index: -1
+  bottom: 0
+  width: 100%
+  height: $footer-height
+  padding-top: 35px
+  background: #212121
+  color: white