diff --git a/assets/js/index.js b/assets/js/index.js
index a54a79a..c6b63d3 100644
--- a/assets/js/index.js
+++ b/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
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 72b14de..d25a90d 100644
--- a/assets/scss/main.scss
+++ b/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;
diff --git a/author.hbs b/author.hbs
index b6e827a..b28559a 100644
--- a/author.hbs
+++ b/author.hbs
@@ -4,6 +4,12 @@
{{!-- The big featured header --}}
{{!-- Everything inside the #author tags pulls data from the author --}}
+
+
+