christiaangoossens/chrg.nl
1
0
Fork 0
Code Releases 1 Activity

Improved responsiveness with a better JS algorithm to determine height

Browse Source
This commit is contained in:
Christiaan Goossens
2017-07-14 13:39:45 +02:00
parent b0d520c95a
commit cf23e30989
5 changed files with 96 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
assets/scss/main.scss
View File

@ -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;