layout.scss in jekyll-theme-hamilton-2.0.0

- old
+ new

@@ -39,11 +39,11 @@
   }
 }
 
 .site-title {
   @include relative-font-size(1.625);
-  font-family: $title-font-family;
+  font-family: $handwriting-font-family;
   letter-spacing: -1px;
   margin-bottom: 0;
   float: left;
 
   @include media-query($on-small) {
@@ -180,11 +180,11 @@
 /**
  * Site body
  */
 .site-body {
   display: grid;
-  grid-template-columns: calc(#{$content-width} * 0.2) 1fr;
+  grid-template-columns: calc(#{$content-width} * 0.22) 1fr;
   overflow: hidden;
 
   @include media-query($on-medium) {
     grid-template-columns: calc(#{$content-width} * 0.15) 1fr;
   }
@@ -196,15 +196,16 @@
 
 /**
  * Site sidebar
  */
 .site-sidebar {
-  padding: $spacing-unit / 2;
+  padding: $spacing-unit;
   border-right: 1px solid;
   @include relative-font-size(0.8);
 
   @include media-query($on-medium) {
+    padding: $spacing-unit / 2;
     @include relative-font-size(0.6);
   }
 
   @include media-query($on-small) {
     display: none;
@@ -242,18 +243,17 @@
   list-style: none;
   margin-left: 0;
   margin-bottom: 0;
 }
 
-.social-icons {
+ul.social-icons {
   list-style: none;
   margin-left: 0;
   margin-bottom: 0;
-  text-align: left;
-  display: flex;
 
-  .social-icon {
+  > li {
+    display: inline-block;
     margin: 0.3em;
   }
 }
 
 .author-avatar {
@@ -271,13 +271,18 @@
 
   // 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;
+  padding-left: $spacing-unit;
+  padding-right: $spacing-unit;
 
+  @include media-query($on-medium) {
+    padding-left: $spacing-unit / 2;
+    padding-right: $spacing-unit / 2;
+  }
+
   @include media-query($on-small) {
     padding-left: 0;
     padding-right: 0;
   }
 }
@@ -305,10 +310,15 @@
     border-bottom: 1px solid;
     margin-bottom: $spacing-unit;
 
     h2 {
       margin-bottom: 0;
+      @include relative-font-size(1.4);
+
+      @media screen and (min-width: $on-large) {
+        @include relative-font-size(1.5);
+      }
     }
 
     .post-excerpt {
       margin-top: $spacing-unit / 2;
 
@@ -317,18 +327,10 @@
       }
     }
   }
 }
 
-.post-link {
-  @include relative-font-size(1.5);
-
-  @media screen and (min-width: $on-large) {
-    @include relative-font-size(1.55);
-  }
-}
-
 /**
  * Pagination
  */
 .pagination {
   list-style: none;
@@ -356,42 +358,64 @@
 /**
  * Posts
  */
 .post-header {
   padding-top: $spacing-unit * 2;
-  padding-bottom: $spacing-unit / 2;
+  padding-bottom: $spacing-unit;
   border-bottom: 1px solid;
   margin-bottom: $spacing-unit * 2;
   text-align: center;
 }
 
 .post-meta {
   @include relative-font-size(0.8);
   margin-bottom: $spacing-unit / 2;
 }
 
-.post-tags {
-  .post-tag {
-    margin-right: $spacing-unit / 2;
+.post-footer {
+  padding-top: $spacing-unit / 2;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+
+ul.post-taxonomies {
+  list-style: none;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 0 $spacing-unit / 3;
+
+  li {
+    float: left;
+    margin-right: $spacing-unit / 6;
+    padding: 0.3em 0.5em 0.2em 0.5em;
   }
-  
-  > :last-child {
-    margin-right: 0;
+}
+
+ul.post-tags {
+  li {
+    border-radius: 0.5em;
   }
 }
 
+ul.post-categories {
+  li {
+    text-decoration: underline;
+  }
+}
 
+
 // About font sizes for h1-h6, refer to https://stackoverflow.com/a/6140504/13261366
 .post-title,
 .post-content h1 {
-  @include relative-font-size(2);
+  font-family: $display-font-family;
+  @include relative-font-size(1.8);
   font-weight: bold;
   letter-spacing: -1px;
   line-height: $base-line-height * $base-font-size * 2;
 
   @media screen and (min-width: $on-large) {
-    @include relative-font-size(2.5);
+    @include relative-font-size(2);
   }
 }
 
 .post-content {
   font-family: $reading-font-family;
@@ -400,22 +424,18 @@
   h2     { margin-top: $spacing-unit * 2 }
   h3, h4 { margin-top: $spacing-unit * 1.5 }
   h5, h6 { margin-top: $spacing-unit }
 
   h2 {
-    @include relative-font-size(1.5);
+    @include relative-font-size(1.4);
 
     @media screen and (min-width: $on-large) {
-      @include relative-font-size(1.55);
+      @include relative-font-size(1.5);
     }
   }
 
   h3 {
     @include relative-font-size(1.17);
-
-    @media screen and (min-width: $on-large) {
-      @include relative-font-size(1.175);
-    }
   }
 
   h4 {
     @include relative-font-size(1.12);
   }