Improved responsiveness with a better JS algorithm to determine height

master
Christiaan Goossens 7 years ago
parent b0d520c95a
commit cf23e30989

1
.gitignore vendored

@ -1,3 +1,4 @@
assets/components/ assets/components/
node_modules/ node_modules/
assets/css/main.css assets/css/main.css
assets/img/bg.large.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 KiB

@ -32,19 +32,33 @@
} }
}); });
$(window).resize(function() {resizeHeader()}); $(window).resize(function() {resizeHeader();});
resizeHeader(); resizeHeader();
function resizeHeader() { function resizeHeader() {
var hide = true;
if ($('#scroll-arrow').is(':visible')) {
hide = false;
} else if ($(window).width() > 767) {
$('#scroll-arrow').show();
}
var overhang = $(window).height() - $('.top-content').outerHeight();
var height = $('.hidden-content').height();
var calculated = 200;
if ($(window).width() > 767) { if ($(window).width() > 767) {
$('.below-header').height($('.hidden-content').height()); calculated = (height - overhang + ($(window).height() * 0.2));
} else { } else if ($('.hidden-content').is(":visible")) {
if ($('.hidden-content').is(":visible")) { calculated = (height - overhang + ($(window).height() * 0.5));
$('.below-header').height($('.hidden-content').height() + 200); }
} else {
$('.below-header').height(200); $('.below-header').height(calculated);
}
if (hide) {
$('#scroll-arrow').hide();
} }
} }

@ -102,13 +102,17 @@ a {
} }
// Big cover on the frontpage /**
* ===================
* FRONTPAGE DESIGN
* ===================
*/
.header-bg { .header-bg {
@include respond-to(handhelds) { @include respond-to(handhelds) {
height: 110vh; height: 110vh;
} }
background: url('http://christiaangoossens.nl/bg.png'); background: url('../img/bg.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -137,8 +141,9 @@ a {
position: relative; position: relative;
&:before { &:before {
border-bottom: 2px solid $white;
border-right: 130vw solid $white; border-right: 130vw solid $white;
border-top: 32vh solid $page-bg; border-top: 30vh solid $page-bg;
bottom: 0; bottom: 0;
content: ''; content: '';
position: absolute; position: absolute;
@ -147,57 +152,6 @@ a {
} }
} }
// Bouncing arrow
.scroll-down {
@include respond-to(handhelds) {
display: none;
}
animation: bounce 4s 2s infinite;
color: $arrow-bg;
display: block;
font-size: 24px;
height: 24px;
left: 50%;
margin-left: -12px;
position: relative;
text-align: center;
text-decoration: none;
transform: rotate(-90deg);
transition: translateZ(0);
width: 24px;
z-index: 100;
// Stop the bouncing while hovered
&:hover {
animation: none;
color: $white;
}
}
$button-shadow: rgba(0, 0, 0, .1);
.mobile-button {
@include respond-to(handhelds) {
display: inline-block;
}
background: $white;
box-shadow: 0 8px 15px $button-shadow;
color: $page-bg;
display: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: .9em;
line-height: 1.2em;
padding: .8em 2em;
width: auto;
&:hover {
cursor: pointer;
}
}
.header-text { .header-text {
height: auto; height: auto;
left: 0; left: 0;
@ -514,6 +468,61 @@ $button-shadow: rgba(0, 0, 0, .1);
} }
} }
/**
* =======================
* FRONT PAGE CONTENT
* =======================
*/
.scroll-down {
@include respond-to(handhelds) {
display: none;
}
animation: bounce 4s 2s infinite;
color: $arrow-bg;
display: block;
font-size: 24px;
height: 24px;
left: 50%;
margin-left: -12px;
position: relative;
text-align: center;
text-decoration: none;
transform: rotate(-90deg);
transition: translateZ(0);
width: 24px;
z-index: 100;
// Stop the bouncing while hovered
&:hover {
animation: none;
color: $white;
}
}
$button-shadow: rgba(0, 0, 0, .1);
.mobile-button {
@include respond-to(handhelds) {
display: inline-block;
}
background: $white;
box-shadow: 0 8px 15px $button-shadow;
color: $page-bg;
display: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: .9em;
line-height: 1.2em;
padding: .8em 2em;
width: auto;
&:hover {
cursor: pointer;
}
}
.blog-title { .blog-title {
border-bottom: 2px solid $page-bg; border-bottom: 2px solid $page-bg;
display: inline-block; display: inline-block;
@ -530,23 +539,13 @@ $button-shadow: rgba(0, 0, 0, .1);
} }
.content { .content {
@include respond-to(medium-screens) {
margin-bottom: 0;
top: 0;
}
@include respond-to(handhelds) {
margin-bottom: 0;
top: 0;
}
margin-bottom: -10vh;
position: relative; position: relative;
top: -10vh;
z-index: 52; z-index: 52;
} }
// FOOTER
.footer { .footer {
background: $footer-color; background: $footer-color;
min-height: 5vh; min-height: 5vh;
@ -598,6 +597,12 @@ $button-shadow: rgba(0, 0, 0, .1);
} }
} }
/**
* =================
* DEFAULT PAGE DESIGN
* =================
*/
$post-bg: $white; $post-bg: $white;
$post-border: #ebf2f6; $post-border: #ebf2f6;
$post-after-border: #e7eef2; $post-after-border: #e7eef2;

@ -6,6 +6,7 @@
{{!-- This is the post loop - each post will be output using this markup --}} {{!-- This is the post loop - each post will be output using this markup --}}
{{#foreach posts}} {{#foreach posts}}
<article class="{{post_class}}"> <article class="{{post_class}}">
<pre>{{image}}</pre>
<header class="post-header"> <header class="post-header">
<h2 class="post-title"><a href="{{url}}">{{title}}</a></h2> <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
</header> </header>

Loading…
Cancel
Save