Redo some of the styling

assets/sass/_blog.scss

@@ -1,114 +0,0 @@
-$article-image-size: 24px;
-
-section.blog-recent {
-  .header {
-    display: flex;
-    justify-content: space-between;
-
-    .all-articles {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      a {
-        text-decoration: none;
-
-        &:after {
-          content: "»";
-        }
-      }
-    }
-  }
-}
-
-section.blog-recent,
-section.blog {
-  .list {
-    .blog-items {
-      list-style: none;
-
-      .blog-item {
-        background-color: $background-lighter;
-        border-radius: 16px;
-        padding: 8px;
-        display: flex;
-        cursor: pointer;
-        user-select: none;
-
-        transition: transform 250ms ease-in-out;
-
-        &:not(:last-child) {
-          margin-bottom: 1rem;
-        }
-
-        &:hover {
-          transform: translateX(2rem);
-
-          @media (max-width: $xl) {
-            transform: translateX(1rem);
-          }
-
-          @media (max-width: $lg) {
-            transform: translateX(0.5rem);
-          }
-        }
-
-        .article-image {
-          max-width: $article-image-size;
-          max-height: $article-image-size;
-
-          margin-right: 1rem;
-        }
-
-        .article-text {
-          .article-title {
-            line-height: $article-image-size;
-            font-size: 1.2rem;
-            margin: 0;
-          }
-
-          .article-desc,
-          .article-date {
-            display: block;
-          }
-
-          .article-date {
-            color: darken($text-color, 15%);
-          }
-        }
-      }
-    }
-  }
-}
-
-section.blog-popular {
-  .popular-items {
-    list-style: none;
-    padding: 0;
-
-    li {
-      display: grid;
-      grid-template-columns: 25px 1fr;
-
-      &:not(:first-child) {
-        margin-bottom: 0.25rem;
-      }
-
-      &:not(:last-child) {
-        margin-top: 0.25rem;
-      }
-
-      .arrow {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 25px;
-      }
-
-      .link {
-        text-decoration: none;
-        font-size: 1.2rem;
-      }
-    }
-  }
-}

assets/sass/_footer.scss

