opti: style

README-zh.md

@@ -31,7 +31,7 @@ TeXt 是针对博客的一款简洁的主题，它虽然简洁但并不简单。
 - 流程图， 序列图，甘特图（[mermaid](https://mermaidjs.github.io/)）
 - 柱状图，折线图，饼图，雷达图（[chartjs](http://www.chartjs.org/)）
 - RSS（[jekyll-feed](https://github.com/jekyll/jekyll-feed)）
-- 多语言支持（English | 简体中文 | 繁體中文）
+- 多语言支持（English, 简体中文, 繁體中文）
 
 ## Color Theme
 

README.md

@@ -31,7 +31,7 @@ TeXt is a succinct theme for blogging. Similar to iOS 11 style, it has large and
 - Flowchart, Sequence diagram, Gantt diagram ([mermaid](https://mermaidjs.github.io/))
 - Line Chart, Bar Chart, Radar Chart, Pie Chart ([chartjs](http://www.chartjs.org/))
 - RSS（[jekyll-feed](https://github.com/jekyll/jekyll-feed))
-- Multi-language support(English | Simplified Chinese | Traditional Chinese)
+- Multi-language support(English, Simplified Chinese, Traditional Chinese)
 
 ## Color Themes
 

_config.yml

@@ -150,7 +150,7 @@ exclude:
 defaults:
   - scope:
       path: ""
-      type: "posts"
+      type: posts
     values:
       license: true
       aside:

_includes/scripts/sidebar.js

@@ -2,9 +2,13 @@
   var SOURCES = window.TEXT_VARIABLES.sources;
   window.Lazyload.js(SOURCES.jquery, function() {
     var $pageRoot = $('.js-page-root');
-    var $sidebarButton = $('.js-sidebar-button');
-    $sidebarButton.on('click', function() {
-      $pageRoot.toggleClass('show-sidebar');
+    var $sidebarShow = $('.js-sidebar-show');
+    var $sidebarHide = $('.js-sidebar-hide');
+    $sidebarShow.on('click', function() {
+      $pageRoot.addClass('show-sidebar');
+    });
+    $sidebarHide.on('click', function() {
+      $pageRoot.removeClass('show-sidebar');
     });
   });
 })();

_layouts/page.html

@@ -5,14 +5,14 @@
 {%- if page.sidebar -%}
 <div class="layout--page layout--page--sidebar clearfix js-page-root">
   <div class="page__actions">
-    <div class="button button--secondary button--circle  button--lg box-shadow-2 js-sidebar-button">
+    <div class="button button--circle  button--lg box-shadow-2 sidebar-button js-sidebar-show">
       <i class="fas fa-bars icon--show"></i>
-      <i class="fas fa-times icon--hide"></i>
     </div>
   </div>
   <div class="page__sidebar">
     {%- include sidebar/toc.html -%}
   </div>
+  <div class="page__mask js-sidebar-hide"></div>
 
 
 {%- else -%}

_sass/colors/_chocolate.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $select-color:     rgba($main-color-3, .5);
 $decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .8);
 
 // function colors
 $green:           #57c22d;

_sass/colors/_dark.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#fff, $background-color, 20%);
 $border-color-l:   mix(#fff, $background-color, 10%);
 $select-color:     rgba($main-color-1, .5);
 $decorate-color:   rgba(#fff, .1);
+$mask-color:       rgba(#fff, .8);
 
 // function colors
 $green:           #98c379;

_sass/colors/_default.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $select-color:     rgba($main-color-1, .5);
 $decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .8);
 
 // function colors
 $green:           #57c22d;

_sass/colors/_forest.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $select-color:     rgba($main-color-1, .5);
 $decorate-color:   rgba(#bb6170, .15);
+$mask-color:       rgba(#000, .8);
 
 // function colors
 $green:           #57c22d;

_sass/colors/_ocean.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $select-color:     rgba($main-color-1, .5);
 $decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .8);
 
 // function colors
 $green:           #57c22d;

_sass/colors/_orange.scss

@@ -27,6 +27,7 @@ $border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $select-color:     rgba($main-color-3, .5);
 $decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .8);
 
 // function colors
 $green:           #57c22d;

_sass/common/_variables.scss

@@ -64,6 +64,7 @@ $layout: (
   header-height-sm:       3rem,
   content-max-width:      850px,
   sidebar-width:          250px,
+  sidebar-header-height:  3rem,
   aside-width:            220px,
   footer-height:          10rem
 );

_sass/common/components/_button.scss

@@ -1,23 +1,41 @@
-@mixin button-colors($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default) {
+@mixin button-colors($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default) {
+  @if $theme == default {
+    $theme: light;
+  }
   @if $hover-clr == default {
     $hover-clr: $clr
   }
   @if $hover-bg-clr == default {
-    $hover-bg-clr: darken($bg-clr, 10%);
+    @if $theme == 'light' {
+      $hover-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $hover-bg-clr: lighten($bg-clr, 23%);
+    }
   }
 
   @if $active-clr == default {
     $active-clr: $clr
   }
   @if $active-bg-clr == default {
-    $active-bg-clr: darken($bg-clr, 10%);
+    @if $theme == 'light' {
+      $active-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $active-bg-clr: lighten($bg-clr, 23%);
+    }
   }
 
   @if $focus-clr == default {
     $focus-clr: $clr
   }
   @if $focus-bg-clr == default {
-    $focus-bg-clr: darken($bg-clr, 10%);
+    @if $theme == 'light' {
+      $focus-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $focus-bg-clr: lighten($bg-clr, 23%);
+    }
   }
   @include plain {
     color: $clr;

_sass/common/components/_toc.scss

@@ -3,20 +3,25 @@ ul.toc {
   margin: 0;
   list-style-type: none;
   & > li {
-    padding: .2rem 0;
-    &.active {
-      &, a {
+    margin: .1rem 0;
+    @include active() {
+      a {
+        background-color: $main-color-3;
         color: $main-color-1;
       }
     }
   }
 
   a {
-    @include link-colors($text-color, $main-color-1);
+    display: inline-block;
+    padding: .2rem .8rem .2rem .8rem;
+    border-radius: map-get($base, border-radius);
+    @include link-colors($text-color);
     @include plain() {
       text-decoration: none;
     }
     @include hover() {
+      background-color: $main-color-3;
       text-decoration: none;
     }
     @include active() {
@@ -91,10 +96,10 @@ ul.toc {
 ul.toc--navigator {
   & > .toc-h2 {
     &, a {
-      @include link-colors($text-color-l, $main-color-1);
+      @include link-colors($text-color-l);
     }
     &.active {
-      &, a {
+      a {
         color: $text-color-d;
       }
     }

_sass/components/_follow-me.scss

@@ -18,7 +18,7 @@
         @include button-colors($text-color-1, $google-plus-color);
       }
       .github-button {
-        @include button-colors($text-color-1, $github-color);
+        @include button-colors($text-color-1, $github-color, default, default, default, default, default, default, 'dark');
       }
       .linkedin-button {
         @include button-colors($text-color-1, $linkedin-color);

_sass/components/_footer.scss

@@ -5,7 +5,7 @@
 .footer {
   @include flexbox;
   @include align-items(center);
-  @include split-line(top);
+  background-color: $main-color-3;
   height: map-get($layout, footer-height);
   .follow-me {
     padding-top: 1rem;
@@ -22,7 +22,7 @@
     margin: 1rem auto 0 auto;
   }
   .site-info__copyright {
-    @include split-line(right, default, $text-color-l);
+    @include split-line(right, default, $text-color-3);
     padding-right: .3rem;
     margin-right: .1rem;
   }

_sass/layout/_page.scss

@@ -46,26 +46,44 @@
     left: 1rem;
     bottom: 1rem;
     display: none;
-    z-index: 999;
+    z-index: 996;
+  }
+
+  .sidebar-button {
+    @include button-colors($text-color-d, rgba($main-color-3, .75));
+    border: 1px $border-color solid;
   }
 
   .page__sidebar {
     display: block;
-    width: 100%;
+    width: 80%;
     max-width: map-get($layout, sidebar-width);
     float: left;
     height: 100%;
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
     background-color: $background-color;
     z-index: 998;
     @include split-line(right);
     @include transition(transform .4s);
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    box-sizing: border-box;
     .sidebar-toc {
       padding: 1rem 1rem 2rem 2rem;
     }
   }
 
+  .page__mask {
+    background-color: $mask-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 997;
+    display: none;
+    cursor: pointer;
+  }
+
   .page__aside {
     .toc-aside {
       padding: 1rem 0 1rem 3rem;
@@ -115,23 +133,12 @@
       display: block;
     }
 
-    .icon--show {
-      display: inline;
-    }
-    .icon--hide {
-      display: none;
-    }
-
     &.show-sidebar {
       .page__sidebar {
         @include transform(translate(0));
       }
-
-      .icon--show {
-        display: none;
-      }
-      .icon--hide {
-        display: inline;
+      .page__mask {
+        display: block;
       }
     }
   }

about.md

@@ -8,15 +8,43 @@ titles:
 key: page-about
 ---
 
-Welcome to my blog! :earth_asia: :earth_africa: :earth_americas:
+![TeXt Theme](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/TeXt-home.png)
 
-{% highlight javascript %}
-(() => console.log('hello, world!'))();
-{% endhighlight %}
+TeXt is succinct Jekyll theme, Perfect for hosting your personal site, blog, documentation on GitHub or self-hosting on your own server.
 
-## Skills
+```javascript
+(() => console.log('Hello, World!'))();
+```
 
-- HTML5, CSS3(SASS), JavaScript(ES2017, Node.js), Bash(Zsh)
-- React, React Native, Vue.js
-- gulp, webpack
-- Adobe Photoshop, Sketch
+## Features
+
+- Responsive
+- Paginate ([jekyll-paginate](https://github.com/jekyll/jekyll-paginate))
+- Table of contents
+- Tag
+- Search
+- Page views ([LeanCloud](https://leancloud.cn/))
+- Emoji ([Jemoji](https://github.com/jekyll/jemoji))
+- Comment ([Disqus](https://disqus.com/))
+- Google Analytics
+- Contact information (Email, Facebook, Twitter, Linkedin, Weibo, Zhihu, etc)
+- Semantic HTML
+- Icon automation tool ([gulp-svg2png](https://www.npmjs.com/package/gulp-svg2png), [gulp-to-ico](https://www.npmjs.com/package/gulp-to-ico))
+- Color Theme
+- Mathematical formula ([MathJax](https://www.mathjax.org/))
+- Flowchart, Sequence diagram, Gantt diagram ([mermaid](https://mermaidjs.github.io/))
+- Line Chart, Bar Chart, Radar Chart, Pie Chart ([chartjs](http://www.chartjs.org/))
+- RSS（[jekyll-feed](https://github.com/jekyll/jekyll-feed))
+- Multi-language support(English, Simplified Chinese, Traditional Chinese)
+
+## Color Themes
+
+You can choose these 6 built-in color themes below:
+
+| `default` | `dark` | `forest` |
+| --- |  --- | --- |
+| ![default](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_default.png) | ![dark](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_dark.png) | ![forest](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_forest.png) |
+
+| `ocean` | `chocolate` | `orange` |
+| --- |  --- | --- |
+| ![ocean](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_ocean.png) | ![chocolate](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_chocolate.png) | ![orange](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/colors_orange.png) |