jekyll-theme-yat 1.1.0 → 1.4.0

data/_sass/yat/_base.scss

@@ -14,7 +14,10 @@ dl, dd, ol, ul, figure {
  * Basic styling
  */
 body {
-  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  font-family: $base-font-family;
+  font-weight: $base-font-weight;
+  font-size: #{$base-font-size};
+  line-height: #{$base-line-height};
   color: $text-color;
   background-color: $background-color;
   -webkit-text-size-adjust: 100%;
@@ -107,7 +110,7 @@ a {
   text-decoration: none;
 
   &:visited {
-    color: darken($brand-color, 15%);
+    color: #606060;
   }
 
   &:hover {
@@ -149,22 +152,50 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
-  border-radius: 3px;
-  background-color: #3d3d3d;
+  color: $text-color;
 }
 
-code {
+*:not(pre) > code {
   padding: 1px 5px;
+  border-radius: 3px;
+  color: #fff;
+  background-color: $brand-color;
 }
 
 pre {
-  padding: 8px 12px;
   overflow-x: auto;
+  position: relative;
+  background-color: #f0f0f0;
+
+  // code language badge
+  &:before {
+    content: attr(data-lang);
+    color: #fff;
+    background-color: #ff4e00;
+    padding: 0 .5em;
+    border-radius: 0 2px;
+    text-transform: uppercase;
+    text-align: center;
+    min-width: 32px;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
 
   > code {
+    display: inline-block;
+    padding: 20px!important;
+    background-color: transparent;
     border: 0;
-    padding-right: 0;
-    padding-left: 0;
+  }
+
+  table, pre {
+    margin-bottom: 0;
+
+    .gutter, .code {
+      padding: 6px;
+      border: none;
+    }
   }
 }
 
@@ -179,11 +210,6 @@ pre {
   padding-right: $spacing-unit;
   padding-left: $spacing-unit;
   @extend %clearfix;
-
-  @include media-query($on-laptop) {
-    padding-right: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
-  }
 }
 
 
@@ -205,22 +231,25 @@ table {
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: $table-text-align;
-  color: lighten($text-color, 18%);
+  color: lighten($text-color, 5%);
   border-collapse: collapse;
-  border: 1px solid $grey-color-light;
+
   tr {
     &:nth-child(even) {
       background-color: lighten($grey-color-light, 6%);
     }
   }
+
   th, td {
     padding: ($spacing-unit / 3) ($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%);
   }
+
   td {
     border: 1px solid $grey-color-light;
   }
@@ -229,7 +258,7 @@ table {
 /**
  * Flex layout
  */
-%flex-layout {
+%flex {
   display: flex;
 }
 
@@ -243,6 +272,10 @@ table {
  */
 @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;

data/_sass/yat/_layout.scss

@@ -1,40 +1,109 @@
+/**
+ * Animation for transparent header
+ */
+html {
+  &[data-header-transparent] {
+    header.site-header {
+      position: fixed;
+    }
+  }
+
+  &[data-scroll-status='top'] {
+    header.site-header-transparent {
+      height: 0;
+      margin-top: 20px;
+      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: unset;
+          }
+
+          .menu-icon {
+            > svg {
+              fill: $white-color;
+            }
+          }
+        }
+      }
+    }
+
+    footer.site-footer {
+      background-color: transparent;
+
+      .site-footer-inner {
+        border-top: solid 1px #eee;
+      }
+    }
+  }
+
+  &[data-scroll-status='down'] {
+    header.site-header {
+      top: -$header-height;
+    }
+
+    .framework .sidebar {
+      top: 20px;
+    }
+  }
+}
+
 /**
  * Site header
  */
 .site-header {
-  background: $header-background-color;
+  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;
+    }
+  }
+
   a {
     text-decoration: none;
   }
+
+  .site-header-inner {
+    position: relative;
+  }
 }
 
 .site-brand {
-  @include vertical-center(absolute);
+  line-height: $header-height;
   margin-right: 50px;
 
   .site-brand-inner {
     @include relative-font-size(1.125);
     font-weight: $base-font-weight;
-    filter: drop-shadow(0 0 2px #08080880);
-    text-shadow: 0 0 2px #080808d0;
     letter-spacing: -1px;
-    transition: drop-shadow 0.2s;
+    transition: 0.1s filter color;
 
     &, &:visited {
       color: $header-text-color;
     }
 
-    &:hover {
-      filter: drop-shadow(0 0 3px #080808a0);
-    }
-
     .site-favicon {
       display: inline-block;
       height: $header-height / 1.5;
@@ -44,9 +113,11 @@
 }
 
 .site-nav {
-  @include relative-font-size(1.025);
-  float: right;
+  @include relative-font-size(1.125);
   line-height: $header-height;
+  position: absolute;
+  right: 0;
+  top: 0;
 
   .nav-trigger {
     display: none;
@@ -57,23 +128,26 @@
   }
 
   .page-link {
-    color: $header-text-color;
     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: 20px;
+      margin-right: 24px;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 
-  @include media-query($on-palm) {
+  @include media-query($on-laptop) {
     position: absolute;
-    right: $spacing-unit / 2;
+    top: 0;
     text-align: left;
 
     label[for="nav-trigger"] {
       display: block;
-      float: right;
       z-index: 2;
       cursor: pointer;
     }
@@ -84,13 +158,16 @@
       text-align: center;
 
       > svg {
-        fill: $white-color;
+        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, .06);
     }
 
     input:checked ~ .trigger {
@@ -111,14 +188,19 @@
  * Site footer
  */
 .site-footer {
-  @include relative-font-size(0.9);
+  @include relative-font-size(1.0);
   color: $footer-text-color;
-  background: $footer-background-color;
-  padding: $spacing-unit * 0.8 0;
+  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;
+  }
 
   a {
-    $a-color: invert(mix(invert($theme-color), #0030ae));
+    $a-color: $brand-color;
     color: $a-color;
 
     &:hover {
@@ -144,6 +226,15 @@
       @include relative-font-size(2.25);
     }
   }
+
+  .post-tags {
+    display: inline-block;
+    padding-right: 150px;
+
+    .post-tag {
+      margin: 0 12px 0 0;
+    }
+  }
 }
 
 /**
@@ -151,7 +242,8 @@
  */
 .page-content {
   @extend %flex-1; /* <-- Keep footer on the bottom */
-  padding: $spacing-unit * 1.5 0;
+  -ms-flex: none; /* <-- Fix IE footer issue */
+  padding: $spacing-unit * 2 0;
 }
 
 .page-heading {
@@ -171,20 +263,104 @@
     list-style: none;
 
     > li {
-      margin-bottom: $spacing-unit;
+      margin-bottom: $spacing-unit * 1.5;
+      padding-bottom: 30px;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e3e3e3;
+      }
+    }
+  }
+
+  .post-title {
+    margin-bottom: 2px;
+    transition: 0.2s all;
+
+    a {
+      text-decoration: none;
+
+      &:after {
+        content: 'NEW';
+        position: absolute;
+        margin-left: 8px;
+        margin-top: 3px;
+        padding: 0px 3px;
+        background-color: $brand-color;
+        color: #fff;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 2px;
+      }
+
+      &:visited:after {
+        background-color: #fff;
+      }
     }
   }
 
   .post-meta {
-    font-size: $small-font-size;
+    font-size: $base-font-size;
     color: $grey-color;
+    margin-bottom: $spacing-unit * 0.5;
   }
 
   .post-link {
     @include relative-font-size(1.5);
+    font-weight: $base-font-weight * 1.5;
+    color: #15171a;
+  }
+
+  .post-excerpt {
+    color: #777;
+  }
+
+  .post-tags .post-tag {
+    text-decoration: none;
+    border: 1px solid;
+    padding: 2px 4px;
+    border-radius: 2px;
+
+    &:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+
+  .paginator {
+    text-align: center;
+
+    & > .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);
+    }
+
+    .previous span, .next span {
+      color: #b3b3b3;
+    }
+
+    a:hover {
+      color: #000;
+    }
 
-    display: block;
-    font-weight: 600;
+    .indicator {
+      padding: 0 15px;
+    }
   }
 }
 
@@ -195,6 +371,20 @@
 .post {
   @extend %post-header;
 
+  .post-header {
+    margin: 50px auto 60px;
+    padding: 0 0 20px;
+    border-bottom: 1px solid #ebebeb;
+
+    .post-title {
+      margin-bottom: 2px;
+    }
+
+    .post-meta {
+      color: #808080;
+    }
+  }
+
   .post-content {
     margin-bottom: $spacing-unit;
 
@@ -221,6 +411,66 @@
         @include relative-font-size(1.125);
       }
     }
+
+    img, iframe {
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+    }
+
+    h2, h3, h4, h5, h6 {
+      margin: 60px 0 19px;
+    }
+
+    p, hr {
+      margin-bottom: 24px;
+    }
+
+    hr {
+      height: 1px;
+      background-color: #ebebeb;
+      border: none;
+    }
+  }
+
+  .post-related {
+    &>*:first-child {
+      @include relative-font-size(1.425);
+      color: #333;
+      margin-bottom: 14px;
+    }
+
+    ul {
+      margin-left: 15px;
+      .post-link {
+        @include relative-font-size(1.075);
+      }
+
+      a {
+        color: #666;
+
+        &:hover {
+          color: #333;
+        }
+
+        &:after {
+          content: 'NEW';
+          position: absolute;
+          margin-left: 8px;
+          margin-top: 3px;
+          padding: 0px 3px;
+          background-color: $brand-color;
+          color: #fff;
+          font-size: 10px;
+          font-weight: 600;
+          border-radius: 2px;
+        }
+
+        &:visited:after {
+          background-color: #fff;
+        }
+      }
+    }
   }
 }
 
@@ -231,9 +481,35 @@
 .post-nav {
   display: flex;
   justify-content: space-between;
+  margin: 72px 0 59px;
+  padding: 31px 0 0;
 
   a {
-    display: flex;
+    @include relative-font-size(1.125);
+    line-height: 15px;
+    color: #666;
+  }
+
+  .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);
   }
 }
 
@@ -271,6 +547,8 @@
   position: relative;
   height: $banner-height;
   background-color: $banner-background;
+  transition: height 0.2s;
+  margin-bottom: 32px;
 
   .page-banner-img {
     position: absolute;
@@ -292,25 +570,69 @@
 
     color: $banner-text-color;
     padding: 10px 5px;
-    text-shadow: 1px 1px 2px #333;
+    text-shadow: 1px 1px 2px #33333355;
 
-    .page-banner-heading {
-      @include relative-font-size(2.825);
-      letter-spacing: -1px;
-      line-height: 1;
-      margin-bottom: 10px;
+    & > *:first-child {
+      margin: 0;
+
+      > :nth-child(1) {
+        @include relative-font-size(3.9);
+        letter-spacing: -1px;
+        line-height: 0.95;
+        margin-bottom: 18px;
+        font-weight: normal;
+        transition: 0.2s all;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(2.425);
+        }
+      }
 
-      @include media-query($on-palm) {
-        @include relative-font-size(2.425);
+      > :nth-child(2) {
+        font-weight: normal;
+        margin-bottom: 0;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
       }
     }
 
-    @extend %post-header;
+    .post-subtitle {
+      @include relative-font-size(1.525);
+      color: #ffffffcc;
+      padding-right: 280px;
+    }
 
-    .post-title {
-      @include relative-font-size(2.925);
+    .post-meta {
+      color: #ffffffcc;
+    }
+
+    .left-vsplit:before {
+      background: #e3e3e388;
+    }
+
+    .post-tags {
+      color: #999;
+      padding-right: 280px;
+
+      .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;
+        }
+      }
     }
   }
+
+  @include media-query($on-palm) {
+    height: $banner-height / 1.5;
+  }
 }
 
 
@@ -318,7 +640,7 @@
  * Layout and sidebar
  */
 .framework {
-    @extend %flex-layout;
+    @extend %flex;
 
   .main {
     @extend %flex-1;
@@ -326,10 +648,11 @@
 
   .sidebar {
     padding-left: 8px;
+    transition: top 0.2s, display 0.2s;
 
     @include flex-sticky($header-height + 20px);
 
-    @include media-query($on-palm) {
+    @include media-query($on-laptop) {
       display: none;
     }
 
@@ -347,7 +670,7 @@
   }
 
   .segment-name {
-    font-weight: 600;
+    font-weight: $base-font-weight * 1.5;
     margin-bottom: 8px;
     position: relative;
 
@@ -357,7 +680,6 @@
       margin-top: 28px;
     }
 
-
     &:hover:before {
       content: '#';
       left: -1em;
@@ -370,5 +692,42 @@
     color: $grey-color;
   }
 
+  li a {
+    &.post-link {
+      margin-left: 5px;
+    }
+
+    color: #303030;
+
+    &:hover {
+      color: #000;
+    }
+
+    &:after {
+      content: 'NEW';
+      position: absolute;
+      margin-left: 8px;
+      margin-top: 3px;
+      padding: 0px 3px;
+      background-color: $brand-color;
+      color: #fff;
+      font-size: 10px;
+      font-weight: 600;
+      border-radius: 2px;
+    }
+
+    &:visited:after {
+      background-color: #fff;
+    }
+  }
 }
 
+.left-vsplit:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 10px;
+  margin: 0 10px;
+  background-color: #e3e3e3e3;
+  vertical-align: baseline;
+}