From 31b63accd4e94815bdce36eede029627cce18455 Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine@metaunix.net>
Date: Sat, 21 Aug 2021 01:44:21 -0400
Subject: [PATCH] Made the featured YouTube video links land on the page while
 scrolling down

---
 src/assets/scripts/varrock.coffee     | 11 ++++++++++-
 src/assets/stylesheets/lumbridge.sass | 14 +++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/assets/scripts/varrock.coffee b/src/assets/scripts/varrock.coffee
index 161dc70..e5c2b26 100644
--- a/src/assets/scripts/varrock.coffee
+++ b/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)')
diff --git a/src/assets/stylesheets/lumbridge.sass b/src/assets/stylesheets/lumbridge.sass
index af3381e..3862bb4 100644
--- a/src/assets/stylesheets/lumbridge.sass
+++ b/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