Added new header system, waiting for texts to be added to .header-text

assets/js/index.js

@@ -20,6 +20,24 @@
             $("body").toggleClass("nav-opened nav-closed");
         });
 
+        var object = $('.homepage-top-header');
+        var toggleHeight = 1442;
+
+        if (object !== null) {
+            $(document).scroll(function(e){
+                if (window.scrollY >= (toggleHeight - 100)) {
+                    object.show(300);
+                } else if (window.scrollY < toggleHeight) {
+                    object.hide(300);
+                }
+            });
+        }
+
+        var animateobject = $('.top-header-animate');
+        if (animateobject !== null) {
+            animateobject.show(200);
+        }
+
     });
 
     // Arctic Scroll by Paul Adam Davis

assets/scss/main.scss

@@ -5,13 +5,24 @@ $highlighted-link-text: #111;
 $bg: #3a4145;
 $arrow-bg: rgba(255, 255, 255, .7);
 $white: #fff;
+$page-bg: #3498db;
+$header-link-color: #ccc;
 
 html {
+    box-sizing: border-box;
     font-size: 62.5%;
     height: 100%;
     max-height: 100%;
 }
 
+* {
+    &:before,
+    &:after {
+        box-sizing: inherit;
+    }
+}
+
+
 body {
     color: $text;
     font-family: 'Lato', sans-serif;
@@ -79,8 +90,116 @@ a {
     }
 }
 
+$front-page-picture-header: 120vh;
+$front-page-bg-header: 50vh;
+
 
 // Big cover on the frontpage
+.header-bg {
+    background: url('http://christiaangoossens.nl/bg.png');
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: $front-page-picture-header;
+    position: relative;
+    width: 100%;
+}
+
+.header-overlay {
+    background: linear-gradient(180deg, transparent, $page-bg 85%);
+    height: $front-page-picture-header;
+    left: 0;
+    opacity: 1;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.below-header {
+    background: $page-bg;
+    height: $front-page-bg-header;
+    position: relative;
+
+    &:before {
+        border-right: 130vw solid $white;
+        border-top: 32vh solid $page-bg;
+        bottom: 0;
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 0;
+    }
+}
+
+.header-text {
+    height: ($front-page-bg-header + $front-page-picture-header);
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 50;
+}
+
+.top-header {
+    height: 15vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+
+    &:before {
+        border-right: 60vw solid transparent;
+        border-top: 15vh solid $page-bg;
+        bottom: 0;
+        content: '';
+        position: absolute;
+        right: 50%;
+        width: 0;
+    }
+}
+
+.top-header-contents {
+    color: $white;
+    height: 10vh;
+    padding: 2.5vh;
+    position: relative;
+    width: 100%;
+    z-index: 110;
+
+    h3 {
+        color: $white;
+        font-family: 'Catamaran', sans-serif;
+        font-size: 1.8em;
+        font-weight: 800;
+        line-height: 1em;
+        margin: 0;
+    }
+
+    h6 {
+        a {
+            color: $header-link-color;
+            text-decoration: none;
+
+            &:hover {
+                color: $white;
+            }
+        }
+
+        font-family: 'Catamaran', sans-serif;
+        font-size: .8em;
+    }
+}
+
+.homepage-top-header {
+    display: none;
+}
+
+.top-header-animate {
+    display: none;
+}
+
 .main-header {
     background: $bg no-repeat center center;
     background-size: cover;
@@ -99,38 +218,6 @@ a {
     }
 }
 
-// Bouncing arrow
-.scroll-down {
-    animation: bounce 4s 2s infinite;
-    bottom: 45px;
-    color: $arrow-bg;
-
-    display: block;
-    font-size: 34px;
-    height: 34px;
-    left: 50%;
-    margin-left: -16px;
-    position: absolute;
-    text-align: center;
-    text-decoration: none;
-    transform: rotate(-90deg);
-    width: 34px;
-    z-index: 100;
-
-    // Stop the bouncing while hovered
-    &:hover {
-        animation: none;
-        color: $white;
-    }
-}
-
-.main-me {
-    background-color: red; //Temp
-    color: $white;
-    margin: 10rem auto 15rem;
-    max-width: 1260px;
-}
-
 $post-bg: $white;
 $post-border: #ebf2f6;
 $post-after-border: #e7eef2;

author.hbs

@@ -4,6 +4,12 @@
 {{!-- The big featured header --}}
 
 {{!-- Everything inside the #author tags pulls data from the author --}}
+
+
+<header class="top-header top-header-animate">
+    {{> "header"}}
+</header>
+
 {{#author}}
     <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
     </header>

default.hbs

@@ -17,7 +17,7 @@
     <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
 
     {{!-- Styles'n'Scripts --}}
-    <link href="https://fonts.googleapis.com/css?family=Lato|Oxygen" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato|Oxygen|Catamaran" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="{{asset "assets/components/animate.css/animate.min.css"}}" />
 
     <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
@@ -28,7 +28,6 @@
     {{ghost_head}}
 </head>
 <body class="{{body_class}} nav-closed">
-
     {{!-- The blog navigation links --}}
     {{navigation}}
 

index.hbs

@@ -1,14 +1,23 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{!-- The big featured header --}}
+{{!-- Top header --}}
-<header class="main-header">
+<header class="top-header homepage-top-header">
-    <div class="main-me">
+    {{> "header"}}
-        hey
-    </div>
-    <a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
 </header>
 
+{{!-- All header backgrounds --}}
+<div class="header-bg"></div>
+<div class="header-overlay"></div>
+<div class="below-header"></div>
+
+{{!-- Header content --}}
+<div class="header-text">
+    <div class="content">
+        Test
+    </div>
+</div>
+
 {{!-- The main content area on the homepage --}}
 <main id="content" class="content" role="main">
 
@@ -20,5 +29,4 @@
 
     {{!-- The tag below includes the post loop - partials/loop.hbs --}}
     {{> "loop"}}
-
 </main>

page.hbs

@@ -6,6 +6,10 @@
 {{!-- Everything inside the #post tags pulls data from the page --}}
 {{#post}}
 
+<header class="top-header top-header-animate">
+    {{> "header"}}
+</header>
+
 <header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
 </header>
 

partials/header.hbs

@@ -0,0 +1,4 @@
+<div class="top-header-contents">
+    <h3>Christiaan's Blog</h3>
+    <h6><a href="/">More about me >></a></h6>
+</div>

post.hbs

@@ -6,6 +6,10 @@
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
+<header class="top-header top-header-animate">
+    {{> "header"}}
+</header>
+
 <header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
 </header>
 

tag.hbs

@@ -2,6 +2,11 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 {{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
+
+<header class="top-header top-header-animate">
+    {{> "header"}}
+</header>
+
 <header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
     <nav class="main-nav overlay clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}