Made the theme responsive

assets/js/index.js

@@ -21,14 +21,37 @@
 
         // On scroll, check if the height is passed, and if so, trigger.
         $(document).scroll(function(e){
-            if (window.scrollY >= scrollTarget) {
+            if ($document.width() > 767) {
-                $('#scroll-arrow').hide(200);
+                if (window.scrollY >= scrollTarget) {
-                $('.hidden-content').fadeIn(100);
+                    $('#scroll-arrow').hide(200);
-            } else if (window.scrollY < scrollTarget) {
+                    $('.hidden-content').fadeIn(100);
-                $('.hidden-content').fadeOut(200);
+                } else if (window.scrollY < scrollTarget) {
-                $('#scroll-arrow').show(200);
+                    $('.hidden-content').fadeOut(200);
+                    $('#scroll-arrow').show(200);
+                }
             }
         });
+
+        $(window).resize(function() {resizeHeader()});
+
+        resizeHeader();
+
+        function resizeHeader() {
+            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);
+                }
+            }
+        }
+
+        $('.mobile-button').click(function() {
+            $('.hidden-content').fadeIn(100);
+            resizeHeader();
+        })
     });
 
     // Arctic Scroll by Paul Adam Davis

assets/scss/main.scss

@@ -8,6 +8,17 @@ $white: #fff;
 $page-bg: #3498db;
 $header-link-color: #ccc;
 $subtext-color: #666;
+$footer-color: #3a4145;
+
+@mixin respond-to($media) {
+    @if $media == handhelds {
+        @media only screen and (max-width: 767px) { @content; }
+    } @else if $media == medium-screens {
+        @media only screen and (min-width: 768px) and (max-width: 1199px) { @content; }
+    } @else if $media == semi-large-screens {
+        @media only screen and (min-width: 1200px) and (max-width: 1765px) { @content; }
+    }
+}
 
 html {
     box-sizing: border-box;
@@ -52,7 +63,7 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: 'Oxygen', sans-serif;
+    font-family: 'Catamaran', sans-serif;
     line-height: 2em;
     margin: 0 0 .4em;
 }
@@ -90,25 +101,30 @@ a {
     }
 }
 
