bruh

Author: adamhb123

_sass/_slider.scss

@@ -1,5 +1,7 @@
-$carousel-scroll-down-button-font-size-larger: 2.5rem;
-$carousel-scroll-down-button-font-size-smaller: 1.75rem; 
+$carousel-breakpoint: 600px;
+
+$carousel-scroll-down-button-size-larger: 50px;
+$carousel-scroll-down-button-size-smaller: 25px; 
 
 #slider {
     width: 100%;
@@ -12,25 +14,35 @@ $carousel-scroll-down-button-font-size-smaller: 1.75rem;
     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;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+#carousel-scroll-down-button:active, #carousel-scroll-down-button:focus {
+  outline: 0;
+  -moz-outline-style: none;
 }
 
+#carousel-scroll-down-button > svg {
+    max-width: $carousel-scroll-down-button-size-larger;
+    height: auto;
+    width: $carousel-scroll-down-button-size-larger;
+    
+}
+@media screen and (max-width: $carousel-breakpoint) {
+    #carousel-scroll-down-button > svg {
+        max-width: $carousel-scroll-down-button-size-smaller;
+    }
+}
 .slick-prev {
     left: 10px;
     z-index: 2;

assets/js/slider.js

@@ -1,5 +1,5 @@
 const SCROLL_ANIMATION_DURATION = 1000;
-const CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET = {X: -7, Y: -45};
+const CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET = {X: -5, Y: -25};
 
 $(document).ready(() => {
     let slider = $("#slider");
@@ -22,8 +22,8 @@ $(document).ready(() => {
         carousel_scroll_down_button.blur();
     });
 
-    // Position carousel scroll-down button
-    $(window).on("scroll",  () => {
+    // Carousel arrow positioning function
+    let recalculate_arrow_position = () => {
         let sliderBottom = slider.height() + slider.offset().top;
         let windowBottom = $(window).scrollTop() + $(window).height();
         if ($(window).scrollTop() > sliderBottom) {
@@ -36,6 +36,9 @@ $(document).ready(() => {
             }
             carousel_scroll_down_button.css("visibility", "visible");
         }
-    }).scroll();
-    $(window).on("load resize focus blur",()=>$(window).scroll());
+    }
+
+    // Position carousel scroll-down button
+    $(window).on("scroll load resize focus blur", recalculate_arrow_position);
+    recalculate_arrow_position();
 });

index.html

@@ -5,7 +5,17 @@
 
 <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>
+    <button id="carousel-scroll-down-button"  aria-label="Scroll to the end/bottom of the image carousel">
+         <svg xmlns="http://www.w3.org/2000/svg"
+              width="50px" height="25px"
+              viewBox="0 0 355 125">
+           <path id="path4943"
+                 fill="none" stroke="black" stroke-width="20"
+                 d="M 0.29,0.41
+                    C 0.29,0.41 177.00,123.39 177.00,123.39
+                      177.00,123.39 353.71,0.41 353.71,0.41" />
+         </svg>
+    </button>
 </div>
 
 <div id="slider">