restyle headers

content/pages/homepage.html

@@ -11,9 +11,11 @@
         <h1>Welcome to my website</h1>
         <hr>
         <p>The place where my knowledge lies, or at least most of it!</p>
-        <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
       </div>
     </div>
+    <a href="#about" class="page-scroll">
+      <i class="fa fa-chevron-down animated pulse infinite" aria-hidden="true"></i>
+    </a>
   </header>
 
   <section class="bg-primary" id="about">

theme/static/src/scss/functional.scss

@@ -6,3 +6,7 @@
   background-image: url("../img/header.jpg");
   background-position: center;
 }
+
+.text-shadow {
+  text-shadow: 0px 5px 3px $brand-grey-dark;
+}

theme/static/src/scss/homepage.scss

@@ -2,7 +2,22 @@ header {
   background-image: url("../img/header.jpg");
   min-height: 100%;
 
+  h1 {
+    font-size: $font-size-h1 * 1.5;
+    @extend .text-shadow;
+  }
+
+  .page-scroll {
+    position: absolute;
+    bottom: 10%;
+    color: $white;
+    & > i {
+      font-size: $font-size-h1;
+    }
+  }
+
   .header-content-inner p {
+    @extend .text-shadow;
     font-size: $font-size-h3 !important;
     font-weight: 400 !important;
   }

theme/static/src/scss/library-overrides.scss

@@ -41,3 +41,21 @@ $btn-srobo-border: darken($btn-srobo-bg, 5%);
 section {
   padding: 75px 0;
 }
+
+hr {
+  max-width: 100px;
+}
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}