|
|
|
@ -5,13 +5,24 @@ $highlighted-link-text: #111;
@@ -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 {
@@ -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 {
@@ -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; |
|
|
|
|