Made the featured YouTube video links land on the page while scrolling down

src/assets/scripts/varrock.coffee

@@ -4,6 +4,15 @@
 $(window).scroll ->
   wScroll = $(this).scrollTop()
 
-  # Header stuff
+  # 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).height())
+        offset = (Math.min(0, wScroll - $(e).offset().top + $(window).height() - 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)')

src/assets/stylesheets/lumbridge.sass

@@ -95,10 +95,22 @@ hr
 // 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
@@ -138,6 +150,6 @@ hr
   bottom: 0
   width: 100%
   height: $footer-height
-  padding-top: 25px
+  padding-top: 35px
   background: #212121
   color: white