diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss
index 418b4f372cd..6cdd83e04e9 100644
--- a/_sass/misc/article-menu.scss
+++ b/_sass/misc/article-menu.scss
@@ -3,59 +3,62 @@
  */
 
 .post-menu {
-  padding-left: 20px;
-  min-width: 200px;
-  max-width: 230px;
-
-  .post-menu-title {
-    font-size: $base-font-size * 1.5;
-    margin-bottom: 14px;
-    font-weight: 600;
-  }
-
-  .post-menu-content {
-    ul {
-      border-left: 1px solid #e9ecef;
-      $indent: $base-font-size / 4;
-      $active-bgcolor: #ecebec;
-
-      @for $i from 2 to 7 {
-        .h-h#{$i} {
-          padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
-          font-size: $base-font-size * 1.1;
-          line-height: 1.4;
-        }
-      }
+    padding-left: 20px;
+    min-width: 200px;
+    max-width: 230px;
 
-      a {
-        display: flex;
-        padding: 2px 8px;
-        color: darken($text-color, 10%);
+    .post-menu-title {
+        font-size: $base-font-size * 1.5;
+        margin-bottom: 14px;
+        font-weight: 600;
+    }
 
-        * {
-          pointer-events: none;
-        }
+    .post-menu-content {
+        ul {
+            border-left: 1px solid #e9ecef;
+            $indent: calc($base-font-size / 4);
+            $active-bgcolor: #ecebec;
 
-        &:hover {
-          text-decoration: none;
-          color: lighten($text-color, 30%)!important;
-        }
-      }
+            @for $i from 2 to 7 {
+                .h-h#{$i} {
+                    padding-inline-start: $indent +
+                        ($i - 2) *
+                        $base-font-size *
+                        1.3;
+                    font-size: $base-font-size * 1.1;
+                    line-height: 1.4;
+                }
+            }
 
-      .active {
-        background-color: $active-bgcolor;
-        transition: background 0.5s;
-        border-left: 2px solid #202020;
-        margin-left: -2px;
+            a {
+                display: flex;
+                padding: 2px 8px;
+                color: darken($text-color, 10%);
 
-        &:hover {
-          background-color: lighten($active-bgcolor, 2%);
-        }
+                * {
+                    pointer-events: none;
+                }
+
+                &:hover {
+                    text-decoration: none;
+                    color: lighten($text-color, 30%) !important;
+                }
+            }
+
+            .active {
+                background-color: $active-bgcolor;
+                transition: background 0.5s;
+                border-left: 2px solid #202020;
+                margin-left: -2px;
+
+                &:hover {
+                    background-color: lighten($active-bgcolor, 2%);
+                }
 
-        a {
-          color: #121416;
+                a {
+                    color: #121416;
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index cb83d82b81c..c3f072272d6 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -1,316 +1,328 @@
 /**
  * Reset some basic elements
  */
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
-  margin: 0;
-  padding: 0;
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+    margin: 0;
+    padding: 0;
 }
 
-
-
 /**
  * Basic styling
  */
 body {
-  font-family: $base-font-family;
-  font-weight: $base-font-weight;
-  font-size: #{$base-font-size};
-  font-display: swap;
-  line-height: #{$base-line-height};
-  color: $text-color;
-  background-color: $background-color;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-feature-settings: "kern" 1;
-     -moz-font-feature-settings: "kern" 1;
-       -o-font-feature-settings: "kern" 1;
-          font-feature-settings: "kern" 1;
-  font-kerning: normal;
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  transition-duration: $base-transition-duration;
+    font-family: $base-font-family;
+    font-weight: $base-font-weight;
+    font-size: #{$base-font-size};
+    font-display: swap;
+    line-height: #{$base-line-height};
+    color: $text-color;
+    background-color: $background-color;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+    -o-font-feature-settings: "kern" 1;
+    font-feature-settings: "kern" 1;
+    font-kerning: normal;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    transition-duration: $base-transition-duration;
 }
 
-
-
 /**
  * Set `margin-bottom` to maintain vertical rhythm
  */
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-ul, ol, dl, figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
 }
 
-
-
 /**
  * `main` element
  */
 main {
-  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+    display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
 }
 
-
-
 /**
  * Images
  */
 img {
-  max-width: 100%;
-  vertical-align: middle;
+    max-width: 100%;
+    vertical-align: middle;
 }
 
-
-
 /**
  * Figures
  */
 figure > img {
-  display: block;
+    display: block;
 }
 
 figcaption {
-  font-size: $small-font-size;
+    font-size: $small-font-size;
 }
 
-
-
 /**
  * Lists
  */
-ul, ol {
-  margin-left: $spacing-unit;
+ul,
+ol {
+    margin-left: $spacing-unit;
 }
 
 li {
-  > ul,
-  > ol {
-    margin-bottom: 0;
-  }
+    > ul,
+    > ol {
+        margin-bottom: 0;
+    }
 }
 
-
-
 /**
  * Headings
  */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: $base-font-weight * 1.5;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: $base-font-weight * 1.5;
 }
 
 /**
  * Links
  */
 a {
-  color: $brand-color;
-  text-decoration: none;
+    color: $brand-color;
+    text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+        text-decoration: underline;
+    }
 
-  .social-media-list &:hover {
-    text-decoration: none;
+    .social-media-list &:hover {
+        text-decoration: none;
 
-    .username {
-      text-decoration: underline;
+        .username {
+            text-decoration: underline;
+        }
     }
-  }
 }
 
 /**
  * Blockquotes
  */
 blockquote {
-  color: $grey-color;
-  border-left: 4px solid $grey-color-light;
-  padding-left: $spacing-unit / 2;
-  @include relative-font-size(1.125);
-  letter-spacing: -1px;
-  font-style: italic;
-
-  > :last-child {
-    margin-bottom: 0;
-  }
+    color: $grey-color;
+    border-left: 4px solid $grey-color-light;
+    padding-left: calc($spacing-unit / 2);
+    @include relative-font-size(1.125);
+    letter-spacing: -1px;
+    font-style: italic;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
 }
 
-
-
 /**
  * Code formatting
  */
 pre,
 code {
-  @include relative-font-size(0.9375);
-  color: $text-color;
+    @include relative-font-size(0.9375);
+    color: $text-color;
 }
 
 *:not(pre) > code {
-  padding: 3px 6px;
-  border-radius: 3px;
-  background-color: #eee;
-  margin: 0 5px;
+    padding: 3px 6px;
+    border-radius: 3px;
+    background-color: #eee;
+    margin: 0 5px;
 }
 
 pre {
-  overflow-x: auto;
-  position: relative;
-  background-color: #f0f0f0;
-
-  > code {
-    display: inline-block;
-    padding: 20px!important;
-    background-color: transparent;
-    border: 0;
-  }
-
-  table, pre {
-    margin-bottom: 0;
-
-    .gutter, .code {
-      padding: 6px;
-      border: none;
+    overflow-x: auto;
+    position: relative;
+    background-color: #f0f0f0;
+
+    > code {
+        display: inline-block;
+        padding: 20px !important;
+        background-color: transparent;
+        border: 0;
     }
-  }
-}
 
+    table,
+    pre {
+        margin-bottom: 0;
 
+        .gutter,
+        .code {
+            padding: 6px;
+            border: none;
+        }
+    }
+}
 
 /**
  * Wrapper
  */
 .wrapper {
-  max-width: $content-width;
-  margin: auto;
-  padding-right: $spacing-unit;
-  padding-left: $spacing-unit;
-  @extend %clearfix;
+    max-width: $content-width;
+    margin: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
 }
 
-
-
 /**
  * Clearfix
  */
 %clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
+    content: "";
+    display: table;
+    clear: both;
 }
 
-
 /**
  * Tables
  */
 table {
-  display: block;
-  margin-bottom: $spacing-unit;
-  width: 100%;
-  text-align: $table-text-align;
-  color: lighten($text-color, 5%);
-  border-collapse: collapse;
-  overflow: auto;
-
-  tr {
-    &:nth-child(even) {
-      background-color: lighten($grey-color-light, 6%);
+    display: block;
+    margin-bottom: $spacing-unit;
+    width: 100%;
+    text-align: $table-text-align;
+    color: lighten($text-color, 5%);
+    border-collapse: collapse;
+    overflow: auto;
+
+    tr {
+        &:nth-child(even) {
+            background-color: lighten($grey-color-light, 6%);
+        }
     }
-  }
 
-  th, td {
-    padding: ($spacing-unit / 3) ($spacing-unit / 2);
-  }
+    th,
+    td {
+        padding: calc($spacing-unit / 3) calc($spacing-unit / 2);
+    }
 
-  th {
-    background-color: lighten($grey-color-light, 3%);
-    border: 1px solid darken($grey-color-light, 4%);
-    border-bottom-color: darken($grey-color-light, 12%);
-  }
+    th {
+        background-color: lighten($grey-color-light, 3%);
+        border: 1px solid darken($grey-color-light, 4%);
+        border-bottom-color: darken($grey-color-light, 12%);
+    }
 
-  td {
-    border: 1px solid $grey-color-light;
-  }
+    td {
+        border: 1px solid $grey-color-light;
+    }
 }
 
 /**
  * Flex layout
  */
 %flex {
-  display: flex;
+    display: flex;
 }
 
 %flex-1 {
-  flex: 1;
-  min-width: 0; /* <-- fix flexbox width with pre tags  */
+    flex: 1;
+    min-width: 0; /* <-- fix flexbox width with pre tags  */
 }
 
 /**
  * Flex sticky
  */
 @mixin flex-sticky($top) {
-  position: sticky;
-  position: -moz-sticky; /* <-- fix sticky compatibility issue */
-  position: -ms-sticky;
-  position: -o-sticky;
-  position: -webkit-sticky;
-  align-self: flex-start; /* <-- fix the sticky not work issue */
-  transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
-  top: $top;
+    position: sticky;
+    position: -moz-sticky; /* <-- fix sticky compatibility issue */
+    position: -ms-sticky;
+    position: -o-sticky;
+    position: -webkit-sticky;
+    align-self: flex-start; /* <-- fix the sticky not work issue */
+    transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
+    top: $top;
 }
 
 /**
  * Vertical center
  */
 @mixin vertical-center($position) {
-  position: $position;
-  top: 50%;
-  transform: translateY(-50%);
+    position: $position;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 /**
  * Horizontal center
  */
 @mixin horizontal-center($position) {
-  position: $position;
-  left: 50%;
-  transform: translateX(-50%);
+    position: $position;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 /**
  * Center background image
  */
 @mixin center-image {
-  height: 100%;
-  max-width: 1000%;
-  background-size: cover;
-  background-position: center center;
-  overflow: hidden;
+    height: 100%;
+    max-width: 1000%;
+    background-size: cover;
+    background-position: center center;
+    overflow: hidden;
 }
 
 /**
  * Text Selection
  */
 ::selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
-::-moz-selection { /* Code for Firefox */
-  color: $selection-color;
-  background-color: $selection-background-color;
+::-moz-selection {
+    /* Code for Firefox */
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
 ::-ms-selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
 ::-o-selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
 ::-webkit-selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 8f55e5e2a3f..2f9be014662 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -2,827 +2,841 @@
  * Animation for transparent header
  */
 html {
-  &[data-header-transparent] {
-    header.site-header {
-      position: fixed;
+    &[data-header-transparent] {
+        header.site-header {
+            position: fixed;
+        }
     }
-  }
-
-  &[data-scroll-status='top'] {
-    header.site-header-transparent {
-      height: 0;
-      margin-top: 12px;
-      background-color: transparent;
-      transition: 0.1s height,background-color,box-shadow;
 
-      &.site-header {
-        .site-brand-inner, .page-link {
-          color: #fff;
-          transition: 0.1s color;
+    &[data-scroll-status="top"] {
+        header.site-header-transparent {
+            height: 0;
+            margin-top: 12px;
+            background-color: transparent;
+            transition:
+                0.1s height,
+                background-color,
+                box-shadow;
+
+            &.site-header {
+                .site-brand-inner,
+                .page-link {
+                    color: #fff;
+                    transition: 0.1s color;
+                }
+
+                @include media-query($on-laptop) {
+                    .page-link {
+                        color: $header-text-color;
+                    }
+
+                    .menu-icon {
+                        > svg {
+                            fill: $white-color;
+                        }
+                    }
+                }
+            }
         }
 
-        @include media-query($on-laptop) {
-          .page-link {
-            color: $header-text-color;
-          }
+        footer.site-footer {
+            color: unset;
+            background-color: transparent;
 
-          .menu-icon {
-            > svg {
-              fill: $white-color;
+            .site-footer-inner {
+                border-top: solid 1px #eee;
             }
-          }
         }
-      }
     }
 
-    footer.site-footer {
-      color: unset;
-      background-color: transparent;
-
-      .site-footer-inner {
-        border-top: solid 1px #eee;
-      }
-    }
-  }
-
-  &[data-scroll-status='down'] {
-    header.site-header {
-      top: -$header-height;
-    }
+    &[data-scroll-status="down"] {
+        header.site-header {
+            top: -$header-height;
+        }
 
-    .framework .sidebar {
-      top: 20px;
+        .framework .sidebar {
+            top: 20px;
+        }
     }
-  }
 }
 
 /**
  * Site header
  */
 .site-header {
-  background-color: $header-background-color;
-  height: $header-height;
-  width: 100%;
-  transition: height 0.2s, text-shadow 0.2s, top 0.2s;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
-
-  // Positioning context for the mobile navigation icon
-  @include flex-sticky(0);
-  z-index: 1000;
-
-  & > .wrapper {
-    margin: 0 60px;
-    padding: 0;
-    max-width: 100%;
-    transition: 0.2s margin;
-
-    @include media-query(1024px) {
-      margin: 0 20px;
-      max-width: unset;
+    background-color: $header-background-color;
+    height: $header-height;
+    width: 100%;
+    transition:
+        height 0.2s,
+        text-shadow 0.2s,
+        top 0.2s;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+
+    // Positioning context for the mobile navigation icon
+    @include flex-sticky(0);
+    z-index: 1000;
+
+    & > .wrapper {
+        margin: 0 60px;
+        padding: 0;
+        max-width: 100%;
+        transition: 0.2s margin;
+
+        @include media-query(1024px) {
+            margin: 0 20px;
+            max-width: unset;
+        }
     }
-  }
 
-  a {
-    text-decoration: none;
-  }
+    a {
+        text-decoration: none;
+    }
 
-  .site-header-inner {
-    position: relative;
-  }
+    .site-header-inner {
+        position: relative;
+    }
 }
 
 .site-brand {
-  line-height: $header-height;
-  margin-right: 50px;
+    line-height: $header-height;
+    margin-right: 50px;
 
-  .site-brand-inner {
-    @include relative-font-size(1.125);
-    font-weight: $base-font-weight;
-    letter-spacing: -1px;
-    transition: 0.1s filter color;
+    .site-brand-inner {
+        @include relative-font-size(1.125);
+        font-weight: $base-font-weight;
+        letter-spacing: -1px;
+        transition: 0.1s filter color;
 
-    &, &:visited {
-      color: $header-text-color;
-    }
+        &,
+        &:visited {
+            color: $header-text-color;
+        }
 
-    .site-favicon {
-      display: inline-block;
-      height: $header-height / 1.5;
-      margin-right: 5px;
+        .site-favicon {
+            display: inline-block;
+            height: calc($header-height / 1.5);
+            margin-right: 5px;
+        }
     }
-  }
 }
 
 .site-nav {
-  @include relative-font-size(1.125);
-  line-height: $header-height;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  .nav-trigger {
-    display: none;
-  }
-
-  .menu-icon {
-    display: none;
-  }
-
-  .page-link {
-    line-height: $base-line-height;
-    color: $header-text-color;
-    transition: 0.1s ease-in-out;
-
-    // Gaps between nav items, but not on the last one
-    &:not(:last-child) {
-      margin-right: 24px;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  @include media-query($on-laptop) {
+    @include relative-font-size(1.125);
+    line-height: $header-height;
     position: absolute;
+    right: 0;
     top: 0;
-    text-align: left;
 
-    label[for="nav-trigger"] {
-      display: block;
-      z-index: 2;
-      cursor: pointer;
+    .nav-trigger {
+        display: none;
     }
 
     .menu-icon {
-      display: block;
-      float: right;
-      text-align: center;
-
-      > svg {
-        fill: rgba($header-text-color, 80%);
-        transition: 0.1s fill;
-      }
+        display: none;
     }
 
-    input ~ .trigger {
-      clear: both;
-      display: none;
-      border-radius: 3px;
-      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
+    .page-link {
+        line-height: $base-line-height;
+        color: $header-text-color;
+        transition: 0.1s ease-in-out;
+
+        // Gaps between nav items, but not on the last one
+        &:not(:last-child) {
+            margin-right: 24px;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
     }
 
-    input:checked ~ .trigger {
-      display: block;
-      background: $header-background-color;
-    }
+    @include media-query($on-laptop) {
+        position: absolute;
+        top: 0;
+        text-align: left;
+
+        label[for="nav-trigger"] {
+            display: block;
+            z-index: 2;
+            cursor: pointer;
+        }
 
-    .page-link {
-      display: block;
-      padding: 5px 10px;
-      color: rgba($header-text-color, 80%);
-      margin: 0 25px;
+        .menu-icon {
+            display: block;
+            float: right;
+            text-align: center;
+
+            > svg {
+                fill: rgba($header-text-color, 80%);
+                transition: 0.1s fill;
+            }
+        }
+
+        input ~ .trigger {
+            clear: both;
+            display: none;
+            border-radius: 3px;
+            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
+        }
+
+        input:checked ~ .trigger {
+            display: block;
+            background: $header-background-color;
+        }
+
+        .page-link {
+            display: block;
+            padding: 5px 10px;
+            color: rgba($header-text-color, 80%);
+            margin: 0 25px;
+        }
     }
-  }
 }
 
 /**
  * Site footer
  */
 .site-footer {
-  @include relative-font-size(1.0);
-  color: $footer-text-color;
-  background-color: $footer-background-color;
-  text-align: left;
-  transition: background-color 0.2s;
+    @include relative-font-size(1);
+    color: $footer-text-color;
+    background-color: $footer-background-color;
+    text-align: left;
+    transition: background-color 0.2s;
 
-  .site-footer-inner {
-    transition: border-top 0.2s;
-    padding: $spacing-unit * 1.8 0;
-  }
+    .site-footer-inner {
+        transition: border-top 0.2s;
+        padding: $spacing-unit * 1.8 0;
+    }
 
-  a {
-    $a-color: $brand-color;
-    color: $a-color;
+    a {
+        $a-color: $brand-color;
+        color: $a-color;
 
-    &:hover {
-      color: lighten($a-color, 10%);
+        &:hover {
+            color: lighten($a-color, 10%);
+        }
     }
-  }
 }
 
 .copyleft {
-  display: inline-block;
-  transform: rotate(180deg);
+    display: inline-block;
+    transform: rotate(180deg);
 }
 
 /**
  * Post header
  */
 %post-header {
-  .post-header {
-    margin-bottom: $spacing-unit;
-  }
+    .post-header {
+        margin-bottom: $spacing-unit;
+    }
 
-  .post-title {
-    @include relative-font-size(2.625);
-    letter-spacing: -1px;
-    line-height: 1;
+    .post-title {
+        @include relative-font-size(2.625);
+        letter-spacing: -1px;
+        line-height: 1;
 
-    @include media-query($on-laptop) {
-      @include relative-font-size(2.25);
+        @include media-query($on-laptop) {
+            @include relative-font-size(2.25);
+        }
     }
-  }
 
-  .post-tags {
-    padding-right: 150px;
+    .post-tags {
+        padding-right: 150px;
 
-    .post-tag {
-      display: inline-block;
-      margin: 0 12px 0 0;
+        .post-tag {
+            display: inline-block;
+            margin: 0 12px 0 0;
+        }
     }
-  }
 }
 
 /**
  * Page content
  */
 .page-content {
-  @extend %flex-1; /* <-- Keep footer on the bottom */
-  -ms-flex: none; /* <-- Fix IE footer issue */
-  padding: $spacing-unit * 2 0;
-  padding-top: 72px;
+    @extend %flex-1; /* <-- Keep footer on the bottom */
+    -ms-flex: none; /* <-- Fix IE footer issue */
+    padding: $spacing-unit * 2 0;
+    padding-top: 72px;
 }
 
 .page-heading {
-  @include relative-font-size(2);
+    @include relative-font-size(2);
 }
 
 .post-list-heading {
-  @include relative-font-size(1.75);
+    @include relative-font-size(1.75);
 }
 
 /**
  * Pagination page
  */
 .pagination {
-  .post-list {
-    margin-left: 0;
-    list-style: none;
-
-    > li {
-      margin-bottom: $spacing-unit * 1.5;
-      padding-bottom: 30px;
+    .post-list {
+        margin-left: 0;
+        list-style: none;
 
-      &:not(:last-child) {
-        border-bottom: 1px solid #e3e3e3;
-      }
-    }
-  }
+        > li {
+            margin-bottom: $spacing-unit * 1.5;
+            padding-bottom: 30px;
 
-  .post-title {
-    margin-bottom: $spacing-unit * 0.2;
-    transition: 0.2s all;
-
-    a {
-      text-decoration: none;
+            &:not(:last-child) {
+                border-bottom: 1px solid #e3e3e3;
+            }
+        }
     }
-  }
-
-  .post-link {
-    @include relative-font-size(1.65);
-    font-weight: $base-font-weight * 1.5;
-    color: #333;
-  }
-
-  .post-meta {
-    color: $grey-color;
-    font-size: $base-font-size;
-    margin-bottom: $spacing-unit * 0.5;
-  }
-
-  .post-excerpt {
-    display: flex;
-    position: relative;
-    gap: 15px;
-    margin-bottom: 15px;
 
-    .post-image > *:first-child {
-      flex: 0 1 38.2%;
-      width: 100%;
-      height: 100%;
-      background-size: cover;
-      background-position: center center;
-      overflow: hidden;
-      transition: 0.2s all ease-in-out;
-    }
-  }
+    .post-title {
+        margin-bottom: $spacing-unit * 0.2;
+        transition: 0.2s all;
 
-  .post-list {
-    &.none-image-style .post-item .post-excerpt .post-image {
-      display: none;
+        a {
+            text-decoration: none;
+        }
     }
 
-    &.left-image-style .post-item .post-excerpt {
-      flex-direction: row;
+    .post-link {
+        @include relative-font-size(1.65);
+        font-weight: $base-font-weight * 1.5;
+        color: #333;
     }
 
-    &.right-image-style .post-item .post-excerpt {
-      flex-direction: row-reverse;
+    .post-meta {
+        color: $grey-color;
+        font-size: $base-font-size;
+        margin-bottom: $spacing-unit * 0.5;
+    }
+
+    .post-excerpt {
+        display: flex;
+        position: relative;
+        gap: 15px;
+        margin-bottom: 15px;
+
+        .post-image > *:first-child {
+            flex: 0 1 38.2%;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center center;
+            overflow: hidden;
+            transition: 0.2s all ease-in-out;
+        }
     }
 
-    &.post-list.top-image-style .post-item .post-excerpt {
-      flex-direction: column;
-    }
+    .post-list {
+        &.none-image-style .post-item .post-excerpt .post-image {
+            display: none;
+        }
 
-    &.z-image-style .post-item:nth-child(even) .post-excerpt {
-      flex-direction: row-reverse;
-    }
+        &.left-image-style .post-item .post-excerpt {
+            flex-direction: row;
+        }
 
-    &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
-      flex-direction: row-reverse;
-    }
+        &.right-image-style .post-item .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-    .post-item .post-excerpt {
-      @include media-query($on-laptop) {
-        flex-direction: column !important;
-      }
-    }
-  }
+        &.post-list.top-image-style .post-item .post-excerpt {
+            flex-direction: column;
+        }
 
-  .post-text {
-    color: $grey-color;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    flex: 1;
-  }
+        &.z-image-style .post-item:nth-child(even) .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-  .post-tags .post-tag {
-    display: inline-block;
-    text-decoration: none;
-    border: 1px solid;
-    padding: 2px 4px;
-    border-radius: 2px;
-    transition: color 0.2s;
-    margin-bottom: 8px;
+        &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-    &:not(:last-child) {
-      margin-right: 8px;
+        .post-item .post-excerpt {
+            @include media-query($on-laptop) {
+                flex-direction: column !important;
+            }
+        }
     }
 
-    &:hover {
-      color: #787878;
+    .post-text {
+        color: $grey-color;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        flex: 1;
     }
-  }
 
-  .paginator {
-    text-align: center;
+    .post-tags .post-tag {
+        display: inline-block;
+        text-decoration: none;
+        border: 1px solid;
+        padding: 2px 4px;
+        border-radius: 2px;
+        transition: color 0.2s;
+        margin-bottom: 8px;
+
+        &:not(:last-child) {
+            margin-right: 8px;
+        }
 
-    & > .previous:before {
-      content: ' ';
-      border: solid #787878;
-      border-width: 0 2px 2px 0;
-      display: inline-block;
-      padding: 4px;
-      margin-right: 8px;
-      transform: rotate(135deg);
-      -webkit-transform: rotate(135deg);
+        &:hover {
+            color: #787878;
+        }
     }
 
-    & > .next:after {
-      content: ' ';
-      border: solid #787878;
-      border-width: 0 2px 2px 0;
-      display: inline-block;
-      padding: 4px;
-      margin-left: 8px;
-      transform: rotate(-45deg);
-      -webkit-transform: rotate(-45deg);
-    }
+    .paginator {
+        text-align: center;
 
-    .previous span, .next span {
-      color: #b3b3b3;
-    }
+        & > .previous:before {
+            content: " ";
+            border: solid #787878;
+            border-width: 0 2px 2px 0;
+            display: inline-block;
+            padding: 4px;
+            margin-right: 8px;
+            transform: rotate(135deg);
+            -webkit-transform: rotate(135deg);
+        }
+
+        & > .next:after {
+            content: " ";
+            border: solid #787878;
+            border-width: 0 2px 2px 0;
+            display: inline-block;
+            padding: 4px;
+            margin-left: 8px;
+            transform: rotate(-45deg);
+            -webkit-transform: rotate(-45deg);
+        }
 
-    .indicator {
-      padding: 0 15px;
+        .previous span,
+        .next span {
+            color: #b3b3b3;
+        }
+
+        .indicator {
+            padding: 0 15px;
+        }
     }
-  }
 }
 
-
 /**
  * Posts
  */
 .post {
-  @extend %post-header;
+    @extend %post-header;
 
-  .post-header {
-    margin: 50px auto 60px;
-    padding: 0 0 20px;
-    border-bottom: 1px solid #ebebeb;
+    .post-header {
+        margin: 50px auto 60px;
+        padding: 0 0 20px;
+        border-bottom: 1px solid #ebebeb;
 
-    .post-title {
-      margin-bottom: 6px;
-    }
+        .post-title {
+            margin-bottom: 6px;
+        }
 
-    .post-subtitle {
-      font-weight: 300;
-    }
+        .post-subtitle {
+            font-weight: 300;
+        }
 
-    .post-meta {
-      color: $grey-color;
-      padding-bottom: 15px;
+        .post-meta {
+            color: $grey-color;
+            padding-bottom: 15px;
+        }
     }
-  }
 
-  .post-content {
-    margin-bottom: $spacing-unit;
-    overflow-wrap: normal;
-    word-wrap: normal;
-    word-break: normal;
+    .post-content {
+        margin-bottom: $spacing-unit;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
 
-    h2 {
-      @include relative-font-size(2);
+        h2 {
+            @include relative-font-size(2);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.75);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.75);
+            }
+        }
 
-    h3 {
-      @include relative-font-size(1.625);
+        h3 {
+            @include relative-font-size(1.625);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.375);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.375);
+            }
+        }
 
-    h4 {
-      @include relative-font-size(1.25);
+        h4 {
+            @include relative-font-size(1.25);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.125);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.125);
+            }
+        }
 
-    img, svg, iframe {
-      margin-left: auto;
-      margin-right: auto;
-    }
+        img,
+        svg,
+        iframe {
+            margin-left: auto;
+            margin-right: auto;
+        }
 
-    img:not(.emoji), svg, iframe {
-      display: block;
-      max-height: 50vh;
-    }
+        img:not(.emoji),
+        svg,
+        iframe {
+            display: block;
+            max-height: 50vh;
+        }
 
-    h2, h3, h4, h5, h6 {
-      margin: 60px 0 19px;
-    }
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 60px 0 19px;
+        }
 
-    p, hr {
-      margin-bottom: 24px;
-    }
+        p,
+        hr {
+            margin-bottom: 24px;
+        }
 
-    hr {
-      height: 1px;
-      background-color: #ebebeb;
-      border: none;
+        hr {
+            height: 1px;
+            background-color: #ebebeb;
+            border: none;
+        }
     }
-  }
 
-  .post-related {
-    &>*:first-child {
-      @include relative-font-size(1.425);
-      color: #333;
-      margin-bottom: 14px;
-    }
+    .post-related {
+        & > *:first-child {
+            @include relative-font-size(1.425);
+            color: #333;
+            margin-bottom: 14px;
+        }
 
-    ul {
-      margin-left: 15px;
-    }
+        ul {
+            margin-left: 15px;
+        }
 
-    .post-link {
-      @include relative-font-size(1.075);
-      color: $grey-color;
+        .post-link {
+            @include relative-font-size(1.075);
+            color: $grey-color;
 
-      &:hover {
-        color: darken($grey-color, 50%);
-      }
+            &:hover {
+                color: darken($grey-color, 50%);
+            }
+        }
     }
-  }
 }
 
 .post-comments {
-  padding-top: 25px;
+    padding-top: 25px;
 }
 
 /**
  * Posts misc
  */
 .post-nav {
-  display: flex;
-  justify-content: space-between;
-  margin: 72px 0 59px;
-  padding: 31px 0 0;
+    display: flex;
+    justify-content: space-between;
+    margin: 72px 0 59px;
+    padding: 31px 0 0;
 
-  a {
-    @include relative-font-size(1.125);
-    color: $grey-color;
-    line-height: 15px;
-    max-width: 50%;
-  }
-
-  .previous:before {
-    content: ' ';
-    border: solid #787878;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 4px;
-    margin-right: 8px;
-    transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
-  }
-
-  .next:after {
-    content: ' ';
-    border: solid #787878;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 4px;
-    margin-left: 8px;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-  }
-}
+    a {
+        @include relative-font-size(1.125);
+        color: $grey-color;
+        line-height: 15px;
+        max-width: 50%;
+    }
 
+    .previous:before {
+        content: " ";
+        border: solid #787878;
+        border-width: 0 2px 2px 0;
+        display: inline-block;
+        padding: 4px;
+        margin-right: 8px;
+        transform: rotate(135deg);
+        -webkit-transform: rotate(135deg);
+    }
+
+    .next:after {
+        content: " ";
+        border: solid #787878;
+        border-width: 0 2px 2px 0;
+        display: inline-block;
+        padding: 4px;
+        margin-left: 8px;
+        transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+    }
+}
 
 /**
  * Archives page
  */
 .page-archives {
-  .page-archives-list {
-    margin-left: 0;
-    list-style: none;
-  }
+    .page-archives-list {
+        margin-left: 0;
+        list-style: none;
+    }
 
-  .archives-time {
-    @include relative-font-size(1.5);
+    .archives-time {
+        @include relative-font-size(1.5);
 
-    &:not(:first-child) {
-      margin-top: 18px;
+        &:not(:first-child) {
+            margin-top: 18px;
+        }
+        margin-bottom: 8px;
     }
-    margin-bottom: 8px;
-  }
 
-  .post-meta {
-    font-size: $small-font-size;
-    color: $grey-color;
-  }
+    .post-meta {
+        font-size: $small-font-size;
+        color: $grey-color;
+    }
 }
 
-
 /**
  * Page banner
  */
 .page-banner {
-  display: block;
-  position: relative;
-  height: $banner-height;
-  background-color: $banner-background;
-  transition: height 0.2s;
-
-  .page-banner-img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
+    display: block;
+    position: relative;
+    height: $banner-height;
+    background-color: $banner-background;
+    transition: height 0.2s;
+
+    .page-banner-img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        & > *:first-child {
+            @include center-image;
+            transition: 0.1s all ease-in-out;
+        }
 
-    & > *:first-child {
-      @include center-image;
-      transition: 0.1s all ease-in-out;
-    }
+        & > video {
+            width: 100vw;
+            object-fit: cover;
+        }
 
-    & > video {
-      width: 100vw;
-      object-fit: cover;
+        & > img.img-placeholder {
+            display: none;
+        }
     }
 
-    & > img.img-placeholder {
-      display: none;
+    .wrapper {
+        height: 100%;
     }
-  }
 
-  .wrapper {
-    height: 100%;
-  }
+    .page-banner-inner {
+        @include vertical-center(relative);
 
-  .page-banner-inner {
-    @include vertical-center(relative);
+        color: $banner-text-color;
+        padding: 10px 5px;
+        text-shadow: 1px 1px 2px #33333355;
 
-    color: $banner-text-color;
-    padding: 10px 5px;
-    text-shadow: 1px 1px 2px #33333355;
+        & > *:first-child {
+            margin: 0;
 
-    & > *:first-child {
-      margin: 0;
+            > :nth-child(1) {
+                @include relative-font-size(3.9);
+                letter-spacing: -1px;
+                margin-bottom: 0.1em;
+                font-weight: normal;
+                transition: 0.2s all;
 
-      > :nth-child(1) {
-        @include relative-font-size(3.9);
-        letter-spacing: -1px;
-        margin-bottom: 0.1em;
-        font-weight: normal;
-        transition: 0.2s all;
+                @include media-query($on-palm) {
+                    @include relative-font-size(1.975);
+                }
+            }
 
-        @include media-query($on-palm) {
-          @include relative-font-size(1.975);
-        }
-      }
+            > :nth-child(2) {
+                font-weight: lighter;
+                margin-bottom: 0.8em;
+                transition: 0.2s all;
 
-      > :nth-child(2) {
-        font-weight: lighter;
-        margin-bottom: 0.8em;
-        transition: 0.2s all;
+                @include media-query($on-palm) {
+                    @include relative-font-size(1.175);
+                }
+            }
 
-        @include media-query($on-palm) {
-          @include relative-font-size(1.175);
+            > :last-child {
+                margin-bottom: 0;
+            }
         }
-      }
 
-      > :last-child {
-        margin-bottom: 0;
-      }
-    }
+        .post-subtitle {
+            @include relative-font-size(1.525);
+            color: #ffffffcc;
+            padding-right: 280px;
 
-    .post-subtitle {
-      @include relative-font-size(1.525);
-      color: #ffffffcc;
-      padding-right: 280px;
-
-      @include media-query($on-palm) {
-        padding-right: 0;
-      }
-    }
+            @include media-query($on-palm) {
+                padding-right: 0;
+            }
+        }
 
-    .post-meta {
-      color: #ffffffcc;
-      padding-bottom: 1em;
-    }
+        .post-meta {
+            color: #ffffffcc;
+            padding-bottom: 1em;
+        }
 
-    .left-vsplit:before {
-      background: #e3e3e388;
-    }
+        .left-vsplit:before {
+            background: #e3e3e388;
+        }
 
-    .post-tags {
-      color: #999;
-      padding-right: 280px;
+        .post-tags {
+            color: #999;
+            padding-right: 280px;
 
-      @include media-query($on-palm) {
-        padding-right: 0;
-      }
+            @include media-query($on-palm) {
+                padding-right: 0;
+            }
 
-      .post-tag {
-        @include relative-font-size(1.125);
-        display: inline-block;
-        text-decoration: none;
-        margin: 9px 12px 0 0;
-        color: #fff;
+            .post-tag {
+                @include relative-font-size(1.125);
+                display: inline-block;
+                text-decoration: none;
+                margin: 9px 12px 0 0;
+                color: #fff;
 
-        &:hover {
-          text-decoration: underline;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
         }
-      }
     }
-  }
 
-  @include media-query($on-palm) {
-    height: $banner-height / 1.5;
-  }
+    @include media-query($on-palm) {
+        height: calc($banner-height / 1.5);
+    }
 }
 
-
 /**
  * Layout and sidebar
  */
 .framework {
     @extend %flex;
 
-  .main {
-    @extend %flex-1;
-  }
+    .main {
+        @extend %flex-1;
+    }
 
-  .sidebar {
-    padding-left: 8px;
-    transition: top 0.2s, display 0.2s;
+    .sidebar {
+        padding-left: 8px;
+        transition:
+            top 0.2s,
+            display 0.2s;
 
-    @include flex-sticky($header-height + 20px);
+        @include flex-sticky($header-height + 20px);
 
-    @include media-query($on-laptop) {
-      display: none;
+        @include media-query($on-laptop) {
+            display: none;
+        }
     }
-
-  }
 }
 
-
 /**
  * Segments page
  */
 .page-segments {
-  .page-segments-list {
-    margin-left: 0;
-    list-style: none;
-  }
-
-  .segment-name {
-    font-weight: $base-font-weight * 1.5;
-    margin-bottom: 8px;
-    position: relative;
+    .page-segments-list {
+        margin-left: 0;
+        list-style: none;
+    }
 
-    @include relative-font-size(1.6);
+    .segment-name {
+        font-weight: $base-font-weight * 1.5;
+        margin-bottom: 8px;
+        position: relative;
 
-    &:not(:first-child) {
-      margin-top: 28px;
-    }
+        @include relative-font-size(1.6);
 
-    &:hover:before {
-      content: '#';
-      left: -1em;
-      position: absolute;
-    }
-  }
+        &:not(:first-child) {
+            margin-top: 28px;
+        }
 
-  .post-meta {
-    font-size: $small-font-size;
-    color: $grey-color;
-  }
+        &:hover:before {
+            content: "#";
+            left: -1em;
+            position: absolute;
+        }
+    }
 
-  li a {
-    &.post-link {
-      margin-left: 5px;
+    .post-meta {
+        font-size: $small-font-size;
+        color: $grey-color;
     }
 
-    color: #303030;
+    li a {
+        &.post-link {
+            margin-left: 5px;
+        }
+
+        color: #303030;
 
-    &:hover {
-      color: #000;
+        &:hover {
+            color: #000;
+        }
     }
-  }
 }
 
 .left-vsplit:before {
-  content: "";
-  display: inline-block;
-  width: 1px;
-  height: 10px;
-  margin: 0 10px;
-  background-color: #e3e3e3e3;
-  vertical-align: baseline;
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 10px;
+    margin: 0 10px;
+    background-color: #e3e3e3e3;
+    vertical-align: baseline;
 }
 
 /**
  * Post badge
  */
 .post-badges {
-  display: inline-block;
-  position: relative;
-  margin-left: 8px;
-  margin-top: 3px;
-  user-select: none;
+    display: inline-block;
+    position: relative;
+    margin-left: 8px;
+    margin-top: 3px;
+    user-select: none;
 }
 
 .pagination .post-badges {
-  bottom: 0.5em;
+    bottom: 0.5em;
 }
 
 .post-related .post-badges {
-  bottom: 0.1em;
+    bottom: 0.1em;
 }
 
 .page-segments .post-badges {
-  bottom: 0.1em;
+    bottom: 0.1em;
 }
 
 .post-badge {
-  display: none;
-  padding: 0px 3px;
-  background-color: $brand-color;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  border-radius: 2px;
-  transition-duration: $base-transition-duration;
+    display: none;
+    padding: 0px 3px;
+    background-color: $brand-color;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    border-radius: 2px;
+    transition-duration: $base-transition-duration;
 }
 
 .post-badge.badge-new {
-  display: inline-block;
+    display: inline-block;
 }
 
 .top-post .post-badges .post-badge.badge-top {
-  display: inline-block;
+    display: inline-block;
 }
 
 a:visited .post-badges .post-badge.badge-new {
-  display: none;
-  color: $background-color;
-  background-color: $background-color;
+    display: none;
+    color: $background-color;
+    background-color: $background-color;
 }