Remove max-height styling for slick carousel, add scroll down button

Removes the max-height styling for the scrolling carousel.

Adds the carousel scroll down button, which solves the design issue
of images taking up the whole page (which upon first viewing might
lead someone to believe that is all the page contains) by providing
an indicator+button that scrolls to reveal the rest of the page.

Upgrades jquery from slim to full. This is required so we can use
animate for the smooth scrolling functionality.

Moves all javascript libraries from the footer to header, if this
is undesirable for any particular reason (I really didn't see any
issues), just say so and I'll pull it from the PR.

Resolves #280

Author: adamhb123

_includes/footer.html

@@ -47,12 +47,4 @@
     </div>
 </footer>
 
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
-<script src="/assets/js/slider.js"></script>
-<script src="/assets/js/nav.js"></script>
-<script src="/assets/js/footer.js"></script>
-<script src="/assets/js/sponsors.js"></script>
-<script src="/assets/js/tour.js"></script>
+

_includes/head.html

@@ -21,6 +21,17 @@
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+    
+    <!-- Javascript libraries -->
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
+    <script src="/assets/js/slider.js"></script>
+    <script src="/assets/js/nav.js"></script>
+    <script src="/assets/js/footer.js"></script>
+    <script src="/assets/js/sponsors.js"></script>
+    <script src="/assets/js/tour.js"></script>
 
     <!-- Getting more done after 2am than most people do all day! -->
 </head>

_sass/_slider.scss

@@ -1,14 +1,36 @@
+$carousel-scroll-down-button-font-size-larger: 2rem;
+$carousel-scroll-down-button-font-size-smaller: 1.25rem; 
+
 #slider {
     width: 100%;
     margin-bottom: 0;
     height: auto;
-    max-height: 80vh;
     overflow-y: hidden;
     & img {
         width: 100%;
     }
     background: $gray;
 }
+
+#carousel-scroll-down-button:before {
+    content: 'ᐯ';
+    font-size: $carousel-scroll-down-button-font-size-larger;
+    font-weight: bold;
+    text-shadow:0px 0px 10px black, 0px 0px 10px black;
+    @media screen and (max-width: 600px){
+        font-size: $carousel-scroll-down-button-font-size-smaller; 
+    }
+}
+
+#carousel-scroll-down-button {
+    position: absolute;    
+    z-index: 98;
+    left: 50vw;
+    right: 0;
+    width: auto;
+    height: auto;
+}
+
 .slick-prev {
     left: 10px;
     z-index: 2;

assets/js/slider.js

@@ -1,11 +1,37 @@
 $(document).ready(() => {
-    if ($('#slider').length) {
-        $('#slider').slick({
+    let slider = $("#slider");
+    if (slider.length) {
+        slider.slick({
             dots: true,
             autoplay: true,
             autoplaySpeed: 5000,
             mobileFirst: true,
             swipe: true,
         });
     }
+    // Setup carousel scroll-down button click event
+    let carouselsdb = $("#carousel-scroll-down-button");
+    let scrollTopOffset = 1;
+    carouselsdb.on("click", () => {
+        $("html, body").animate({ scrollTop: slider.find("img").height() + scrollTopOffset - $("nav").outerHeight() }, "slow");
+        carouselsdb.blur();
+    });
+
+    // Position carousel scroll-down button
+    let carouselsdbOffset = {X: -7, Y: -35};
+    $(window).on("scroll",  () => {
+        let sliderBottom = slider.height() + slider.offset().top;
+        let windowBottom = $(window).scrollTop() + $(window).height();
+        if ($(window).scrollTop() > sliderBottom) {
+            carouselsdb.css("visibility", "hidden");
+        } else {
+            if(windowBottom < sliderBottom){
+                carouselsdb.css("transform", `translate3d(${-carouselsdb.width()/2 + carouselsdbOffset.X}px, ${windowBottom-carouselsdb.height() + carouselsdbOffset.Y}px,0px)`);
+            } else{
+                carouselsdb.css("transform", `translate3d(${-carouselsdb.width()/2 + carouselsdbOffset.X}px, ${slider.height()-carouselsdb.height() + carouselsdbOffset.Y}px, 0px)`);
+            }
+            carouselsdb.css("visibility", "visible");
+        }
+    }).scroll();
+    $(window).on("load resize focus blur",()=>$(window).scroll());
 });

index.html

@@ -3,6 +3,11 @@
 active: home
 ---
 
+<div style="top:0;position:absolute;display: inline;">
+<!-- Floating scroll-down button -->
+    <button id="carousel-scroll-down-button" class="slick-next slick-arrow"  aria-label="Scroll to the end/bottom of the image carousel"></button>
+</div>
+
 <div id="slider">
     <div>
         <picture>
@@ -47,7 +52,6 @@
         </picture>
     </div>
 </div>
-
 <div class="gray-wrapper">
     <div class="container spaced" id="homepage-about">
         <div class="row">