Finalizing template for deployment on chrg.nl

assets/scss/main.scss

@@ -101,6 +101,11 @@ a {
     }
 }
 
+.site-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
 
 /**
  * ===================
@@ -456,7 +461,6 @@ a {
 
     display: table;
     height: 100vh;
-    margin-bottom: 5rem;
     overflow: hidden;
 
     position: relative;
@@ -538,7 +542,8 @@ $button-shadow: rgba(0, 0, 0, .1);
     text-align: center;
 }
 
-.content {
+.index-content {
+    margin-top: 0;
     position: relative;
     z-index: 52;
 }
@@ -550,16 +555,9 @@ $button-shadow: rgba(0, 0, 0, .1);
     background: $footer-color;
     min-height: 5vh;
 
-    .footer-content {
+    .container {
         @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;
@@ -567,19 +565,7 @@ $button-shadow: rgba(0, 0, 0, .1);
         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;
@@ -597,6 +583,32 @@ $button-shadow: rgba(0, 0, 0, .1);
     }
 }
 
+.container {
+    @include respond-to(handhelds) {
+        width: 90vw;
+    }
+    @include respond-to(semi-large-screens) {
+        width: 80vw;
+    }
+    @include respond-to(medium-screens) {
+        width: 80vw;
+    }
+
+    height: auto;
+    margin: auto;
+    max-width: 1140px;
+    width: 60vw;
+
+    .right {
+        @include respond-to(handhelds) {
+            display: block;
+            float: none;
+        }
+
+        float: right;
+    }
+}
+
 /**
  * =================
  * DEFAULT PAGE DESIGN
@@ -609,6 +621,41 @@ $post-after-border: #e7eef2;
 $post-meta: #9eabb3;
 $post-meta-link: #9eabb3;
 
+main {
+    flex-grow: 1;
+    margin-top: 5rem;
+}
+
+// HEADER
+.top-header {
+    background: $page-bg;
+    height: auto;
+
+    .container {
+        @include respond-to(handhelds) {
+            text-align: center;
+        }
+
+        color: $white;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 1.2em;
+        font-weight: 600;
+        line-height: 1.5em;
+        padding: 2vh 0;
+
+        a {
+            color: $white;
+            text-decoration: none;
+
+            &:hover {
+                border-bottom: 2px solid $white;
+            }
+        }
+    }
+}
+
+
+
 // This class is applied to all posts
 .post {
     border-bottom: $post-border 1px solid;
@@ -621,6 +668,8 @@ $post-meta-link: #9eabb3;
 }
 
 .post-title {
+    line-height: 1.2em;
+    
     a {
         text-decoration: none;
     }
@@ -677,6 +726,14 @@ $post-date-border: #d5dbde;
     width: 24px;
 }
 
+.author-profile .author-image {
+    margin-top: 50px;
+}
+
+.author-image-cover {
+    margin-top: -100px;
+}
+
 .user-meta {
     min-height: 77px;
     padding: .3rem 40px 0 100px;
@@ -719,3 +776,30 @@ $post-date-border: #d5dbde;
     font-size: 1.4rem;
     line-height: 1.5rem;
 }
+
+.no-cover {
+    display: none;
+}
+
+.page-title {
+    line-height: 1.2em;
+
+    .description {
+        color: $post-meta;
+        display: block;
+        font-size: .5em;
+        font-weight: 300;
+    }
+}
+
+.main-header-content {
+    hr {
+        margin: 2em 0;
+    }
+}
+
+.extra-pagination {
+    &:after {
+        display: none;
+    }
+}