Merge pull request #80 from adelasofia/develop

Added homepage down arrow

Author: adelasofia

_includes/homepage-hero-band.html

@@ -1,10 +1,11 @@
-<div class="grid-wrapper component homepage-hero-band">
+<div class="grid-wrapper homepage-hero-band">
   <div class="grid__item width-12-12">
     <div class="home-hero">
       <h1 class="styled-logo">Quarkus</h1>
       <h2>Supersonic Subatomic Java</h2>
       <p>A Kubernetes Native Java stack tailored for GraalVM & OpenJDK HotSpot, crafted from the best of breed Java libraries and standards</p>
       <a href="{{site.baseurl}}/get-started/" class="button-cta secondary">Get Started</a>
+      <a href="#" class="scroll-down" address="true"></a>
     </div>
   </div>
 </div>

_layouts/base.html

@@ -38,6 +38,7 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script type="text/javascript" src="{{ '/assets/javascript/mobile-nav.js' | relative_url }}"></script>
+  <script type="text/javascript" src="{{ '/assets/javascript/scroll-down.js' | relative_url }}"></script>
   <script type="text/javascript">
     if (("undefined" !== typeof _satellite) && ("function" === typeof _satellite.pageBottom)) {
         _satellite.pageBottom();

_sass/includes/homepage-hero-band.scss

@@ -1,4 +1,5 @@
 .homepage-hero-band {
+  padding-bottom: 6rem;
 
   .home-hero {
     text-align: center;
@@ -13,4 +14,24 @@
       margin: 1rem auto 3rem auto;
     }
   }
+  .scroll-down {
+    margin: 3rem auto 0 auto;
+    display: block;
+    width: 32px;
+    height: 32px;
+    -webkit-transition: all .2s ease-in;
+    transition: all .2s ease-in;
+    transform: scale(1);
+    
+    &:before {
+      transform: rotate(-45deg);
+      display: block;
+      width: 25px;
+      height: 25px;
+      content: "";
+      border: 2px solid white;
+      border-width: 0px 0 2px 2px;
+    }
+  }
+
 }

assets/javascript/scroll-down.js

@@ -0,0 +1,10 @@
+function scrollDown() {
+  $('.scroll-down').click (function() {
+    $('html, body').animate({scrollTop: $('.homepage-highlights-band').offset().top }, 'slow');
+    return false;
+  });
+}
+
+if(document.querySelector(".scroll-down")){
+  scrollDown();
+}