-$front-page-picture-header: 120vh;
-$front-page-bg-header: 95vh;
-
 
 // Big cover on the frontpage
 .header-bg {
+    @include respond-to(handhelds) {
+        height: 110vh;
+    }
+
     background: url('http://christiaangoossens.nl/bg.png');
 
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    height: $front-page-picture-header;
+    height: 120vh;
     position: relative;
     width: 100%;
 }
 
 .header-overlay {
+    @include respond-to(handhelds) {
+        height: 110vh;
+    }
+
     background: linear-gradient(180deg, transparent, $page-bg 85%);
-    height: $front-page-picture-header;
+    height: 120vh;
     left: 0;
     opacity: 1;
     position: absolute;
@@ -118,7 +134,6 @@ $front-page-bg-header: 95vh;
 
 .below-header {
     background: $page-bg;
-    height: $front-page-bg-header;
     position: relative;
 
     &:before {
@@ -134,6 +149,10 @@ $front-page-bg-header: 95vh;
 
 // Bouncing arrow
 .scroll-down {
+    @include respond-to(handhelds) {
+        display: none;
+    }
+
     animation: bounce 4s 2s infinite;
     color: $arrow-bg;
 
@@ -157,9 +176,30 @@ $front-page-bg-header: 95vh;
     }
 }
 
+$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: ($front-page-bg-header + $front-page-picture-header);
+    height: auto;
     left: 0;
     position: absolute;
     top: 0;
@@ -167,21 +207,37 @@ $front-page-bg-header: 95vh;
     z-index: 50;
 
     .top-content {
+        @include respond-to(handhelds) {
+            padding: 15vh 5vh 0;
+        }
+
+        @include respond-to(medium-screens) {
+            padding: 25vh 8vh 0;
+        }
+
         color: $white;
-        padding-top: 35vh;
+        padding: 35vh 10vw 0;
         text-align: center;
 
         h1 {
+            @include respond-to(handhelds) {
+                font-size: 4em;
+            }
+
             font-family: 'Source Sans Pro', sans-serif;
-            font-size: 90px;
+            font-size: 5em;
             font-weight: 300;
             line-height: 1.1em;
             margin: 0;
         }
 
         h2 {
+            @include respond-to(handhelds) {
+                font-size: 1.2em;
+            }
+
             font-family: 'Source Sans Pro', sans-serif;
-            font-size: 24px;
+            font-size: 1.33em;
             font-weight: 300;
             line-height: 1.1em;
             margin-bottom: 10px;
@@ -189,8 +245,12 @@ $front-page-bg-header: 95vh;
         }
 
         h4 {
+            @include respond-to(handhelds) {
+                font-size: .9em;
+            }
+
             font-family: 'Source Sans Pro', sans-serif;
-            font-size: 18px;
+            font-size: 1em;
             font-weight: 300;
             line-height: 1.4em;
             margin-top: 30px;
@@ -205,6 +265,16 @@ $front-page-bg-header: 95vh;
     $layer-effect: #eee;
 
     .hidden-content {
+        @include respond-to(handhelds) {
+            width: 95vw;
+        }
+        @include respond-to(semi-large-screens) {
+            width: 80vw;
+        }
+        @include respond-to(medium-screens) {
+            width: 80vw;
+        }
+
         margin: auto;
         margin-top: 10vh;
         max-width: 1140px;
@@ -212,6 +282,41 @@ $front-page-bg-header: 95vh;
         width: 60vw;
     }
 
+    .grid {
+        @include respond-to(handhelds) {
+            margin: 0;
+            padding: 0;
+        }
+
+        min-width: 0;
+
+        .col-7-12 {
+            @include respond-to(medium-screens) {
+                width: 100%;
+            }
+
+            @include respond-to(handhelds) {
+                width: 100%;
+            }
+        }
+
+        .col-4-12 {
+            @include respond-to(medium-screens) {
+                border-top: 2px dotted $page-bg;
+                margin: 5vh 0 0;
+                padding-top: 5vh;
+                width: 100%;
+            }
+
+            @include respond-to(handhelds) {
+                border-top: 2px dotted $page-bg;
+                margin: 5vh 0 0;
+                padding-top: 5vh;
+                width: 100%;
+            }
+        }
+    }
+
     .cv-box {
         background: $white;
         box-shadow:
@@ -230,10 +335,19 @@ $front-page-bg-header: 95vh;
 
         p {
             font-size: .9em;
+            line-height: 1.5em;
             margin: 1em 0;
         }
 
         .right {
+            @include respond-to(handhelds) {
+                display: block;
+                font-size: .8em;
+                margin-bottom: 10px;
+                margin-top: -4px;
+                width: 100%;
+            }
+
             display: inline-block;
             float: right;
         }
@@ -281,13 +395,14 @@ $front-page-bg-header: 95vh;
 
             .links {
                 list-style-type: none;
+                margin-bottom: 2.2em;
                 padding: 0;
 
                 li {
                     font-family: 'Source Sans Pro', sans-serif;
                     font-size: 16px;
-                    height: 22px;
                     line-height: 18px;
+                    min-height: 22px;
                     padding: 2px 0 0;
 
                     a {
@@ -336,8 +451,22 @@ $front-page-bg-header: 95vh;
         }
 
         ul {
+            @include respond-to(semi-large-screens) {
+                max-width: 50%;
+            }
+
+            @include respond-to(medium-screens) {
+                max-width: 50%;
+            }
+
+            @include respond-to(handhelds) {
+                max-width: 80%;
+            }
+
+            line-height: 3em;
             list-style: none;
-            margin: 0;
+            margin: auto;
+            max-width: 30vw;
             padding: 0;
         }
 
@@ -385,6 +514,90 @@ $front-page-bg-header: 95vh;
     }
 }
 
+.blog-title {
+    border-bottom: 2px solid $page-bg;
+    display: inline-block;
+    font-family: 'Lato', sans-serif;
+    font-size: 1.3em;
+    font-weight: 300;
+    line-height: 1.7em;
+    padding: 0 .2em;
+    text-align: center;
+}
+
+.blog-title-container {
+    text-align: center;
+}
+
+.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 {
+    background: $footer-color;
+    min-height: 5vh;
+
+    .footer-content {
+        @include respond-to(handhelds) {
+            text-align: center;
+            width: 90vw;
+        }
+        @include respond-to(semi-large-screens) {
+            width: 80vw;
+        }
+        @include respond-to(medium-screens) {
+            width: 80vw;
+        }
+
+        color: $white;
+        font-family: 'Lato', sans-serif;
+        font-size: .6em;
+        height: auto;
+        line-height: 1.8em;
+        margin: auto;
+        max-width: 1140px;
+        padding: 2vh 0;
+        width: 60vw;
+
+        .right {
+            @include respond-to(handhelds) {
+                display: block;
+                float: none;
+            }
+
+            float: right;
+        }
+
+        a {
+            color: $white;
+            text-decoration: none;
+
+            &:hover {
+                text-shadow:
+                -.2px -.2px 0 $white,
+                .2px -.2px 0 $white,
+                -.2px .2px 0 $white,
+                .2px .2px 0 $white;
+                transition: all .5s;
+            }
+        }
+    }
+}
+
 $post-bg: $white;
 $post-border: #ebf2f6;
 $post-after-border: #e7eef2;

default.hbs

@@ -36,6 +36,13 @@
         {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
 
+        <footer class="footer">
+            <div class="footer-content">
+                Copyright Christiaan Goossens 2017.
+                <span class="right"><a href="/privacy">Privacy Policy and Terms of Service</a></span>
+            </div>
+        </footer>
+
     </div>
 
     {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}

index.hbs

@@ -7,12 +7,13 @@
 <div class="below-header"></div>
 
 {{!-- Header content --}}
-<div class="header-text">
+<header class="header-text">
     <div class="top-content">
         <h1>Christiaan Goossens</h1>
         <h2>Creating software for the web, mobile devices and the desktop while consulting in all things IT related.</h2>
         <h4>Student at the Eindhoven University of Technology</br>CEO, Verictas</h4>
         <a class="scroll-down icon-arrow-left" title="Please scroll down" id="scroll-arrow"><span class="hidden">Scroll Down</span></a>
+        <a class="mobile-button">Show more about me</a>
     </div>
     <div class="hidden-content">
         <div class="cv-box">
@@ -71,10 +72,13 @@
             </ul>
         </div>
     </div>
-</div>
+</header>
 
 {{!-- The main content area on the homepage --}}
 <main id="content" class="content" role="main">
+    <div class="blog-title-container">
+        <h4 class="blog-title">Some articles I wrote</h4>
+    </div>
     {{!-- The tag below includes the post loop - partials/loop.hbs --}}
     {{> "loop"}}
 </main>