Browse Source

Improved responsiveness with a better JS algorithm to determine height

master
Christiaan Goossens 3 years ago
parent
commit
cf23e30989
5 changed files with 96 additions and 75 deletions
  1. + 1
    - 0
      .gitignore
  2. BIN
      assets/img/bg.png
  3. + 23
    - 9
      assets/js/index.js
  4. + 71
    - 66
      assets/scss/main.scss
  5. + 1
    - 0
      partials/loop.hbs

+ 1
- 0
.gitignore

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

BIN
assets/img/bg.png

Before After
Width: 1966  |  Height: 1212  |  Size: 439 KiB

+ 23
- 9
assets/js/index.js

@ -32,19 +32,33 @@
}
});
$(window).resize(function() {resizeHeader()});
$(window).resize(function() {resizeHeader();});
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) {
$('.below-header').height($('.hidden-content').height());
} else {
if ($('.hidden-content').is(":visible")) {
$('.below-header').height($('.hidden-content').height() + 200);
} else {
$('.below-header').height(200);
}
calculated = (height - overhang + ($(window).height() * 0.2));
} else if ($('.hidden-content').is(":visible")) {
calculated = (height - overhang + ($(window).height() * 0.5));
}
$('.below-header').height(calculated);
if (hide) {
$('#scroll-arrow').hide();
}
}

+ 71
- 66
assets/scss/main.scss

@ -102,13 +102,17 @@ a {
}
// Big cover on the frontpage
/**
* ===================
* FRONTPAGE DESIGN
* ===================
*/
.header-bg {
@include respond-to(handhelds) {
height: 110vh;
}
background: url('http://christiaangoossens.nl/bg.png');
background: url('../img/bg.png');
background-position: center;
background-repeat: no-repeat;
@ -137,8 +141,9 @@ a {
position: relative;
&:before {
border-bottom: 2px solid $white;
border-right: 130vw solid $white;
border-top: 32vh solid $page-bg;
border-top: 30vh solid $page-bg;
bottom: 0;
content: '';
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 {
height: auto;
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 {
border-bottom: 2px solid $page-bg;
display: inline-block;
@ -530,23 +539,13 @@ $button-shadow: rgba(0, 0, 0, .1);
}
.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;
top: -10vh;
z-index: 52;
}
// FOOTER
.footer {
background: $footer-color;
min-height: 5vh;
@ -598,6 +597,12 @@ $button-shadow: rgba(0, 0, 0, .1);
}
}
/**
* =================
* DEFAULT PAGE DESIGN
* =================
*/
$post-bg: $white;
$post-border: #ebf2f6;
$post-after-border: #e7eef2;

+ 1
- 0
partials/loop.hbs

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

Loading…
Cancel
Save