@@ -1,50 +1,37 @@
-$icon-size: 2rem;
-
 footer {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
 
     @media (max-width: $sm) {
-    flex-direction: column;
+        display: block
-
-    .credits {
-      text-align: center;
-    }
     }
 
-  .credits {
+    .credits {}
-    p {
-      a {
-        text-decoration: none;
-      }
-    }
-  }
 
     .social-links {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
         ul {
-      display: flex;
-      list-style: none;
-      justify-content: center;
             padding: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+
+            list-style: none;
 
             li {
                 a {
-          text-decoration: none;
+                    font-size: 2rem;
                     color: $text-color;
-          margin: 0.5rem;
-
-          &:hover {
-            color: darken($text-color, 10%);
                 }
 
-          i {
+                @media (min-width: $sm) {
-            line-height: $icon-size;
+                    margin-left: 0.5rem;
-            font-size: $icon-size;
+                    margin-right: 0.5rem;
-          }
+                }
+
+                @media (min-width: $md) {
+                    margin-left: 1rem;
+                    margin-right: 1rem;
                 }
             }
         }

assets/sass/_header.scss

@@ -1,78 +1,106 @@
-$brand-height: 64px;
-
 header {
+    position: relative;
+    background-color: $background-header;
+    padding-top: 3rem;
+
+    @media (max-width: $sm) {
+        padding-top: 1rem;
+    }
+
+    .top-bar {
         display: flex;
+        flex-direction: row;
         justify-content: space-between;
 
         .brand {
+            $brandSize: 64px;
+
             display: flex;
+            flex-direction: row;
+
             text-decoration: none;
             color: $text-color;
             user-select: none;
 
             .brand-logo {
+                height: $brandSize;
                 width: auto;
-      height: $brand-height;
             }
 
             .brand-name {
-      line-height: $brand-height;
+                line-height: $brandSize;
                 vertical-align: middle;
                 font-size: 28px;
 
                 margin-left: 2rem;
-
-      @media (max-width: $sm) {
-        font-size: 20px;
-        margin-left: 1rem;
-      }
             }
         }
 
         .site-nav {
-    flex-grow: 1;
-    max-width: 200px;
-
             .nav-items {
                 display: flex;
-      justify-content: space-between;
+                flex-direction: row;
+
                 list-style: none;
-      padding: 0;
 
                 .nav-item {
-        text-align: center;
-
                     a {
                         text-decoration: none;
-          font-size: 1.1rem;
                         color: $text-color;
+                        user-select: none;
+                    }
+                }
+            }
+        }
+    }
 
-          &:hover {
+    .hero {
-            color: darken($text-color, 15%);
+        max-width: 60%;
-          }
+        margin-top: 4rem;
-        }
+        margin-bottom: 4rem;
-      }
+    
-    }
+        @media (max-width: $lg) {
+            max-width: 75%;
+            margin-top: 2rem;
+            margin-bottom: 2rem;
         }
     
         @media (max-width: $md) {
-    flex-direction: column;
+            max-width: 100%;
-
+            margin-top: 1rem;
-    .site-nav {
-      flex-grow: unset;
-      max-width: unset;
-
-      .nav-items {
-        justify-content: unset;
-
-        .nav-item {
-          flex-basis: 100%;
-        }
-      }
         }
+    
+        h1 {
+            color: $accent-color;
+            font-size: 2.5rem;
+        
+            @media (max-width: $md) {
+                font-size: 1.5rem;
             }
         }
 
-body > .header {
+        p {
-  margin-bottom: 1rem;
+            font-size: 14px;
+            line-height: 2;
+        }
+    }
+
+    .wave {
+        overflow: hidden;
+        display: block;
+
+        height: 90px;
+        z-index: 3;
+
+        svg {
+            position: absolute;
+            left: -3%;
+            right: -3%;
+            bottom: 0;
+            width: 106%;
+            min-width: 600px;
+
+            fill: $background-main;
+        }
+    }
 }

assets/sass/_hero.scss

@@ -1,30 +0,0 @@
-section.hero {
-  max-width: 60%;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-
-  @media (max-width: $lg) {
-    max-width: 75%;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  @media (max-width: $md) {
-    max-width: 100%;
-    margin-top: 1rem;
-  }
-
-  h1 {
-    color: $primary;
-    font-size: 2.5rem;
-
-    @media (max-width: $md) {
-      font-size: 1.5rem;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 2;
-  }
-}

assets/sass/_home.scss

@@ -1,56 +0,0 @@
-.split-content {
-  display: flex;
-
-  main {
-    margin-right: 4rem;
-    width: 75%;
-  }
-
-  aside {
-    width: 25%;
-  }
-
-  @media (max-width: $lg) {
-    flex-direction: column;
-
-    main,
-    aside {
-      width: 100%;
-    }
-  }
-}
-
-.home-header {
-  position: relative;
-  background-color: rgba($black, 0.5);
-  padding-bottom: 90px;
-  padding-top: 45px;
-
-  @media (max-width: $md) {
-    padding-top: 30px;
-  }
-
-  .wave {
-    overflow: hidden;
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 90px;
-    transform: translateY(1px);
-    z-index: 3;
-
-    svg {
-      position: absolute;
-      left: -3%;
-      right: -3%;
-      bottom: 0;
-      width: 106%;
-      min-width: 600px;
-
-      fill: $background;
-    }
-  }
-}

assets/sass/_layout.scss

@@ -0,0 +1,37 @@
+html {
+    &,
+    body {
+        padding: 0;
+        margin: 0;
+    }
+
+    body {
+        header {}
+
+        .container {
+            .split-content {
+                display: flex;
+
+                main {
+                    margin-right: 4rem;
+                    width: 75%;
+                }
+            
+                aside {
+                    width: 25%;
+                }
+            
+                @media (max-width: $lg) {
+                    flex-direction: column;
+            
+                    main,
+                    aside {
+                        width: 100%;
+                    }
+                }
+            }
+
+            footer {}
+        }
+    }
+}

assets/sass/_variables.scss

@@ -3,26 +3,12 @@ $font-family-sans-serif: "Nunito", sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
-// Base colors
-$white: #ffffff;
-$black: #000000;
-$blue: #3490dc;
-$indigo: #6574cd;
-$purple: #9561e2;
-$pink: #f66d9b;
-$red: #e3342f;
-$orange: #f6993f;
-$yellow: #ffed4a;
-$green: #38c172;
-$teal: #4dc0b5;
-$cyan: #6cb2eb;
-
 // Theme colors
-$background: #162028;
+$background-header: #0b1014;
-$background-lighter: #1c2d35;
+$background-main:   #162028;
-$background-darker: #0f171d;
-$primary: #a1fab3;
 $text-color:        #ecf8ff;
+$accent-color:      #a1fab3;
+$active-color:      #a0dcff;
 
 // Breakpoints
 $sm: 576px;

assets/sass/app.scss

@@ -11,8 +11,6 @@
 @import "container";
 
 // Component specific styling
+@import "layout";
 @import "header";
-@import "hero";
-@import "blog";
 @import "footer";
-@import "home";

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <footer>
     <div class="credits">
         <p>Designed and developed by Daniel de Cloet.</p>
-        <p>Built with <a href="https://vuejs.org/">Vue.js</a>. Iconset provided by <a href="https://fontawesome.com/">Font Awesome</a>.</p>
+        <p>Built with <a href="https://gohugo.io/">Hugo</a>. Iconset provided by <a href="https://fontawesome.com/">Font Awesome</a>.</p>
     </div>
     <div class="social-links">
         <ul>

layouts/partials/header.html

@@ -1,6 +1,6 @@
-<div class="home-header">
-    <div class="container">
 <header>
+    <div class="container">
+        <div class="top-bar">
             <a class="brand" href="/">
                 <img class="brand-logo" src="//via.placeholder.com/256" alt="Brand Logo">
                 <span class="brand-name">Daniel de Cloet</span>
@@ -10,7 +10,8 @@
                     <li class="nav-item"><a href="/snippets">Snippets</a></li>
                 </ul>
             </nav>
-        </header>
+        </div>
+
 
         {{ if $.Params.hero }}
         <section class="hero">
@@ -25,4 +26,4 @@
         <svg preserveAspectRatio="none" width="1440" height="74" viewBox="0 0 1440 74"><path d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"></path></svg>
     </div>
     {{ end }}
-</div>
+</header>