feat: change theme styles

7 files changed, 346 insertions, 68 deletions

diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
index 11eb5aa..48e27bb 100644
--- a/_includes/views/pagination.html
+++ b/_includes/views/pagination.html
@@ -11,16 +11,23 @@
     {%- for post in paginator.posts -%}
     <li>
       {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-      <span class="post-meta">{{ post.date | date: date_format }}</span>
-      <h3>
+      <h2 class="post-title">
         {%- assign post_url = post.url | relative_url -%}
         <a class="post-link" href="{{ post_url }}">
           {{ post.title | escape }}
         </a>
-      </h3>
+      </h2>
+      <div class="post-meta">
+        <span class="post-date">{{ post.date | date: date_format }}</span>
+      </div>
       <p class="post-excerpt">
         {{ post.content | strip_html | truncatewords: 50 }}
       </p>
+      <div class="post-tags">
+        {%- for tag in post.tags -%}
+        <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+        {%- endfor -%}
+      </div>
     </li>
     {%- endfor -%}
   </ul>
diff --git a/_includes/views/post-header.html b/_includes/views/post-header.html
index 82329bd..d109597 100644
--- a/_includes/views/post-header.html
+++ b/_includes/views/post-header.html
@@ -1,6 +1,6 @@
 <header class="post-header">
   <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
-  <h3>{{ subheading | default: page.subtitle | escape }}</h3>
+  <h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
 
   <p class="post-meta">
     <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@@ -8,4 +8,13 @@
       {{ page.date | date: date_format }}
     </time>
   </p>
+
+  {%- if page.tags.size > 0 -%}
+  <div class="post-tags">
+    {%- for tag in page.tags -%}
+    <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+    {%- endfor -%}
+  </div>
+  {%- endif -%}
+
 </header>
diff --git a/_layouts/post.html b/_layouts/post.html
index dbf623d..9195f13 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,6 +1,6 @@
 ---
 layout: framework
-banner: 'default'
+banner:
 banner_html: post-header.html
 sidebar:
   - article-menu
@@ -21,18 +21,28 @@ sidebar:
 
     <div class="post-nav">
       {%- if page.previous -%}
-      <a href="{{ page.previous.url }}" title="{{ page.previous.title | escape }}">&laquo; Prev</a>
+        <a class="previous" href="{{ page.previous.url }}" title="{{ page.previous.title | escape }}">{{ page.previous.title | escape }}</a>
       {%- else -%}
       <span></span>
       {%- endif -%}
 
       {%- if page.next -%}
-      <a href="{{ page.next.url }}" title="{{ page.next.title | escape }}">Next &raquo;</a>
+        <a class="next" href="{{ page.next.url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape }}</a>
       {%- else -%}
       <span></span>
       {%- endif -%}
     </div>
 
+    <div class="post-related">
+      <div>Related Articles</div>
+      <ul>
+        {% assign posts = site[page.collection] | sample:4 %}
+        {%- for post in posts -%}
+        <li><a class="post-link" href="{{post.url}}">{{post.title}}</a></li>
+        {%- endfor -%}
+      </ul>
+    </div>
+
     {%- if page.comments != false -%}
 
     {%- if site.disqus.shortname -%}
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 4db827b..8d1730f 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -2,18 +2,18 @@
 
 // Define defaults for each variable.
 
-$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Oswald,
-"Apple Color Emoji", "Open Sans", "FontAwesome", !default;
-$base-font-size:   14px !default;
+$base-font-family: 'Noto Sans Light', 'AppleSDGothicNeo-Regular', 'Malgun
+Gothic', "Apple Color Emoji", Helvetica, Arial, sans-serif, Oswald, dotum, sans-serif, !default;
+$base-font-size: 14px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
-$base-line-height: 1.5 !default;
+$base-line-height: 1.6 !default;
 
 $spacing-unit:     30px !default;
 
-$text-color:       #333 !default;
-$background-color: #fefefe !default;
-$brand-color:      #2a7ae2 !default;
+$text-color:       #313b3f !default;
+$background-color: #fff !default;
+$brand-color:      #ff5100 !default;
 
 $grey-color:       #828282 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
@@ -24,16 +24,16 @@ $white-color: #fdfdfd !default;
 $table-text-align: left !default;
 
 $header-height: $base-line-height * $base-font-size * 2.85 !default;
-$header-text-color: lighten($white-color, 10%) !default;
+$header-text-color: invert($theme-color) !default;
 $header-background-color: $theme-color !default;
 
 $footer-height: $header-height * 1.05 !default;
-$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
+$footer-text-color: lighten(invert($theme-color), 25%) !default;
 $footer-background-color: darken($theme-color, 5%) !default;
 
-$banner-height: 420px !default;
+$banner-height: 640px !default;
 $banner-text-color: lighten($white-color, 0%) !default;
-$banner-background: darken(#333, 5%) !default;
+$banner-background: rgba(0,0,0,0.8) !default;
 
 // Width of the content area
 $content-width:    920px !default;
@@ -62,7 +62,7 @@ $on-laptop:        800px !default;
 @import
   "yat/base",
   "yat/layout",
-  "yat/syntax-highlighting",
+  // "yat/syntax-highlighting",
   "misc/article-menu",
   "misc/common-list",
   "misc/google-translate"
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 38c41e5..61c3d87 100644
--- a/_sass/yat/_base.scss
+++ b/_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,37 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
-  border-radius: 3px;
-  background-color: #3d3d3d;
 }
 
 code {
   padding: 1px 5px;
+  border-radius: 3px;
+  color: #fff;
+  background-color: $brand-color;
 }
 
 pre {
-  padding: 8px 12px;
   overflow-x: auto;
+  position: relative;
+
+  &: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 {
     border: 0;
-    padding-right: 0;
-    padding-left: 0;
+    padding: 20px!important;
+    background-color: transparent;
   }
 }
 
@@ -179,11 +197,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,7 +218,7 @@ 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;
 
   tr {
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 50bbb13..c0e7064 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -11,14 +11,31 @@ html {
   &[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 {
-        text-shadow: 0 0 2px #505050a0;
+        .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 {
-      color: #888;
       background-color: transparent;
 
       .site-footer-inner {
@@ -46,11 +63,22 @@ html {
   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;
+    max-width: 100%;
+
+    @include media-query(1024px) {
+      margin: unset;
+      max-width: unset;
+    }
+  }
+
   a {
     text-decoration: none;
   }
@@ -68,16 +96,12 @@ html {
     @include relative-font-size(1.125);
     font-weight: $base-font-weight;
     letter-spacing: -1px;
-    transition: filter 0.2s;
+    transition: 0.1s filter color;
 
     &, &:visited {
       color: $header-text-color;
     }
 
-    &:hover {
-      filter: drop-shadow(0 0 2px #08080880);
-    }
-
     .site-favicon {
       display: inline-block;
       height: $header-height / 1.5;
@@ -87,7 +111,7 @@ html {
 }
 
 .site-nav {
-  @include relative-font-size(1.025);
+  @include relative-font-size(1.125);
   line-height: $header-height;
   position: absolute;
   right: 0;
@@ -102,16 +126,20 @@ html {
   }
 
   .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;
     top: 0;
     text-align: left;
@@ -128,13 +156,16 @@ html {
       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 {
@@ -155,7 +186,7 @@ html {
  * Site footer
  */
 .site-footer {
-  @include relative-font-size(0.9);
+  @include relative-font-size(1.0);
   color: $footer-text-color;
   background-color: $footer-background-color;
   text-align: left;
@@ -163,11 +194,11 @@ html {
 
   .site-footer-inner {
     transition: border-top 0.2s;
-    padding: $spacing-unit * 0.8 0;
+    padding: $spacing-unit * 1.8 0;
   }
 
   a {
-    $a-color: invert(mix(invert($theme-color), #0030ae));
+    $a-color: $brand-color;
     color: $a-color;
 
     &:hover {
@@ -193,6 +224,15 @@ html {
       @include relative-font-size(2.25);
     }
   }
+
+  .post-tags {
+    display: inline-block;
+    padding-right: 150px;
+
+    .post-tag {
+      margin: 0 12px 0 0;
+    }
+  }
 }
 
 /**
@@ -201,7 +241,7 @@ html {
 .page-content {
   @extend %flex-1; /* <-- Keep footer on the bottom */
   -ms-flex: none; /* <-- Fix IE footer issue */
-  padding: $spacing-unit * 1.5 0;
+  padding: $spacing-unit * 2 0;
 }
 
 .page-heading {
@@ -221,20 +261,65 @@ html {
     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;
+
+    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);
-
-    display: block;
     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;
+    }
   }
 }
 
@@ -245,6 +330,20 @@ html {
 .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;
 
@@ -271,6 +370,67 @@ html {
         @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 {
+        text-decoration: none;
+        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;
+        }
+      }
+    }
   }
 }
 
@@ -281,9 +441,35 @@ html {
 .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);
   }
 }
 
@@ -322,6 +508,7 @@ html {
   height: $banner-height;
   background-color: $banner-background;
   transition: height 0.2s;
+  margin-bottom: 32px;
 
   .page-banner-img {
     position: absolute;
@@ -343,16 +530,17 @@ html {
 
     color: $banner-text-color;
     padding: 10px 5px;
-    text-shadow: 1px 1px 2px #333;
+    text-shadow: 1px 1px 2px #33333355;
 
     & > *:first-child {
       margin: 0;
 
       > :nth-child(1) {
-        @include relative-font-size(2.825);
+        @include relative-font-size(3.9);
         letter-spacing: -1px;
-        line-height: 1;
-        margin-bottom: 10px;
+        line-height: 0.95;
+        margin-bottom: 18px;
+        font-weight: normal;
 
         @include media-query($on-palm) {
           @include relative-font-size(2.425);
@@ -360,13 +548,41 @@ html {
       }
 
       > :nth-child(2) {
-        font-weight: $base-font-weight * 1.5;
+        font-weight: normal;
+        margin-bottom: 0;
       }
 
       > :last-child {
         margin-bottom: 0;
       }
     }
+
+    .post-subtitle {
+      @include relative-font-size(1.525);
+      color: #ffffffcc;
+      padding-right: 280px;
+    }
+
+    .post-meta {
+      color: #ffffffcc;
+    }
+
+    .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) {
@@ -391,7 +607,7 @@ html {
 
     @include flex-sticky($header-height + 20px);
 
-    @include media-query($on-palm) {
+    @include media-query($on-laptop) {
       display: none;
     }
 
@@ -419,7 +635,6 @@ html {
       margin-top: 28px;
     }
 
-
     &:hover:before {
       content: '#';
       left: -1em;
@@ -432,5 +647,33 @@ html {
     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;
+    }
+  }
 }
 
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 112a9ef..afe4e59 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -4,22 +4,18 @@
 
 // Default theme colors
 $theme-colors: (
+  coolblack: #090a0b,
   spacegrey: #353535,
-  inkpurple: #543581,
-  aquablue: #00aaa0,
-  azureblue: #2863b1,
-  gracered: #a12a50,
-  aloegreen: #3d9e56,
-  rustbrown: #795548,
+  snowwhite: #ffffff,
 );
 
 $theme-name: "{{ site.theme_color }}";
-$theme-color: map-get($theme-colors, "spacegrey");
+$theme-color: map-get($theme-colors, "snowwhite");
 
 @if map-has-key($theme-colors, $theme-name) {
   $theme-color: map-get($theme-colors, $theme-name);
 } @else if str-index($theme-name, "#") == 1 {
-  $theme-color: {{ site.theme_color | default: '#353535' }};
+  $theme-color: {{ site.theme_color | default: '#ffffff' }};
 }
 
 @import "yat";