init

10 files changed, 1882 insertions, 0 deletions

diff --git a/assets/js/archive.js b/assets/js/archive.js
new file mode 100644
index 0000000..8e90633
--- /dev/null
+++ b/assets/js/archive.js
@@ -0,0 +1,143 @@
+/*
+Credits: this script is shamelessly borrowed from
+https://github.com/kitian616/jekyll-TeXt-theme
+*/
+(function() {
+  function queryString() {
+    // This function is anonymous, is executed immediately and
+    // the return value is assigned to QueryString!
+    var i = 0, queryObj = {}, pair;
+    var queryStr = window.location.search.substring(1);
+    var queryArr = queryStr.split('&');
+    for (i = 0; i < queryArr.length; i++) {
+      pair = queryArr[i].split('=');
+      // If first entry with this name
+      if (typeof queryObj[pair[0]] === 'undefined') {
+        queryObj[pair[0]] = pair[1];
+        // If second entry with this name
+      } else if (typeof queryObj[pair[0]] === 'string') {
+        queryObj[pair[0]] = [queryObj[pair[0]], pair[1]];
+        // If third or later entry with this name
+      } else {
+        queryObj[pair[0]].push(pair[1]);
+      }
+    }
+    return queryObj;
+  }
+
+  var setUrlQuery = (function() {
+    var baseUrl =  window.location.href.split('?')[0];
+    return function(query) {
+      if (typeof query === 'string') {
+        window.history.replaceState(null, '', baseUrl + query);
+      } else {
+        window.history.replaceState(null, '', baseUrl);
+      }
+    };
+  })();
+
+  $(document).ready(function() {
+    var $tags = $('.js-tags');
+    var $articleTags = $tags.find('.tag-button');
+    var $tagShowAll = $tags.find('.tag-button--all');
+    var $result = $('.js-result');
+    var $sections = $result.find('section');
+    var sectionArticles = []
+    var $lastFocusButton = null;
+    var sectionTopArticleIndex = [];
+    var hasInit = false;
+
+    $sections.each(function() {
+      sectionArticles.push($(this).find('.item'));
+    });
+
+    function init() {
+      var i, index = 0;
+      for (i = 0; i < $sections.length; i++) {
+        sectionTopArticleIndex.push(index);
+        index += $sections.eq(i).find('.item').length;
+      }
+      sectionTopArticleIndex.push(index);
+    }
+
+    function searchButtonsByTag(_tag/*raw tag*/) {
+      if (!_tag) {
+        return $tagShowAll;
+      }
+      var _buttons = $articleTags.filter('[data-encode="' + _tag + '"]');
+      if (_buttons.length === 0) {
+        return $tagShowAll;
+      }
+      return _buttons;
+    }
+
+    function buttonFocus(target) {
+      if (target) {
+        target.addClass('focus');
+        $lastFocusButton && !$lastFocusButton.is(target) && $lastFocusButton.removeClass('focus');
+        $lastFocusButton = target;
+      }
+    }
+
+    function tagSelect (tag/*raw tag*/, target) {
+      var result = {}, $articles;
+      var i, j, k, _tag;
+
+      for (i = 0; i < sectionArticles.length; i++) {
+        $articles = sectionArticles[i];
+        for (j = 0; j < $articles.length; j++) {
+          if (tag === '' || tag === undefined) {
+            result[i] || (result[i] = {});
+            result[i][j] = true;
+          } else {
+            var tags = $articles.eq(j).data('tags').split(',');
+            for (k = 0; k < tags.length; k++) {
+              if (tags[k] === tag) {
+                result[i] || (result[i] = {});
+                result[i][j] = true; break;
+              }
+            }
+          }
+        }
+      }
+
+      for (i = 0; i < sectionArticles.length; i++) {
+        result[i] && $sections.eq(i).removeClass('d-none');
+        result[i] || $sections.eq(i).addClass('d-none');
+        for (j = 0; j < sectionArticles[i].length; j++) {
+          if (result[i] && result[i][j]) {
+            sectionArticles[i].eq(j).removeClass('d-none');
+          } else {
+            sectionArticles[i].eq(j).addClass('d-none');
+          }
+        }
+      }
+
+      hasInit || ($result.removeClass('d-none'), hasInit = true);
+
+
+      if (target) {
+        buttonFocus(target);
+        _tag = target.attr('data-encode');
+        if (_tag === '' || typeof _tag !== 'string') {
+          setUrlQuery();
+        } else {
+          setUrlQuery('?tag=' + _tag);
+        }
+      } else {
+        buttonFocus(searchButtonsByTag(tag));
+      }
+    }
+
+    var query = queryString(), 
+        _tag = query.tag;
+
+    init(); 
+    tagSelect(_tag);
+
+    $tags.on('click', 'a', function() {   /* only change */
+      tagSelect($(this).data('encode'), $(this));
+    });
+
+  });
+})();
diff --git a/assets/js/hux-blog.js b/assets/js/hux-blog.js
new file mode 100644
index 0000000..ab6effa
--- /dev/null
+++ b/assets/js/hux-blog.js
@@ -0,0 +1,78 @@
+ /*!
+ * Hux Blog v1.6.0 (http://startbootstrap.com)
+ * Copyright 2016 @huxpro
+ * Licensed under Apache 2.0 
+ */
+
+// Tooltip Init
+// Unuse by Hux since V1.6: Titles now display by default so there is no need for tooltip
+// $(function() {
+//     $("[data-toggle='tooltip']").tooltip();
+// });
+
+
+// make all images responsive
+/* 
+ * Unuse by Hux
+ * actually only Portfolio-Pages can't use it and only post-img need it.
+ * so I modify the _layout/post and CSS to make post-img responsive!
+ */
+// $(function() {
+//  $("img").addClass("img-responsive");
+// });
+
+// responsive tables
+$(document).ready(function() {
+    $("table").wrap("<div class='table-responsive'></div>");
+    $("table").addClass("table");
+});
+
+// responsive embed videos
+$(document).ready(function() {
+    $('iframe[src*="youtube.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
+    $('iframe[src*="youtube.com"]').addClass('embed-responsive-item');
+    $('iframe[src*="vimeo.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
+    $('iframe[src*="vimeo.com"]').addClass('embed-responsive-item');
+});
+
+// Navigation Scripts to Show Header on Scroll-Up
+jQuery(document).ready(function($) {
+    var MQL = 1170;
+
+    //primary navigation slide-in effect
+    if ($(window).width() > MQL) {
+        var headerHeight = $('.navbar-custom').height(),
+            bannerHeight  = $('.intro-header .container').height();     
+        $(window).on('scroll', {
+                previousTop: 0
+            },
+            function() {
+                var currentTop = $(window).scrollTop(),
+                    $catalog = $('.side-catalog');
+
+                //check if user is scrolling up by mouse or keyborad
+                if (currentTop < this.previousTop) {
+                    //if scrolling up...
+                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
+                        $('.navbar-custom').addClass('is-visible');
+                    } else {
+                        $('.navbar-custom').removeClass('is-visible is-fixed');
+                    }
+                } else {
+                    //if scrolling down...
+                    $('.navbar-custom').removeClass('is-visible');
+                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
+                }
+                this.previousTop = currentTop;
+
+
+                //adjust the appearance of side-catalog
+                $catalog.show()
+                if (currentTop > (bannerHeight + 41)) {
+                    $catalog.addClass('fixed')
+                } else {
+                    $catalog.removeClass('fixed')
+                }
+            });
+    }
+});
\ No newline at end of file
diff --git a/assets/js/jquery.nav.js b/assets/js/jquery.nav.js
new file mode 100644
index 0000000..a4ad012
--- /dev/null
+++ b/assets/js/jquery.nav.js
@@ -0,0 +1,224 @@
+/*
+ * jQuery One Page Nav Plugin
+ * http://github.com/davist11/jQuery-One-Page-Nav
+ *
+ * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://jquery.org/license
+ *
+ * @version 3.0.0
+ *
+ * Example usage:
+ * $('#nav').onePageNav({
+ *   currentClass: 'current',
+ *   changeHash: false,
+ *   scrollSpeed: 750
+ * });
+ */
+
+;(function($, window, document, undefined){
+
+	// our plugin constructor
+	var OnePageNav = function(elem, options){
+		this.elem = elem;
+		this.$elem = $(elem);
+		this.options = options;
+		this.metadata = this.$elem.data('plugin-options');
+		this.$win = $(window);
+		this.sections = {};
+		this.didScroll = false;
+		this.$doc = $(document);
+		this.docHeight = this.$doc.height();
+	};
+
+	// the plugin prototype
+	OnePageNav.prototype = {
+		defaults: {
+			navItems: 'a',
+			currentClass: 'current',
+			changeHash: false,
+			easing: 'swing',
+			filter: '',
+			scrollSpeed: 750,
+			scrollThreshold: 0.5,
+			begin: false,
+			end: false,
+			scrollChange: false,
+			padding: 0
+		},
+
+		init: function() {
+			// Introduce defaults that can be extended either
+			// globally or using an object literal.
+			this.config = $.extend({}, this.defaults, this.options, this.metadata);
+
+			this.$nav = this.$elem.find(this.config.navItems);
+
+			//Filter any links out of the nav
+			if(this.config.filter !== '') {
+				this.$nav = this.$nav.filter(this.config.filter);
+			}
+
+			//Handle clicks on the nav
+			this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
+
+			//Get the section positions
+			this.getPositions();
+
+			//Handle scroll changes
+			this.bindInterval();
+
+			//Update the positions on resize too
+			this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
+
+			return this;
+		},
+
+		adjustNav: function(self, $parent) {
+			self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
+			$parent.addClass(self.config.currentClass);
+		},
+
+		bindInterval: function() {
+			var self = this;
+			var docHeight;
+
+			self.$win.on('scroll.onePageNav', function() {
+				self.didScroll = true;
+			});
+
+			self.t = setInterval(function() {
+				docHeight = self.$doc.height();
+
+				//If it was scrolled
+				if(self.didScroll) {
+					self.didScroll = false;
+					self.scrollChange();
+				}
+
+				//If the document height changes
+				if(docHeight !== self.docHeight) {
+					self.docHeight = docHeight;
+					self.getPositions();
+				}
+			}, 250);
+		},
+
+		getHash: function($link) {
+			return $link.attr('href').split('#')[1];
+		},
+
+		getPositions: function() {
+			var self = this;
+			var linkHref;
+			var topPos;
+			var $target;
+
+			self.$nav.each(function() {
+				linkHref = self.getHash($(this));
+				$target = $('#' + linkHref);
+
+				if($target.length) {
+					topPos = $target.offset().top;
+					self.sections[linkHref] = Math.round(topPos);
+				}
+			});
+		},
+
+		getSection: function(windowPos) {
+			var returnValue = null;
+			var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
+
+			for(var section in this.sections) {
+				if((this.sections[section] - windowHeight) < windowPos) {
+					returnValue = section;
+				}
+			}
+
+			return returnValue;
+		},
+
+		handleClick: function(e) {
+			var self = this;
+			var $link = $(e.currentTarget);
+			var $parent = $link.parent();
+			var newLoc = '#' + self.getHash($link);
+
+			if(!$parent.hasClass(self.config.currentClass)) {
+				//Start callback
+				if(self.config.begin) {
+					self.config.begin();
+				}
+
+				//Change the highlighted nav item
+				self.adjustNav(self, $parent);
+
+				//Removing the auto-adjust on scroll
+				self.unbindInterval();
+
+				//Scroll to the correct position
+				self.scrollTo(newLoc, function() {
+					//Do we need to change the hash?
+					if(self.config.changeHash) {
+						window.location.hash = newLoc;
+					}
+
+					//Add the auto-adjust on scroll back in
+					self.bindInterval();
+
+					//End callback
+					if(self.config.end) {
+						self.config.end();
+					}
+				});
+			}
+
+			e.preventDefault();
+		},
+
+		scrollChange: function() {
+			var windowTop = this.$win.scrollTop();
+			var position = this.getSection(windowTop);
+			var $parent;
+
+			//If the position is set
+			if(position !== null) {
+				$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
+
+				//If it's not already the current section
+				if(!$parent.hasClass(this.config.currentClass)) {
+					//Change the highlighted nav item
+					this.adjustNav(this, $parent);
+
+					//If there is a scrollChange callback
+					if(this.config.scrollChange) {
+						this.config.scrollChange($parent);
+					}
+				}
+			}
+		},
+
+		scrollTo: function(target, callback) {
+			var offset = $(target).offset().top - this.config.padding;
+
+			$('html, body').animate({
+				scrollTop: offset
+			}, this.config.scrollSpeed, this.config.easing, callback);
+		},
+
+		unbindInterval: function() {
+			clearInterval(this.t);
+			this.$win.unbind('scroll.onePageNav');
+		}
+	};
+
+	OnePageNav.defaults = OnePageNav.prototype.defaults;
+
+	$.fn.onePageNav = function(options) {
+		return this.each(function() {
+			new OnePageNav(this, options).init();
+		});
+	};
+
+})( jQuery, window , document );
\ No newline at end of file
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
new file mode 100644
index 0000000..982d471
--- /dev/null
+++ b/assets/sass/_mixins.scss
@@ -0,0 +1,56 @@
+// Mixins
+
+@mixin transition-all() {
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+@mixin background-cover() {
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+}
+
+@mixin monospace() {
+    font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+@mixin serif() {
+	font-family: 'Lora', 'Times New Roman', serif;
+}
+
+@mixin sans-serif() {
+	/* Hux learn from
+     *     TypeIsBeautiful,
+     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
+     */
+	font-family:
+        // System Font            // https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/
+        -apple-system,            // OSX ^10.11 & iOS ^9  San Francisco & 苹方 for Safari
+        BlinkMacSystemFont,       // OSX ^10.11 & iOS ^9  San Francisco & 苹方 for Blink 
+
+        // English First
+        "Helvetica Neue",         // OSX
+        "Arial",                  // Win "Helvetica"
+        //" Segoe UI",            // Win ^8
+
+        // Chinese Fallback
+        "PingFang SC",            // OSX ^10.11 & iOS ^9  苹方（华康信凭黑）
+        "Hiragino Sans GB",       // OSX ^10.6            冬青黑体
+        "STHeiti",                // OSX <10.6  & iOS <9  华文黑体
+        "Microsoft YaHei",        // Win                  微软雅黑
+        "Microsoft JhengHei",     // Win                  微软正黑
+        "Source Han Sans SC",     // SourceHan - begin    思源黑体
+        "Noto Sans CJK SC",
+        "Source Han Sans CN",
+        "Noto Sans SC",
+        "Source Han Sans TC",
+        "Noto Sans CJK TC",       // SourceHan - end
+        "WenQuanYi Micro Hei",    // Linux                文泉驿微米黑
+        SimSun,                   // Win old              中易宋体
+        sans-serif;               // System Fallback
+
+	line-height: 1.7;
+}
diff --git a/assets/sass/_search.scss b/assets/sass/_search.scss
new file mode 100644
index 0000000..cabed80
--- /dev/null
+++ b/assets/sass/_search.scss
@@ -0,0 +1,94 @@
+.search-page {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  background: #fff;
+  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
+  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
+  -webkit-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  transform: translate(0, 100%);
+  opacity: 0;
+
+  &.search-active {
+    opacity: 1;
+    -webkit-transform: translate(0, 0) scale(1, 1);
+    -ms-transform: translate(0, 0) scale(1, 1);
+    transform: translate(0, 0) scale(1, 1);
+    .search-main {
+      opacity: 1;
+    }
+  }
+
+  .search-main {
+    padding-top: 80px;
+    height: 100%;
+    opacity: 0;
+    -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
+    transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
+    .row,
+    .row > div {
+      height: 100%;
+    }
+  }
+
+  .search-icon-close-container {
+    position: absolute;
+    z-index: 1;
+    padding: 16px;
+    top: 0;
+    right: 2px;
+    i {
+      font-size: 20px;
+    }
+  }
+
+  #search-input {
+    @include monospace;
+
+    // poorman's reset
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    // poorman's reset end
+
+    width: 100%;
+    font-size: 30px;
+    font-weight: bold;
+    color: $gray-dark;
+   
+    @media only screen and (min-width: 768px) {
+      margin-left: 20px;
+    }
+  }
+
+  #search-results {
+    overflow: auto;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 80px;
+  }
+}
+
+.search-icon a,
+.search-icon-close {
+  cursor: pointer;
+  font-size: 30px;
+  color: #311e3e;
+  -webkit-transition: all 0.25s;
+  transition: all 0.25s;
+}
+
+.search-icon a:hover,
+.search-icon-close:hover {
+  opacity: 0.8;
+}
+
+.search-icon,
+.search-icon-close {
+  font-size: 16px;
+}
diff --git a/assets/sass/_side-catalog.scss b/assets/sass/_side-catalog.scss
new file mode 100644
index 0000000..dc35eb9
--- /dev/null
+++ b/assets/sass/_side-catalog.scss
@@ -0,0 +1,94 @@
+// Directory Section
+
+.catalog-container {
+  padding: 0px;
+}
+
+.side-catalog {
+  &.fixed {
+    position: fixed;
+    top: -21px;
+  }
+  &.fold {
+    .catalog-toggle::before {
+      content: "+";
+    }
+    .catalog-body {
+      display: none;
+    }
+  }
+  .catalog-toggle::before {
+    content: "−";
+    position: relative;
+    margin-right: 5px;
+    bottom: 1px;
+  }
+  display: block;
+  overflow: auto;
+  height: 100%;
+  padding-bottom: 40px;
+  width: 195px;
+  .catalog-body {
+    position: relative;
+    list-style: none;
+    height: auto;
+    overflow: hidden;
+    padding-left: 0px;
+    padding-right: 5px;
+    text-indent: 0;
+    li {
+      position: relative;
+      list-style: none;
+      a {
+        padding-left: 10px;
+        max-width: 180px;
+        display: inline-block;
+        vertical-align: middle;
+        height: 30px;
+        line-height: 30px;
+        overflow: hidden;
+        text-decoration: none;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .h1_nav,
+    .h2_nav {
+      margin-left: 0;
+      font-size: 13px;
+      font-weight: bold;
+    }
+    .h3_nav {
+      margin-left: 6px;
+      font-size: 13px;
+      font-weight: bold;
+    }
+    .h4_nav {
+      margin-left: 12px;
+      font-size: 12px;
+      a {
+        max-width: 170px;
+      }
+    }
+    .h5_nav .h6_nav {
+      margin-left: 18px;
+      font-size: 12px;
+      a {
+        max-width: 170px;
+      }
+    }
+    .active {
+      a {
+        color: #0085a1 !important;
+      }
+      border-radius: 4px;
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .side-catalog {
+    display: none;
+  }
+}
diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss
new file mode 100644
index 0000000..8c82f44
--- /dev/null
+++ b/assets/sass/_sidebar.scss
@@ -0,0 +1,61 @@
+@import "variables.scss";
+
+// Sidebar Components
+
+// Large Screen
+@media (min-width: 1200px) {
+  .post-container,
+  .sidebar-container {
+    padding-right: 5%;
+  }
+}
+@media (min-width: 768px) {
+  .post-container {
+    padding-right: 5%;
+  }
+}
+
+// Container of Sidebar, also Friends
+.sidebar-container {
+  color: $gray-light;
+  font-size: 14px;
+  h5 {
+    color: $brand-gray;
+    padding-bottom: 1em;
+    a {
+      color: $brand-gray !important;
+      text-decoration: none;
+    }
+  }
+  a {
+    color: $gray-light !important;
+    &:hover,
+    &:active {
+      color: $brand-primary !important;
+    }
+  }
+  .tags {
+    a {
+      border-color: $gray-light;
+      &:hover,
+      &:active {
+        border-color: $brand-primary;
+      }
+    }
+  }
+  .short-about {
+    img {
+      width: 80%;
+      display: block;
+      border-radius: 5px;
+      margin-bottom: 20px;
+    }
+    p {
+      margin-top: 0px;
+      margin-bottom: 20px;
+    }
+    .list-inline > li {
+      padding-left: 0px;
+    }
+  }
+}
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
new file mode 100644
index 0000000..3f841d7
--- /dev/null
+++ b/assets/sass/_variables.scss
@@ -0,0 +1,9 @@
+// Variables
+
+$brand-primary: #0085a1;
+$brand-gray: #a3a3a3;
+
+$gray-dark: #404040;
+$gray-light: #bfbfbf;
+
+$white-faded: rgba(255, 255, 255, 0.8);
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
new file mode 100644
index 0000000..f5df763
--- /dev/null
+++ b/assets/sass/main.scss
@@ -0,0 +1,1103 @@
+@import "_variables.scss";
+@import "_mixins.scss";
+@import "_sidebar.scss";
+@import "_side-catalog.scss";
+@import "_search.scss";
+
+
+// Global Components
+
+body {
+  @include sans-serif;
+  font-size: 16px;
+  // Hux mpdify to 16px (Mobile First), and increase to 20px while 768+ width
+  color: $gray-dark;
+  //-webkit-user-select:text; //对于 Blog 还是先不开启这句。
+  overflow-x: hidden;
+
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// -- Typography
+
+p {
+  margin: 30px 0;
+  @media screen and (max-width: 768px) {
+    & {
+      margin: 25px 0;
+    }
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include sans-serif;
+  line-height: 1.1;
+  font-weight: bold;
+}
+h4 {
+  font-size: 21px;
+}
+a {
+  color: $gray-dark;
+  &:hover,
+  &:focus {
+    color: $brand-primary;
+  }
+}
+
+a img {
+  &:hover,
+  &:focus {
+    cursor: zoom-in;
+  }
+}
+
+article {
+  overflow: hidden;
+}
+blockquote {
+  color: gray;
+  font-style: italic;
+  font-size: 0.95em;
+  margin: 20px 0 20px;
+  p {
+    margin: 0;
+  }
+}
+
+// Utils Style Class can be used in Markdown.
+small.img-hint {
+  display: block;
+  margin-top: -20px;
+  text-align: center;
+}
+br + small.img-hint {
+  margin-top: -40px;
+}
+img.shadow {
+  box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
+}
+// Utils Style End
+
+// Select
+select {
+  -webkit-appearance: none;
+  margin-top: 15px;
+  color: #337ab7;
+  border-color: #337ab7;
+  padding: 0em 0.4em;
+  background: white;
+  &.sel-lang {
+    min-height: 28px;
+    font-size: 14px;
+  }
+}
+
+// override table style in bootstrap
+table {
+  margin-top: 10px;
+}
+table.table > tbody,
+table.table > thead {
+  th,
+  td {
+    border: 1px solid #eee !important;
+  }
+}
+@media screen and (max-width: 767px) {
+  .table-responsive {
+    border: 0;
+  }
+}
+
+hr.small {
+  max-width: 100px;
+  margin: 15px auto;
+  border-width: 4px;
+  border-color: white;
+}
+// add by Hux
+pre,
+.table-responsive {
+  // sometimes you should use vendor-feature.
+  -webkit-overflow-scrolling: touch;
+}
+pre code {
+  display: block;
+  width: auto;
+  white-space: pre; // save it but no-wrap;
+  word-wrap: normal; // no-wrap
+}
+code,
+kbd,
+pre,
+samp {
+  @include monospace;
+}
+
+// In the list of posts
+.postlist-container {
+  margin-bottom: 15px;
+}
+
+// In the post.
+.post-container {
+  a {
+    // display: inline-block;
+    // safari has bugs on word-break on inline elements.
+    color: #337ab7;
+    // different to $brand-primary
+    &:hover,
+    &:focus {
+      color: $brand-primary;
+    }
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 50px 0 20px;
+    line-height: 1.4;
+    & + p {
+      margin-top: 20px;
+    }
+  }
+  h2::before {
+    content: " ";
+    display: block;
+    border-bottom: 1px solid #ececec;
+    margin-top: 44px;
+    margin-bottom: 30px;
+  }
+  h4 {
+    font-size: 22px;
+    font-weight: 600;
+    color: gray;
+    & + p {
+      margin-top: 10px;
+    }
+  }
+  h5,
+  h6 {
+    font-size: 20px;
+    font-weight: 600;
+    color: gray;
+    & + p {
+      margin-top: 10px;
+    }
+  }
+  // downscale the font a little bit in mobile
+  @media screen and (max-width: 768px) {
+    h1 {
+      font-size: 30px;
+    }
+    h2 {
+      font-size: 22px;
+    }
+    h3 {
+      font-size: 20px;
+    }
+    h4 {
+      font-size: 19px;
+    }
+    h5,
+    h6 {
+      font-size: 18px;
+    }
+  }
+  ul,
+  ol {
+    margin-bottom: 40px;
+    @media screen and (max-width: 768px) {
+      & {
+        padding-left: 30px;
+      }
+    }
+    @media screen and (max-width: 500px) {
+      & {
+        padding-left: 20px;
+      }
+    }
+  }
+  ol ol,
+  ol ul,
+  ul ol,
+  ul ul {
+    margin-bottom: 5px;
+  }
+  li {
+    p {
+      margin: 0;
+      margin-bottom: 5px;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 2;
+      margin-top: 20px;
+    }
+  }
+  // V1.6 Hux display title by default.
+  .pager li {
+    width: 48%;
+    &.next {
+      float: right;
+    }
+    &.previous {
+      float: left;
+    }
+    > a {
+      width: 100%;
+      > span {
+        color: $brand-gray;
+        font-weight: normal;
+        letter-spacing: 0.5px;
+      }
+    }
+  }
+  .anchorjs-link {
+    // I can not understand this but this made anchor always in the same line as title
+    position: absolute;
+    text-decoration: none !important;
+  }
+}
+
+// Navigation
+
+// materialize, mobile only
+@media only screen and (max-width: 767px) {
+  /**
+   * Layout
+   * Since V1.6 we use absolute positioning to prevent to expand container-fluid
+   * which would cover tags. A absolute positioning make a new layer.
+   */
+  .navbar-default .navbar-collapse {
+    position: absolute;
+    right: 0;
+    border: none;
+    background: white;
+    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px,
+      rgba(0, 0, 0, 0.239216) 0px 1px 4px;
+    border-radius: 2px;
+    width: 170px;
+  }
+  /**
+   * Animation
+   * HuxBlog-Navbar using genuine Material Design Animation
+   */
+  #huxblog_navbar {
+    /**
+     * Sharable code and 'out' function
+     */
+    // the container do width-transition
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: top right;
+    transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
+    -webkit-transform: scaleX(0);
+    -webkit-transform-origin: top right;
+    -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
+    a {
+      font-size: 13px;
+      line-height: 28px;
+    }
+    .navbar-collapse {
+      // the navbar do height-transition
+      height: 0px; // to solve container-mask-tags issue (default state).
+      transform: scaleY(0);
+      transform-origin: top right;
+      transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
+      -webkit-transform: scaleY(0);
+      -webkit-transform-origin: top right;
+      -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1)
+        0ms;
+    }
+    li {
+      opacity: 0;
+      transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    }
+    /**
+     *'In' Animation
+     */
+    &.in {
+      transform: scaleX(1);
+      -webkit-transform: scaleX(1);
+      opacity: 1;
+      transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+      .navbar-collapse {
+        transform: scaleY(1);
+        -webkit-transform: scaleY(1);
+        transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
+        -webkit-transition: -webkit-transform 500ms
+          cubic-bezier(0.23, 1, 0.32, 1);
+      }
+      li {
+        opacity: 1;
+        transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
+        -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
+      }
+    }
+  }
+}
+
+.navbar-custom {
+  // materialize
+  background: none;
+  border: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  @include sans-serif;
+  .navbar-brand {
+    font-weight: 800;
+    // materialize
+    color: white;
+    height: 56px;
+    line-height: 25px;
+    &:hover {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+  .nav {
+    li {
+      a {
+        text-transform: uppercase;
+        font-size: 12px;
+        line-height: 20px;
+        font-weight: 800;
+        letter-spacing: 1px;
+        // only highlight in mobile
+        &:active {
+          background: rgba(0, 0, 0, 0.12);
+        }
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    body {
+      font-size: 20px;
+    }
+    background: transparent;
+    border-bottom: 1px solid transparent;
+    .navbar-brand {
+      color: white;
+      padding: 20px;
+      line-height: 20px;
+      &:hover,
+      &:focus {
+        color: $white-faded;
+      }
+    }
+    .nav {
+      li {
+        a {
+          color: white;
+          padding: 20px;
+          &:hover,
+          &:focus {
+            color: $white-faded;
+          }
+          &:active {
+            background: none;
+          }
+        }
+      }
+    }
+  }
+  &.invert {
+    .navbar-toggle {
+      &:active {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+      .icon-bar {
+        background-color: $gray-dark;
+      }
+    }
+    .navbar-brand {
+      color: $gray-dark;
+      &:hover,
+      &:focus {
+        color: $brand-primary;
+      }
+    }
+    .nav {
+      li {
+        a {
+          color: $gray-dark;
+          &:hover,
+          &:focus {
+            color: $brand-primary;
+          }
+        }
+      }
+    }
+  }
+  @media only screen and (min-width: 1170px) {
+    -webkit-transition: background-color 0.3s;
+    -moz-transition: background-color 0.3s;
+    transition: background-color 0.3s;
+    /* Force Hardware Acceleration in WebKit */
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    &.is-fixed {
+      /* when the user scrolls down, we hide the header right above the viewport */
+      position: fixed;
+      top: -61px;
+      background-color: rgba(255, 255, 255, 0.9);
+      border-bottom: 1px solid #f2f2f2;
+      -webkit-transition: -webkit-transform 0.3s;
+      -moz-transition: -moz-transform 0.3s;
+      transition: transform 0.3s;
+      .navbar-brand {
+        color: $gray-dark;
+        &:hover,
+        &:focus {
+          color: $brand-primary;
+        }
+      }
+      .nav {
+        li {
+          a {
+            color: $gray-dark;
+            &:hover,
+            &:focus {
+              color: $brand-primary;
+            }
+          }
+        }
+      }
+    }
+    &.is-visible {
+      /* if the user changes the scrolling direction, we show the header */
+      -webkit-transform: translate3d(0, 100%, 0);
+      -moz-transform: translate3d(0, 100%, 0);
+      -ms-transform: translate3d(0, 100%, 0);
+      -o-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+}
+
+// Header
+
+.intro-header {
+  &.style-text {
+    background: none;
+    .site-heading,
+    .post-heading,
+    .page-heading {
+      padding: 85px 0 20px;
+      color: $gray-dark;
+      .subheading {
+        margin-bottom: 15px;
+      }
+    }
+    .tags {
+      a,
+      .tag {
+        border-color: $gray-dark;
+        color: $gray-dark;
+        &:hover,
+        &:active {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+  }
+  background: no-repeat center center;
+  background-color: $brand-gray;
+  background-attachment: scroll;
+  @include background-cover;
+  // NOTE: Background images are set within the HTML using inline CSS!
+  margin-bottom: 0px; /* 0 on mobile, modify by Hux */
+  @media only screen and (min-width: 768px) {
+    margin-bottom: 20px; /* response on desktop */
+  }
+  .site-heading,
+  .post-heading,
+  .page-heading {
+    padding: 85px 0 55px;
+    color: white;
+    @media only screen and (min-width: 768px) {
+      padding: 150px 0;
+    }
+  }
+  // masterialize
+  .site-heading {
+    padding: 95px 0 70px;
+    @media only screen and (min-width: 768px) {
+      padding: 150px 0;
+    }
+  }
+  .site-heading,
+  .page-heading {
+    text-align: center;
+    h1 {
+      margin-top: 0;
+      font-size: 50px;
+    }
+    .subheading {
+      @include sans-serif;
+      font-size: 18px;
+      line-height: 1.1;
+      display: block;
+      font-weight: 300;
+      margin: 10px 0 0;
+    }
+    @media only screen and (min-width: 768px) {
+      h1 {
+        font-size: 80px;
+      }
+    }
+  }
+  .post-heading {
+    h1 {
+      font-size: 30px;
+      margin-bottom: 24px;
+    }
+    .subheading,
+    .meta {
+      line-height: 1.1;
+      display: block;
+    }
+    .subheading {
+      @include sans-serif;
+      font-size: 17px;
+      line-height: 1.4;
+      font-weight: normal;
+      margin: 10px 0 30px;
+      margin-top: -5px;
+    }
+    .meta {
+      @include serif;
+      font-style: italic;
+      font-weight: 300;
+      font-size: 16px;
+      a {
+        color: white;
+      }
+    }
+    @media only screen and (min-width: 768px) {
+      h1 {
+        font-size: 55px;
+      }
+      .subheading {
+        font-size: 30px;
+      }
+      .meta {
+        font-size: 20px;
+      }
+    }
+  }
+  .header-img-credit {
+    position: absolute;
+    bottom: 6px;
+    right: 9px;
+    color: white;
+    opacity: 0.3;
+    font-size: 10px;
+    z-index: 1;
+    a {
+      color: white;
+    }
+    @media only screen and (min-width: 768px) {
+      & {
+        font-size: 12px;
+        bottom: 10px;
+        right: 15px;
+      }
+    }
+  }
+}
+
+// Post Preview Pages (Home Page)
+
+.post-preview {
+  > a {
+    color: $gray-dark;
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $brand-primary;
+    }
+    > .post-title {
+      font-size: 21px;
+      line-height: 1.3;
+      margin-top: 30px;
+      margin-bottom: 8px;
+    }
+    > .post-subtitle {
+      font-size: 15px;
+      line-height: 1.3;
+      margin: 0;
+      font-weight: 300;
+      margin-bottom: 10px;
+    }
+  }
+  > .post-meta {
+    @include serif;
+    color: $brand-gray;
+    font-size: 16px;
+    font-style: italic;
+    margin-top: 0;
+    > a {
+      text-decoration: none;
+      color: $gray-dark;
+      &:hover,
+      &:focus {
+        color: $brand-primary;
+        text-decoration: underline;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    > a {
+      > .post-title {
+        font-size: 26px;
+        line-height: 1.3;
+        margin-bottom: 10px;
+      }
+      > .post-subtitle {
+        font-size: 16px;
+      }
+    }
+    .post-meta {
+      font-size: 18px;
+    }
+  }
+}
+
+// Hux add home-page post-content-preview
+.post-content-preview {
+  font-size: 13px;
+  font-style: italic;
+  color: $brand-gray;
+  &:hover {
+    color: $brand-primary;
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 14px;
+  }
+}
+
+// Sections
+
+.section-heading {
+  font-size: 36px;
+  margin-top: 60px;
+  font-weight: 700;
+}
+
+.caption {
+  text-align: center;
+  font-size: 14px;
+  padding: 10px;
+  font-style: italic;
+  margin: 0;
+  display: block;
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+footer {
+  font-size: 20px;
+  padding: 50px 0 65px;
+  .list-inline {
+    margin: 0;
+    padding: 0;
+  }
+  .copyright {
+    font-size: 14px;
+    text-align: center;
+    margin-bottom: 0;
+    a {
+      color: #337ab7;
+      // different to $brand-primary
+      &:hover,
+      &:focus {
+        color: $brand-primary;
+      }
+    }
+  }
+}
+// Button Styles
+
+.btn {
+  @include sans-serif;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  border-radius: 0;
+  padding: 15px 25px;
+}
+
+.btn-lg {
+  font-size: 16px;
+  padding: 25px 35px;
+}
+
+.btn-default {
+  &:hover,
+  &:focus {
+    background-color: $brand-primary;
+    border: 1px solid $brand-primary;
+    color: white;
+  }
+}
+
+// Pager Styling
+
+.pager {
+  margin: 20px 0 0 !important;
+  padding: 0px !important;
+
+  li {
+    > a,
+    > span {
+      @include sans-serif;
+      text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 1px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 0;
+      @media only screen and (min-width: 768px) {
+        font-size: 14px;
+        padding: 15px 25px;
+      }
+    }
+
+    > a {
+      color: $gray-dark;
+    }
+    > a:hover,
+    > a:focus {
+      color: white;
+      background-color: $brand-primary;
+      border: 1px solid $brand-primary;
+
+      // V1.6 display title
+      > span {
+        color: white;
+      }
+    }
+  }
+
+  .disabled {
+    > a,
+    > a:hover,
+    > a:focus,
+    > span {
+      color: $brand-gray;
+      background-color: $gray-dark;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// -- Highlight Color Customization
+
+::-moz-selection {
+  color: white;
+  text-shadow: none;
+  background: $brand-primary;
+}
+
+::selection {
+  color: white;
+  text-shadow: none;
+  background: $brand-primary;
+}
+
+img::selection {
+  color: white;
+  background: transparent;
+}
+
+img::-moz-selection {
+  color: white;
+  background: transparent;
+}
+
+/* Hux add tags support */
+.d-none {
+  display: none !important;
+}
+.tags {
+  margin-bottom: -5px;
+  &.tags-sup {
+    a,
+    .tag {
+      padding: 0 10px 0 12px;
+    }
+  }
+  a,
+  .tag {
+    display: inline-block;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    border-radius: 999em;
+    padding: 0 10px 0 10px;
+    color: rgba(255, 255, 255, 1);
+    line-height: 24px;
+    font-size: 12px;
+    text-decoration: none;
+    margin: 0 1px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    > sup {
+      margin-left: -2px;
+      font-weight: 700;
+    }
+    &:hover,
+    &:active {
+      color: white;
+      border-color: white;
+      background-color: rgba(255, 255, 255, 0.4);
+      text-decoration: none;
+    }
+    @media only screen and (min-width: 768px) {
+      margin-right: 5px;
+    }
+  }
+}
+
+#tag-heading {
+  padding: 70px 0 60px;
+  @media only screen and (min-width: 768px) {
+    padding: 55px 0;
+  }
+}
+// tag_cloud
+#tag_cloud {
+  margin: 20px 0 15px 0;
+  a,
+  .tag {
+    transition-property: all;
+    transition-duration: 0.4s;
+    transition-timing-function: ease;
+    font-size: 14px;
+    border: none;
+    line-height: 28px;
+    margin: 0 2px;
+    margin-bottom: 8px;
+    background: #f3f5f5;
+    &:hover,
+    &:active,
+    &.focus {
+      background-color: #0085a1 !important;
+    }
+    &.focus {
+      box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px,
+        rgba(0, 0, 0, 0.239216) 0 1px 4px;
+    }
+    &.tag-button--all {
+      font-weight: 700;
+      color: #0085a1 !important;
+      &:hover,
+      &:active,
+      &.focus {
+        background-color: #e4e4e4 !important;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    margin-bottom: 25px;
+  }
+}
+
+.tag-comments {
+  font-size: 12px;
+  @media only screen and (min-width: 768px) {
+    font-size: 14px;
+  }
+}
+
+.t {
+  //margin-top: 50px;
+  &:first-child {
+    margin-top: 0px;
+  }
+  hr:last-of-type {
+    //display: none;
+  }
+}
+.listing-seperator {
+  color: #0085a1;
+  font-size: 21px !important;
+  &::before {
+    margin-right: 5px;
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 20px !important;
+    line-height: 2 !important;
+  }
+}
+
+// Customize Style for Posts in Mini-Post-List
+.mini-post-list {
+  margin: 20px 0 15px 0;
+  .tag-text {
+    font-weight: 200;
+    @include sans-serif;
+  }
+  .post-preview {
+    position: relative;
+    > a {
+      .post-title {
+        font-size: 16px;
+        font-weight: 500;
+        margin-top: 20px;
+      }
+      .post-subtitle {
+        font-size: 13px;
+      }
+    }
+    > .post-meta {
+      position: absolute;
+      right: 5px;
+      bottom: 0px;
+      margin: 0px;
+      font-size: 12px;
+      line-height: 12px;
+    }
+    @media only screen and (min-width: 768px) {
+      margin-left: 20px;
+      > a {
+        > .post-title {
+          font-size: 18px;
+          line-height: 1.3;
+        }
+        > .post-subtitle {
+          font-size: 14px;
+        }
+      }
+      .post-meta {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+/* Tags support End*/
+
+/* Hux make all img responsible in post-container */
+.post-container img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1.5em auto 1.6em auto;
+}
+
+/* Hux Optimize UserExperience */
+.navbar-default .navbar-toggle {
+  &:focus,
+  &:hover {
+    background-color: inherit;
+  }
+  &:active {
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+/* Hux customize Style for navBar button */
+
+.navbar-default .navbar-toggle {
+  border-color: transparent;
+  padding: 19px 16px;
+  margin-top: 2px;
+  margin-right: 2px;
+  margin-bottom: 2px;
+  border-radius: 50%;
+  .icon-bar {
+    width: 18px;
+    border-radius: 0px;
+    // materialize
+    background-color: white;
+  }
+  .icon-bar + .icon-bar {
+    margin-top: 3px;
+  }
+}
+
+// Hux fullscreen mode in 404.html
+
+.page-fullscreen .intro-header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.page-fullscreen #tag-heading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding-bottom: 150px;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: -webkit-flex;
+  -webkit-align-items: center;
+  -webkit-justify-content: center;
+  -webkit-flex-direction: column;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.page-fullscreen footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  padding-bottom: 20px;
+  opacity: 0.6;
+  color: #fff;
+}
+.page-fullscreen footer .copyright {
+  color: #fff;
+}
+.page-fullscreen footer .copyright a {
+  color: #fff;
+}
+.page-fullscreen footer .copyright a:hover {
+  color: #ddd;
+}
+
+// MathJax Overflow
+.MathJax_SVG_Display {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.no-scroll {
+  overflow-y: hidden;
+}
diff --git a/assets/sass/tagcolor-template.scss b/assets/sass/tagcolor-template.scss
new file mode 100644
index 0000000..836cf74
--- /dev/null
+++ b/assets/sass/tagcolor-template.scss
@@ -0,0 +1,20 @@
+$start-color: #bbbbee;
+$end-color: #2f93b4;
+$spread: {{ .spread }};
+$weighting: {{ .weighting }};
+@function tagColor() {
+    $sr: red($start-color);
+    $sg: green($start-color);
+    $sb: blue($start-color);
+    $incr-r: (red($end-color) - $sr) / $spread;
+    $incr-g: (green($end-color) - $sg) / $spread;
+    $incr-b: (blue($end-color) - $sb) / $spread;
+
+    $tag-color: rgb( $sr + $incr-r * $weighting, $sg + $incr-g * $weighting, $sb + $incr-b * $weighting );
+    
+    @return $tag-color;
+}
+
+.tag-color__{{ .count }} {
+    background-color: tagColor() !important;
+}
\ No newline at end of file