_sass/hamilton/layout.scss in jekyll-theme-hamilton-1.3.0 vs _sass/hamilton/layout.scss in jekyll-theme-hamilton-1.4.0

@@ -1,27 +1,57 @@
 /**
+ * Site container
+ */
+.site-container {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: $base-font-size * 3 1fr;
+}
+
+/**
  * Site header
  */
 .site-header {
   border-top: 5px solid;
   border-bottom: 1px solid;
   min-height: $base-font-size * 3;
   line-height: $base-font-size * 3;
+  position: sticky;
+  top: 0;
 
-  // Positioning context for the mobile navigation icon
-  position: relative;
+  @include media-query($on-small) {
+    display: flex;
+  }
 }
 
+.site-sidebar-button {
+  position: absolute;
+  top: -2px;
+  left: $spacing-unit / 2;
+
+  img {
+    width: $base-font-size * 2.5;
+    height: auto;
+    border-radius: 50%;
+  }
+
+  @media screen and (min-width: $on-small) {
+    display: none;
+  }
+}
+
 .site-title {
   @include relative-font-size(1.625);
   font-family: $title-font-family;
   letter-spacing: -1px;
   margin-bottom: 0;
   float: left;
 
-  @include media-query($on-medium) {
-    padding-right: 45px;
+  @include media-query($on-small) {
+    float: center;
   }
 }
 
 .site-nav {
   position: absolute;
@@ -148,10 +178,120 @@
     }
   }
 }
 
 /**
+ * Site body
+ */
+.site-body {
+  display: grid;
+  grid-template-columns: calc(#{$content-width} * 0.2) 1fr;
+  overflow: hidden;
+
+  @include media-query($on-medium) {
+    grid-template-columns: calc(#{$content-width} * 0.15) 1fr;
+  }
+
+  @include media-query($on-small) {
+    grid-template-columns: 1fr;
+  }
+}
+
+/**
+ * Site sidebar
+ */
+.site-sidebar {
+  padding: $spacing-unit / 2;
+  border-right: 1px solid;
+  @include relative-font-size(0.8);
+
+  @include media-query($on-medium) {
+    @include relative-font-size(0.6);
+  }
+
+  @include media-query($on-small) {
+    display: none;
+    border-right: none;
+    border-bottom: 1px solid;
+  }
+
+  @media screen and (min-width: $on-small) {
+    display: block !important;
+  }
+}
+
+.sidebar-section {
+  padding-bottom: $spacing-unit / 2;
+  border-bottom: 1px solid;
+  margin-bottom: $spacing-unit / 2;
+
+  &:last-child {
+    padding-bottom: 0;
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+}
+
+.sidebar-icon {
+  margin-right: 0.5em;
+}
+
+.feed-subscribe {
+  font-weight: bold;
+  text-align: left;
+}
+
+.contact-list {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+.social-icons {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: 0;
+  text-align: left;
+  display: flex;
+
+  .social-icon {
+    margin: 0.3em;
+  }
+}
+
+.author-avatar {
+  width: $base-font-size * 9;
+  height: auto;
+  border-radius: 50%;
+}
+
+/**
+ * Site main
+ */
+.site-main {
+  flex: 1 0 auto;
+  overflow-y: scroll;
+
+  // Hide scrollbar for IE, Edge and Firefox
+  -ms-overflow-style: none;  // IE and Edge
+  scrollbar-width: none;     // Firefox
+
+  padding-left: $spacing-unit / 2;
+  padding-right: $spacing-unit / 2;
+
+  @include media-query($on-small) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+// Hide scrollbar for Chrome, Safari and Opera
+.site-main::-webkit-scrollbar {
+  display: none;
+}
+
+/**
  * Homepage
  */
 .home {
   margin-top: $spacing-unit;
 }
@@ -214,22 +354,16 @@
     }
   }
 }
 
 /**
- * Page content
- */
-.page-content {
-  flex: 1 0 auto;
-}
-
-/**
  * Posts
  */
 .post-header {
-  padding-top: $spacing-unit * 2.5;
-  padding-bottom: $spacing-unit * 2.5;
+  padding-top: $spacing-unit * 2;
+  padding-bottom: $spacing-unit / 2;
+  border-bottom: 1px solid;
   margin-bottom: $spacing-unit * 2;
   text-align: center;
 }
 
 .post-meta {
@@ -374,10 +508,11 @@
 
 /**
  * Site footer
  */
 .site-footer {
+  margin-top: $spacing-unit * 2;
   border-top: 1px solid;
   padding: $spacing-unit 0;
   @include relative-font-size(0.8);
 
   p, ul {
@@ -401,29 +536,7 @@
 
     &:last-child {
       padding-right: 0;
       padding-left: $spacing-unit / 2;
     }
-  }
-}
-
-.feed-subscribe {
-  font-weight: bold;
-  text-align: left;
-  .feed-icon {
-    margin-right: 0.3em;
-  }
-}
-
-.contact-list {
-  list-style: none;
-  margin-left: 0;
-}
-
-.social-icons {
-  text-align: center;
-  margin-top: $spacing-unit / 2;
-
-  .social-icon {
-    margin: 0.3em;
   }
 }