first commit

2019-12-03 19:37:44 +08:00
commit f396a42774
105 changed files with 19372 additions and 0 deletions
--- a/source/404.html
+++ b/source/404.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>404</title>
+  <meta name="keywords" content="Hexo,404,Design">
+  <meta name="description" content="Tribute Forrest Gump">
+  <link rel="stylesheet" href="/css/404.css">
+</head>
+<body>
+<div class="notfound">
+  <a class="notfound-link" href="/">
+    <img width="30" src="data:image/svg+xml;base64,PHN2ZyB0PSIxNTYyODQyNjI3NDA5IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcC1pZD0iNTIxNDgiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIj48cGF0aCBkPSJNMTk0LjYgNDc5LjFoNzQ5LjF2NTcuNkgxODYuNEw1MjggODc4LjMgNDg3LjMgOTE5IDEyMSA1NTIuNyA4MC4zIDUxMmw0MDctNDA3IDQwLjcgNDAuN3oiIGZpbGw9IiIgcC1pZD0iNTIxNDkiLz48L3N2Zz4=">
+  </a>
+  <figure class="forrestgump">
+    <figcaption>
+      <h1 style="color: #6b0b0c;">404<br>Not Found!</h1>
+      <h3 style="color: #14206a;">Life was like a box of chocolates, you never know what you're going to get.</h3>
+    </figcaption>
+    <img src="/images/forrestgump.png">
+  </figure>
+</div>
+</body>
+</html>
--- a/source/css/404.styl
+++ b/source/css/404.styl
@@ -0,0 +1,40 @@
+@charset "utf-8"
+//
+// 404
+html, body, div, figure, img
+  margin 0
+  padding 0
+
+body
+  font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+.notfound
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+figure.forrestgump
+  position relative
+  width 100%
+  img
+    width 100%
+  figcaption
+    float right
+    clear right
+    width 100%
+    padding 0
+    text-align right
+
+@media (min-width: 768.02px)
+  figure.forrestgump
+    width 30rem
+    figcaption
+      width 60%
+      padding 0 2rem
+      
+.notfound-link 
+  position absolute
+  z-index 9
+  margin-top 2rem
+        
--- a/source/css/_extend.styl
+++ b/source/css/_extend.styl
@@ -0,0 +1,82 @@
+$block-caption
+  text-decoration none
+  color sea-lighter
+  &:hover
+    color sea-lighter
+
+$block
+  border-radius 4px
+
+$base-style
+  h1, h2, h3, h4, h5, h6
+    margin 1.5rem 0
+  hr
+    height border-width
+    background-color border-color
+    border none
+    padding 0
+    margin 1.5rem 0
+  strong
+    font-weight bold
+  em, cite
+    font-style italic
+  sup, sub
+    font-size 75%
+    line-height 0
+    position relative
+    vertical-align baseline
+  sup
+    top -.5rem
+  sub
+    bottom -.25rem
+  small
+    font-size 85%
+  acronym, abbr
+    border-bottom border-width border-color dotted
+  ul, ol, dl
+    margin 1.5rem 0
+    line-height line-height
+
+  p, table, blockquote
+    margin 1.5rem 0
+
+  img, video
+    max-width 100%
+    height auto
+    display block
+    margin auto
+  iframe
+    border none
+  table
+    width 100%
+    border-collapse collapse
+    vertical-align middle
+    empty-cells show
+    text-align left
+    th, td, &
+      border border-width border-color solid
+    th, td
+      padding 1rem 1.5rem
+    tbody
+      tr:nth-child(2n)
+        background-color rgba(froth, .25)
+
+  blockquote
+    display block
+    padding 0 1.5rem
+    width 100%
+    overflow auto
+    border-left .3rem water solid
+    color sea-lighter
+    > :first-child
+      margin-top 0;
+    > :last-child
+      margin-bottom 0;
+    footer
+      cite
+        &:before
+          content "—"
+          padding 0 .5rem
+
+
+
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@@ -0,0 +1,59 @@
+clearfix()
+  &::before, &::after
+    content ""
+    display table
+    clear both
+
+hide-text()
+  text-indent: 100%
+  white-space: nowrap
+  overflow: hidden
+
+list-unstyled()
+  list-style none
+  padding-left 0
+  margin-left 0
+
+// Center
+center()
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+// Horizontal Center
+center-x()
+  left 50%
+  transform translateX(-50%)
+
+// Vertical Center
+center-y()
+  top 50%
+  transform translateY(-50%)
+
+
+border-radius(n)
+  -webkit-border-radius n
+  -moz-border-radius n
+  border-radius n
+
+border-top-radius(n)
+  border-top-left-radius n
+  border-top-right-radius n
+
+border-right-radius(n)
+  border-top-right-radius n
+  border-bottom-right-radius n
+
+border-bottom-radius(n)
+  border-bottom-left-radius n
+  border-bottom-right-radius n
+
+transition(transition)
+  transition transition
+
+rounded-circle(size)
+  width size
+  height size
+  border-radius size / 2
+
+// Media queries
--- a/source/css/_normalize.styl
+++ b/source/css/_normalize.styl
@@ -0,0 +1,308 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html
+  line-height 1.15 /* 1 */
+  -webkit-text-size-adjust 100% /* 2 */
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body
+  margin 0
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1
+  font-size 2em
+  margin 0.67em 0
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr
+  box-sizing content-box /* 1 */
+  height 0 /* 1 */
+  overflow visible /* 2 */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a
+  background-color transparent
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title]
+  border-bottom none /* 1 */
+  text-decoration underline /* 2 */
+  text-decoration underline dotted /* 2 */
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong
+  font-weight bolder
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small
+  font-size 80%
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sub
+  bottom -0.25em
+
+sup
+  top -0.5em
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img
+  border-style none
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family inherit /* 1 */
+  font-size 100% /* 1 */
+  line-height 1.15 /* 1 */
+  margin 0 /* 2 */
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input /* 1 */
+  overflow visible
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select /* 1 */
+  text-transform none
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"]
+  -webkit-appearance button
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+  border-style none
+  padding 0
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring
+  outline 1px dotted ButtonText
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset
+  padding 0.35em 0.75em 0.625em
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend
+  box-sizing border-box /* 1 */
+  color inherit /* 2 */
+  display table /* 1 */
+  max-width 100% /* 1 */
+  padding 0 /* 3 */
+  white-space normal /* 1 */
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress
+  vertical-align baseline
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea
+  overflow auto
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"]
+  box-sizing border-box /* 1 */
+  padding 0 /* 2 */
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+  height auto
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"]
+  -webkit-appearance textfield /* 1 */
+  outline-offset -2px /* 2 */
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration
+  -webkit-appearance none
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button
+  -webkit-appearance button /* 1 */
+  font inherit /* 2 */
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details
+  display block
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary
+  display list-item
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template
+  display none
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden]
+  display none
--- a/source/css/_partial/albums.styl
+++ b/source/css/_partial/albums.styl
@@ -0,0 +1,55 @@
+
+.article-albums
+  position relative
+
+.article-albums-photos
+  position relative
+  display flex
+  flex-wrap wrap
+  list-unstyled()
+  clearfix()
+  &::after
+    content: ''
+    flex-grow 999999999
+  .article-albums-item
+    position relative
+    flex-grow 1
+    margin .5rem
+    overflow hidden
+    img
+      object-fit cover
+      max-width 100%
+      min-width 100%
+      vertical-align: center
+    .article-albums-caption
+      display block
+      width 100%
+      padding 1rem 0
+      text-align center
+
+// Media Query
+@media (min-width: 576px)
+  .article-albums-item
+    img
+      height 32rem
+    .article-albums-caption
+      position absolute
+      bottom 0
+      left 0
+      width 100%
+      background-color rgba(black, .5)
+      background linear-gradient(to top, rgba(black, .5), transparent)
+      color white
+      padding 1rem
+      opacity 0
+      transform translateY(100%)
+      transition(transition-base)
+    &:hover
+      .article-albums-caption
+        opacity 1
+        transform translateY(0)
+
+@media (min-width: 768px)
+  .article-albums-item
+    img
+      height 20rem
--- a/source/css/_partial/apple.styl
+++ b/source/css/_partial/apple.styl
@@ -0,0 +1,89 @@
+
+// apple product
+//
+// macbook air
+color-macbook          = white
+color-macbook-darken   = darken(color-macbook, 5%)
+
+//
+// browser
+color-browser-light    = white
+color-browser-btns     =
+        close            #eb6b60
+        minimize         #f4be4f
+        maximize         #66c655
+
+scrolling-wrap-height  = 30rem
+
+//
+// macbook air
+.macbook 
+  position relative
+  .macbook-screen
+    position relative
+    background-color transparent
+    border-style solid
+    border-color color-macbook
+    border-radius 1rem
+    border-width 1.25rem
+    box-shadow 0 1rem 3rem rgba(black, .15), 0 0 .5rem rgba(black, .15) inset
+  
+  .macbook-keyboard
+    display none
+    position relative
+    box-sizing content-box
+    background-color color-macbook
+    border-bottom solid .75rem color-macbook-darken
+    border-bottom-radius(50%)
+    margin -.5rem -5rem 0
+    height .5rem
+    box-shadow 0 .5rem 3rem rgba(0,0,0,.15)
+    &::before 
+      content ''
+      position absolute
+      center-x()
+      background linear-gradient(90deg, color-macbook-darken, color-macbook, color-macbook-darken)
+      box-shadow 0 0 .1rem rgba(0, 0, 0, .05) inset
+      width 20%
+      height .3rem
+      border-radius .125rem
+ 
+
+//
+@media (min-width: 768px)
+  .macbook
+    .macbook-screen
+      border-width 2rem 1.25rem 1.25rem
+    .macbook-keyboard
+      display block
+
+//
+// markdown article
+.macbook-wrap
+  padding 1rem 9rem
+
+//
+// markdown article shwo scrolling page
+@keyframes scrolling-animation
+  0%
+    top 0
+  10%
+    top 0
+    transform translateY(0)
+  30%
+    transform translateY(-35%)
+  60%
+    transform translateY(-75%)
+  90%
+    transform translateY(-100%)
+  100%
+    transform translateY(-100%)
+
+.scrolling-wrap
+  min-height scrolling-wrap-height
+  overflow hidden
+.scrolling
+  position absolute
+  top scrolling-wrap-height
+  width 100%
+  animation scrolling-animation 10s ease-in-out 1s infinite
--- a/source/css/_partial/archive.styl
+++ b/source/css/_partial/archive.styl
@@ -0,0 +1,92 @@
+.archives-wrap
+  position relative
+  clearfix()
+  &:first-child
+    margin-top 3rem
+  &:last-child
+    margin-bottom 3rem
+
+.archive-year-wrap
+  position absolute
+  top 0
+  left 0
+  width years-width
+  .archive-year
+    position relative
+    display inline-block
+    @extend $block-caption
+    &::after
+      content ''
+      position absolute
+      left 0
+      bottom 0
+      height .15rem
+      background-color sea-lighter
+      width 100%
+
+.archives
+  margin-left years-width
+  border-left border-width border-color dashed
+  padding-left 3rem
+  clearfix()
+
+.archive-article
+  avoid-column-break()
+
+.archive-article-inner
+  @extend $block
+  margin-bottom 1.5rem
+
+.archive-article-header
+  display table-row
+  > a, > h2
+    display table-cell
+  h2
+    margin 0
+    padding-left 3rem
+    .archive-article-title
+      text-decoration: none
+      font-size 1.5rem
+
+.archive-article-footer
+  margin-top: 1.5rem
+
+.archive-article-date
+  position relative
+  display: block
+  @extend $block-caption
+  &::before
+    content ''
+    position absolute
+    top 50%
+    left -3.5rem
+    margin-top -.5rem
+    rounded-circle(1rem)
+    background-color border-color
+
+.page-type-title
+  margin 0
+  padding 3rem 0
+
+.page-nav
+  clearfix()
+  margin: 3rem auto
+  text-align: center
+  overflow: hidden
+  a, span
+    padding: 1rem 1.5rem
+    line-height: 1
+  a
+    text-decoration: none
+  .prev
+    float: left
+  .next
+    float: right
+  .page-number
+    display: inline-block
+    @media mq-mobile
+      display: none
+  .current
+    font-weight: bold
+  .space
+    color: border-color
--- a/source/css/_partial/article.styl
+++ b/source/css/_partial/article.styl
@@ -0,0 +1,256 @@
+
+.article
+  padding 5rem 0 3rem
+  .sea-center
+    text-align center
+    color black
+    &::after
+      border-bottom: 2px dashed water;
+      content: '';
+      width: 100px;
+      display: block;
+      margin: .2em auto 0;
+      height: 2px
+//.article-inner
+//  overflow hidden
+
+.article-topping
+  position absolute
+  top 0
+  left -3rem
+  color: #ea434a
+  &>i
+    font-size 2rem
+    line-height 1.7
+
+
+.article-meta
+  clearfix()
+
+.article-date
+  @extend $block-caption
+  &::before
+    content '\eaf2'
+    margin-right .5rem
+    font-family remixicon
+    opacity .5
+
+.article-category
+  display inline-block
+  margin-left 1.5rem
+  &:before
+    content "\efde"
+    font-family remixicon
+    margin-right .5rem
+    opacity 0.6
+  .article-category-link
+    @extend $block-caption
+
+.archive-article-header
+  + .article-category
+    margin-left 0
+
+.article-entry
+  font-size 110%
+  margin-top 1rem
+  clearfix()
+  @extend $base-style
+  color body-color
+  .pullquote
+    text-align left
+    width 45%
+    margin 0
+    &.left
+      margin-left 0.5em
+      margin-right 1em
+    &.right
+      margin-right 0.5em
+      margin-left 1em
+  .caption
+    color color-grey
+    display block
+    font-size 0.9em
+    margin-top 0.5em
+    position relative
+    text-align center
+  // http://webdesignerwall.com/tutorials/css-elastic-videos
+  .video-container
+    position relative
+    padding-top (9 / 16 * 100) % // 16:9 ratio
+    height 0
+    overflow hidden
+    iframe, object, embed
+      position absolute
+      top 0
+      left 0
+      width 100%
+      height 100%
+      margin-top 0
+
+.article-header
+  position relative
+  h1, h2
+    margin 0
+  .article-title
+    display block
+    font-size 1.8em
+    font-weight bold
+    margin-bottom 3rem
+    text-decoration none
+    color body-color
+    padding-left 2rem
+    border-left 4px solid body-color 
+
+.article-footer
+  clearfix()
+  margin-top 3rem
+
+// Tags
+.article-tag-list
+  list-unstyled()
+  margin 0
+  &:before
+    color: tag-color
+    content "\eec3"
+    font-family remixicon
+    margin-right .5rem
+  .article-tag-list-item
+    display inline-block
+    padding-right 1rem
+  .article-tag-list-link
+    font-size: 11px
+    text-decoration: none
+    display: block;
+    color: white;
+    float: left;
+    height 18px
+    line-height 18px
+    padding 0px 8px;
+    position: relative;
+    border-radius: 9px;
+    background-color tag-color
+
+.article-comment-link
+  float right
+  &:before
+    content "\ee0d"
+    font-family remixicon
+    padding-right 8px
+
+.article-share-link
+  cursor pointer
+  float right
+  margin-left 20px
+  &:before
+    content "\ef76"
+    font-family remixicon
+    padding-right 6px
+
+// Nav  Older & Newer
+.article-nav
+  clearfix()
+  position relative
+  padding-top 3rem
+  margin-top 5rem
+  border-top border-width border-color solid
+
+.article-nav-link
+  display block
+  text-decoration none
+  &:first-child
+    float left
+  &:last-child
+    float right
+    text-align right
+
+.article-nav-caption
+  color sea-lighter
+
+.article-nav-title
+  font-size inherit
+
+// Share
+.article-share-box
+  position absolute
+  display none
+  background white
+  border-radius(.4rem)
+  box-shadow 1px 2px 10px rgba(0, 0, 0, 0.2)
+  border-radius 3px
+  margin-left -145px
+  overflow hidden
+  z-index 1
+  &.on
+    display block
+
+.article-share-input
+  width 100%
+  background none
+  box-sizing border-box
+  padding 0 1.5rem
+  outline none
+  border none
+  border-bottom border-width border-color solid
+  height 3.6rem
+  line-height 3.6rem
+
+.article-share-links
+  clearfix()
+
+$article-share-link
+  position relative
+  display block
+  float left
+  width 5rem
+  height 3.6rem
+  color body-color
+  text-align center
+  text-decoration none
+  &:before
+    font-size 20px
+    font-family remixicon
+    absolute-center(font-size-base)
+  &:hover
+    color white
+
+.article-share-twitter
+  @extend $article-share-link
+  &:before
+    content "\f068"
+  &:hover
+    background twitter-color
+    text-shadow 0 1px darken(twitter-color, 20%)
+
+.article-share-facebook
+  @extend $article-share-link
+  &:before
+    content "\ec30"
+  &:hover
+    background facebook-color
+    text-shadow 0 1px darken(facebook-color, 20%)
+
+.article-share-pinterest
+  @extend $article-share-link
+  &:before
+    content "\eea8"
+  &:hover
+    background pinterest-color
+    text-shadow 0 1px darken(pinterest-color, 20%)
+
+.article-share-google
+  @extend $article-share-link
+  &:before
+    content "\ed15"
+  &:hover
+    background google-color
+    text-shadow 0 1px darken(google-color, 20%)
+
+
+@import "tocbot"
+@import "gallery"
+@import "albums"
+@import "justifiedGallery"
+
+@media (max-width: 768px)
+  .article-entry
+      font-size 120%
--- a/source/css/_partial/articles.styl
+++ b/source/css/_partial/articles.styl
@@ -0,0 +1,21 @@
+.articles
+  .article
+    padding 4.5rem 0
+    &:not(:last-child)
+      border-bottom border-width border-color solid
+  .article-entry, .article-footer
+    margin-top 0
+  .article-entry
+    margin 1rem 0
+    padding 0 2rem 2rem
+    border 1px dashed lighten(tag-color,80%)
+    .article-more-link
+      display inline-block
+      float right
+      background-color body-color 
+      padding .5rem 1rem
+      border-radius 4px
+      color white !important
+      text-decoration none
+    .article-gallery
+      margin-top 1.5rem
--- a/source/css/_partial/ayer.styl
+++ b/source/css/_partial/ayer.styl
@@ -0,0 +1,72 @@
+@keyframes down
+      0%
+        margin-bottom 0
+        opacity 1
+      100%
+        margin-bottom -15px
+        opacity .1
+//
+.cover-frame
+  position relative
+  min-width 100%
+  height 100vh
+  .bg-box
+    width 100%
+    height 100%
+    &>img
+      display block
+      width 100vw
+      height 100vh
+      object-fit cover
+      object-position center center
+.cover-inner
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -100%)
+  h1
+    font-size 8rem
+    margin 0
+  h2 
+    font-size 3rem
+    margin .5rem 0 1.5rem
+  a, &
+    color white
+    text-decoration none
+  video, img
+    position relative
+  .cover-logo
+    width cover-logo-size
+
+
+.cover-learn-more
+  position absolute
+  z-index 1
+  bottom 10px
+  left 0
+  width 100%
+  a > i
+    font-size 3rem
+    color white
+    animation down 1s linear infinite
+    &:hover
+      color sea
+
+.to_top
+  position fixed
+  bottom 10rem
+  right 50px
+  z-index 9
+  text-align center
+
+// Media Query
+@media (max-width: 768px)
+  .cover-inner
+    transform: translate(-50%, -70%);
+    h1
+      font-size 6rem
+    h2
+      font-size 2.3rem
+  
+  .to_top
+    right 10px
--- a/source/css/_partial/categories.styl
+++ b/source/css/_partial/categories.styl
@@ -0,0 +1,13 @@
+// Categories
+
+.category-list
+  list-unstyled()
+  margin-right -.5rem
+  margin-left -.5rem
+  > .category-list-item
+    display inline-block
+    padding .5rem 1rem
+    &:before
+      content "\efde"
+      font-family remixicon
+      margin-right .5rem
--- a/source/css/_partial/float.styl
+++ b/source/css/_partial/float.styl
@@ -0,0 +1,9 @@
+
+.float-left
+  float: left !important;
+
+.float-right
+  float: right !important;
+
+.float-none
+  float: none !important;
--- a/source/css/_partial/footer.styl
+++ b/source/css/_partial/footer.styl
@@ -0,0 +1,17 @@
+
+.footer
+  border-top border-width solid border-color 
+  padding 3rem 0
+  .outer
+    &>ul
+      position relative
+      display flex
+      justify-content space-between
+      &:first-child
+        border-bottom border-width solid darken(froth-light,10%)
+
+      li
+        display inline-block
+        padding .5rem 0
+      span
+        margin-right 6px
--- a/source/css/_partial/gallery.styl
+++ b/source/css/_partial/gallery.styl
@@ -0,0 +1,20 @@
+
+.article-gallery
+  position: relative
+
+.article-gallery-photos
+  position: relative
+  overflow: hidden
+
+.article-gallery-img
+  display: none
+  max-width: 100%
+  &:first-child
+    display: block
+  &.loaded
+    position: absolute
+    display: block
+  img
+    display: block
+    max-width: 100%
+    margin: 0 auto
--- a/source/css/_partial/gitalk.styl
+++ b/source/css/_partial/gitalk.styl
@@ -0,0 +1,7 @@
+.gitalk,.markdown-body
+  font-size font-size-base!important
+
+.gt-container
+  .gt-avatar.gt-comment-avatar
+    img
+      border-radius 50%!important
--- a/source/css/_partial/highlight.styl
+++ b/source/css/_partial/highlight.styl
@@ -0,0 +1,148 @@
+highlight-background = #f6f8fa
+highlight-current-line = #efefef
+highlight-selection = #d6d6d6
+highlight-foreground = #4d4d4c
+highlight-comment = #8e908c
+highlight-red = #f2777a
+highlight-orange = #f99157
+highlight-yellow = #ffcc66
+highlight-green = #99cc99
+highlight-aqua = #66cccc
+highlight-blue = #6699cc
+highlight-purple = #cc99cc
+
+$code-block
+  background highlight-background
+  padding 1.5rem
+  margin 1.5rem 0
+  border-radius .4rem
+  overflow auto
+  color highlight-foreground
+
+$line-numbers
+  color highlight-comment
+
+.article-entry
+  pre, code
+    font-family inherit
+    text-shadow none
+  code
+    background highlight-background
+    padding .25rem
+    border-radius(.4rem)
+  pre
+    @extend $code-block
+    code
+      background none
+      padding 0
+  .highlight
+    @extend $code-block
+    pre
+      border none
+      margin 0
+      padding 0
+    table
+      margin 0
+      width auto
+      border none
+    td
+      border none
+      padding 0
+    figcaption
+      clearfix()
+      font-size 85%
+      color highlight-comment
+      line-height 1rem
+      margin-bottom 1rem
+      a
+        float right
+    .gutter
+      -webkit-user-select none
+      -moz-user-select none
+      -ms-user-select none
+      user-select none
+    .gutter pre
+      @extend $line-numbers
+      text-align right
+      padding-right 1.5rem
+    .line
+      height inherit
+    .line.marked
+      background highlight-selection
+  .gist
+    background highlight-background
+    .gist-file
+      border none
+      margin 0
+      .gist-data
+        background none
+        border none
+        .line-numbers
+          @extend $line-numbers
+          background none
+          border none
+        .line-data
+          padding 0 !important
+      .highlight
+        margin 0
+        padding 0
+        border none
+      .gist-meta
+        background highlight-background
+        color highlight-comment
+        padding 0
+        margin-top 1rem
+        a
+          font-weight normal
+          &:hover
+            text-decoration underline
+
+pre
+  .comment
+  .title
+    color highlight-comment
+  .variable
+  .attribute
+  .tag
+  .regexp
+  .ruby .constant
+  .xml .tag .title
+  .xml .pi
+  .xml .doctype
+  .html .doctype
+  .css .id
+  .css .class
+  .css .pseudo
+    color highlight-red
+  .number
+  .preprocessor
+  .built_in
+  .literal
+  .params
+  .constant
+    color highlight-orange
+  .class
+  .ruby .class .title
+  .css .rules .attribute
+    color highlight-green
+  .string
+  .value
+  .inheritance
+  .header
+  .ruby .symbol
+  .xml .cdata
+    color highlight-green
+  .css .hexcolor
+    color highlight-aqua
+  .function
+  .python .decorator
+  .python .title
+  .ruby .function .title
+  .ruby .title .keyword
+  .perl .sub
+  .javascript .title
+  .coffeescript .title
+    color highlight-blue
+  .keyword
+  .javascript .function
+    color highlight-purple
--- a/source/css/_partial/justifiedGallery.styl
+++ b/source/css/_partial/justifiedGallery.styl
@@ -0,0 +1,73 @@
+/*
+ * Justified Gallery - v4.0.0-alpha
+ * http://miromannino.com/projects/justified-gallery/
+ * Copyright (c) 2019 Miro Mannino
+ * Licensed under the MIT license.
+ */
+
+.justified-gallery
+  width 100%
+  position relative
+  overflow hidden
+  > a, > div, > figure
+    position absolute
+    display inline-block
+    overflow hidden
+    background gray /* To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+    filter "alpha(opacity=10)"
+    opacity 0.1
+    margin 0
+    padding 0
+    > img, > a > img, > svg, > a > svg
+      position absolute
+      top 50%
+      left 50%
+      margin 0
+      padding 0
+      border none
+      filter "alpha(opacity=0)"
+      opacity 0
+    > .caption
+      display none
+      position absolute
+      right 0
+      bottom 0
+      left 0
+      padding 1rem
+      background-color rgba(black, .5)
+      background linear-gradient(to top, rgba(black, .5), transparent)
+      color white
+      &.caption-visible
+        display initial
+  > .jg-entry-visible
+    filter "alpha(opacity=100)"
+    opacity 1
+    background none
+    > img, > a > img, > svg, > a > svg
+      filter "alpha(opacity=100)"
+      opacity 1
+      -webkit-transition opacity 500ms ease-in
+      -moz-transition opacity 500ms ease-in
+      -o-transition opacity 500ms ease-in
+      transition opacity 500ms ease-in
+  > .jg-filtered
+    display none
+    > .spinner
+      position absolute
+      bottom 0
+      margin-left -24px
+      padding 10px 0 10px 0
+      left 50%
+      filter "alpha(opacity=100)"
+      opacity 1
+      overflow initial
+    > span
+      display inline-block
+      filter "alpha(opacity=0)"
+      opacity 0
+      width 8px
+      height 8px
+      margin 0 4px 0 4px
+      background-color #000
+      border-radius 6px
+      
--- a/source/css/_partial/layout.styl
+++ b/source/css/_partial/layout.styl
@@ -0,0 +1,97 @@
+// Layout
+#app
+  height 100%
+  width 100%
+  position relative
+  overflow hidden
+
+.cover
+  position relative
+  padding 0
+  margin-bottom 3rem
+  text-align center
+
+.content, .sidebar
+  transition(transition-base)
+
+.content
+  position relative
+  z-index 1
+  margin-left 0
+  height 100%
+  width 100%
+  overflow-y scroll
+  overflow-x: hidden
+  -webkit-overflow-scrolling touch
+  &.on
+    transform translateX(aside-width)
+    margin-left 0 !important
+
+.sidebar
+  position fixed
+  z-index 9
+  left - aside-width
+  bottom 0
+  width aside-width
+  height 100%
+  background-color rgba(0,0,0,.8)
+  &.on
+    left 0
+
+.navbar-toggle
+  position absolute
+  top gutter-width
+  left: gutter-width + aside-width
+  border none
+  height 4rem
+  width 4rem
+  border-radius 50%
+  background-color rgba(black, .5)
+  color white
+  transition(transition-base)
+  opacity .5
+  &:hover
+    opacity 1
+  &::before
+    content '\ee09'
+    font-family remixicon
+    font-size larger
+
+.wrap, .outer
+  width 100%
+  padding-right gutter-width
+  padding-left gutter-width
+  margin auto
+  overflow-x hidden
+  clearfix()
+
+.local-search
+  width 100%
+
+
+// Media Query
+@media (min-width: 768px)
+  .cover
+    margin-bottom 0
+    height 100%
+
+  .wrap, .outer
+    width wrap-width
+    padding-right 0
+    padding-left 0
+
+  .local-search
+    width wrap-width
+  
+  .content
+    &.on
+      transform: none
+
+@media (max-width: 768px)
+  .content
+    &.on
+      margin-left -1px !important
+  .sidebar
+    background-color body-color
+  .navbar-toggle
+    transform: scale(1.1)
--- a/source/css/_partial/lists.styl
+++ b/source/css/_partial/lists.styl
@@ -0,0 +1,2 @@
+.list-unstyled
+  list-unstyled()
--- a/source/css/_partial/mobile.styl
+++ b/source/css/_partial/mobile.styl
@@ -0,0 +1 @@
+
--- a/source/css/_partial/navbar.styl
+++ b/source/css/_partial/navbar.styl
@@ -0,0 +1,41 @@
+.navbar
+  position relative
+  padding-top 3rem
+  text-align center
+  .nav
+    list-unstyled()
+    .nav-item-link
+      display block
+      padding 1rem
+      color #bbb
+      text-decoration none
+      cursor pointer
+      &:hover
+        opacity .8
+        background-color body-color
+    &.nav-main
+      .nav-item-link
+        i
+          font-size 1rem
+          display block
+          line-height 1
+.navbar-bottom
+  position absolute
+  bottom 0
+  width 100%
+  font-size 2rem
+.logo
+  text-align center
+  margin-bottom 2rem
+  img
+    width logo-size
+
+// Media Query
+@media (max-width: 768px)
+  .navbar
+    .nav
+      .nav-item-link
+        &.nav-item-search
+          display: none
+
+  
--- a/source/css/_partial/pace.styl
+++ b/source/css/_partial/pace.styl
@@ -0,0 +1,25 @@
+
+.pace
+  -webkit-pointer-events none
+  pointer-events none
+  -webkit-user-select none
+  -moz-user-select none
+  user-select none
+  .pace-progress
+    position fixed
+    z-index 2000
+    top 0
+    right 100%
+    width 100%
+    height .2rem
+    background-color sea-blue
+
+.pace-inactive
+  display none
+
+@media (max-width: 768px)
+  .pace
+    display none
+
+
+
--- a/source/css/_partial/search.styl
+++ b/source/css/_partial/search.styl
@@ -0,0 +1,76 @@
+
+.search-form-wrap
+  width 100%
+  position fixed
+  top -100%
+  right aside-width
+  left 0
+  opacity 0
+  transition(.3s)
+  &.on
+    top 0
+    opacity 1
+
+//-------------
+.local-search
+  position relative
+  margin 0 auto
+  padding 1rem 3rem
+  background-color rgba(255,255,255,.5)
+  box-shadow 0 1rem 3rem rgba(sea, .05)
+  max-height 100vh
+  overflow-y auto
+
+.local-search-input
+  font-size 120%
+  border 0
+  border-radius(.4rem)
+  width 100%
+  padding 1rem 1.5rem
+  outline: none
+  &::-webkit-search-results-decoration
+  &::-webkit-search-cancel-button
+    -webkit-appearance: none
+
+.local-search-close
+  position absolute
+  top 1.85rem
+  right 4.25rem
+  display block
+  height 2rem
+  width 2rem
+  padding 0
+  border none
+  border-radius(50%)
+  color white
+  text-align center
+  cursor pointer
+  &::before
+    font-size: 150%
+    content '\eb52'
+    font-family remixicon
+
+// 搜索结果
+.local-search-result
+  text-align left
+
+.search-result-list
+  list-unstyled()
+  li
+    padding 1.5rem 0
+    &:not(:last-child)
+      border-bottom border-width border-color solid
+
+    .search-result-title
+      font-size 1.6rem
+      font-weight bold
+    .search-result
+      padding-top .5rem
+      margin 0
+      max-height 12rem
+      overflow hidden
+    em.search-keyword
+      color sand
+
+.search-result-empty
+  padding 3rem 0 0
--- a/source/css/_partial/sidebar.styl
+++ b/source/css/_partial/sidebar.styl
@@ -0,0 +1,2 @@
+@import "navbar"
+@import "totop"
--- a/source/css/_partial/tag.styl
+++ b/source/css/_partial/tag.styl
@@ -0,0 +1,13 @@
+// Tags
+
+.tag-list
+  list-unstyled()
+  margin-right -.5rem
+  margin-left -.5rem
+  > .tag-list-item
+    display inline-block
+    padding .5rem 1rem
+    &:before
+      content "\eec3"
+      font-family remixicon
+      margin-right .5rem
--- a/source/css/_partial/tocbot.styl
+++ b/source/css/_partial/tocbot.styl
@@ -0,0 +1,56 @@
+
+.tocbot
+  position fixed
+  top 14rem
+  left calc((100vw - 70rem) / 2 + 70rem)
+  font-size 80%
+  opacity .8
+  > .toc-list
+    position relative
+    overflow hidden
+
+
+.toc-list
+  list-unstyled()
+  padding-left 1rem
+
+
+a.toc-link
+  height 100%
+  color sea-dark
+  text-decoration none
+  font-size 115%
+
+
+.is-collapsible
+  max-height 1000px
+  overflow hidden
+  transition all 300ms ease-in-out
+
+
+.is-collapsed
+  max-height 0
+
+
+.is-position-fixed
+  position fixed !important
+  top 0
+  right aside-width
+
+.is-active-link
+  font-weight 700
+
+// Left line before pseudo element.
+.toc-link::before
+  background-color water
+  content ' '
+  display inline-block
+  height inherit
+  left 0
+  margin-top -1px
+  position absolute
+  width 2px
+
+
+.is-active-link::before
+  background-color link-active-color
--- a/source/css/_partial/totop.styl
+++ b/source/css/_partial/totop.styl
@@ -0,0 +1,31 @@
+
+@keyframes rocket {
+  0% {
+    transform translateY(0)
+    opacity 1;
+  }
+  45% {
+    transform translateY(-3.2rem)
+    opacity 0;
+  }
+  55% {
+    transform translateY(3.2rem)
+    opacity 0;
+  }
+  100% {
+    transform translateY(0)
+    opacity 1;
+  }
+}
+
+.totop
+  position relative
+  display inline-block
+  overflow hidden
+  cursor pointer
+  rounded-circle(3.2rem)
+  background-color froth-light
+  line-height 3rem
+  &:hover > i {
+    animation rocket .3s ease-in-out
+  }
--- a/source/css/_remixicon.styl
+++ b/source/css/_remixicon.styl
--- a/source/css/_variables.styl
+++ b/source/css/_variables.styl
@@ -0,0 +1,76 @@
+// Config
+support-for-ie = false
+vendor-prefixes = webkit moz ms official
+
+// Fonts
+font-size-browser = 62.5%
+font-size-base    = 1.4rem
+font-family-base  = "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
+font-line-height  = 1.7
+
+// Colors
+black         = #000000
+water         = #cce5ff
+water-green   = #9c9
+sea-blue      = #3d85c6
+sea-dark      = #172d3e
+sea           = #1e3e3f
+sea-light     = #253145
+sea-lighter   = #5c6b72
+gray          = #adb5bd
+froth-light   = #f4f4f4
+froth         = #999
+white         = #ffffff
+sand-light    = #9c8079
+sand          = #9e6a4d
+sand-dark     = #5c5858
+sand-gray     = #bbb
+red           = #ea434a
+
+// Share Colors
+twitter-color    = #00aced
+facebook-color   = #3b5998
+pinterest-color  = #cb2027
+google-color     = #dd4b39
+
+// Link Colors
+link-color         = darken(water,20%)
+link-hover-color   = lighten(link-color, 20%)
+link-active-color  = darken(link-color, 5%)
+disabled-color     = gray
+
+// Body Colors
+body-background = white
+body-color      = darken(sand-dark,30%)
+main-color      = darken(water,20%)
+tag-color       = lighten(body-color,15%)
+
+// Border
+border-radius   = 0.4rem
+border-width    = 0.1rem
+border-color    = froth
+
+// Lyout
+aside-width      = 7rem
+wrap-width       = 70rem
+years-width      = 6rem
+logo-size        = 4.2rem
+cover-logo-size  = 6rem
+
+gutter-width     = 1.5rem
+
+// Breakpoints
+breakpoints = (
+  xs = 0,
+  sm = 576px,
+  md = 768px,
+  lg = 992px,
+  xl = 1200px
+)
+
+// Transition
+transition-slow          = all .7s ease-in-out 0s
+transition-fast          = all .1s ease-in-out 0s
+transition-base          = all .3s ease-in-out
+transition-fade          = opacity .15s linear
+transition-collapse      = height .35s ease
--- a/source/css/remixicon/remixicon.eot
+++ b/source/css/remixicon/remixicon.eot
--- a/source/css/remixicon/remixicon.svg
+++ b/source/css/remixicon/remixicon.svg
--- a/source/css/remixicon/remixicon.symbol.svg
+++ b/source/css/remixicon/remixicon.symbol.svg
--- a/source/css/remixicon/remixicon.ttf
+++ b/source/css/remixicon/remixicon.ttf
--- a/source/css/remixicon/remixicon.woff
+++ b/source/css/remixicon/remixicon.woff
--- a/source/css/remixicon/remixicon.woff2
+++ b/source/css/remixicon/remixicon.woff2
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -0,0 +1,77 @@
+@import "_variables"
+@import "_mixins"
+@import "_remixicon"
+@import "_normalize"
+
+*,
+*::before
+*::after
+  box-sizing border-box
+
+html, body
+  height: 100%
+
+html
+  font-size font-size-browser
+  -webkit-text-size-adjust 100%
+  -ms-text-size-adjust 100%
+  -ms-overflow-style scrollbar
+  -webkit-tap-highlight-color transparent
+
+body
+  position relative
+  background-color body-background
+  font-family font-family-base
+  font-size font-size-base
+  line-height font-line-height
+  color body-color
+  padding 0
+  margin 0
+  overflow-x hidden
+  text-size-adjust: 100%
+  ::selection
+    background sea-lighter
+    color froth
+a
+  color link-color
+  &:hover
+    color link-hover-color
+  &:active
+    color link-active-color
+  &.disabled
+    color disabled-color
+ul, menu, dir
+  margin 0
+  padding 0
+img
+  max-width 100%
+
+button
+  outline: none
+  cursor pointer
+  
+@import "_extend"
+@import "_partial/layout"
+@import "_partial/lists"
+@import "_partial/categories"
+@import "_partial/tag"
+@import "_partial/ayer"
+@import "_partial/search"
+@import "_partial/article"
+@import "_partial/articles"
+@import "_partial/archive"
+@import "_partial/footer"
+@import "_partial/float"
+@import "_partial/highlight"
+@import "_partial/mobile"
+@import "_partial/pace"
+@import "_partial/gitalk"
+@import "_partial/apple"
+
+if sidebar
+  @import "_partial/sidebar"
+
+// Media Query
+@media (max-width: 768px)
+  html
+    font-size: 60%
--- a/source/fancybox/jquery.fancybox.min.css
+++ b/source/fancybox/jquery.fancybox.min.css
--- a/source/fancybox/jquery.fancybox.min.js
+++ b/source/fancybox/jquery.fancybox.min.js
--- a/source/favicon.ico
+++ b/source/favicon.ico
--- a/source/images/ayer-side.svg
+++ b/source/images/ayer-side.svg
--- a/source/images/ayer.svg
+++ b/source/images/ayer.svg
--- a/source/images/cover1.jpg
+++ b/source/images/cover1.jpg
--- a/source/images/cover2.jpg
+++ b/source/images/cover2.jpg
--- a/source/images/cover3.jpg
+++ b/source/images/cover3.jpg
--- a/source/images/cover4.jpg
+++ b/source/images/cover4.jpg
--- a/source/images/cover5.jpg
+++ b/source/images/cover5.jpg
--- a/source/images/cover6.jpg
+++ b/source/images/cover6.jpg
--- a/source/images/cover7.jpg
+++ b/source/images/cover7.jpg
--- a/source/images/forrestgump.png
+++ b/source/images/forrestgump.png
--- a/source/js/ayer.js
+++ b/source/js/ayer.js
@@ -0,0 +1,209 @@
+(function ($) {
+  //
+  // Search ------------
+  var $searchWrap = $('.search-form-wrap'),
+    isSearchAnim = false,
+    searchAnimDuration = 200;
+
+  var startSearchAnim = function () {
+    isSearchAnim = true;
+  };
+
+  var stopSearchAnim = function (callback) {
+    setTimeout(function () {
+      isSearchAnim = false;
+      callback && callback();
+    }, searchAnimDuration);
+  };
+
+  $('.nav-item-search').on('click', function () {
+    if (isSearchAnim) return;
+    startSearchAnim();
+    $searchWrap.addClass('on');
+    stopSearchAnim(function () {
+      $('.local-search-input').focus();
+    });
+  });
+
+  $(document).mouseup(function (e) {
+    var _con = $('.local-search');
+    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
+      $searchWrap.removeClass('on');
+    }
+  });
+
+  //
+  // 移动设备侦测
+  var isMobile = {
+    Android: function () {
+      return navigator.userAgent.match(/Android/i);
+    },
+    BlackBerry: function () {
+      return navigator.userAgent.match(/BlackBerry/i);
+    },
+    iOS: function () {
+      return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    },
+    Opera: function () {
+      return navigator.userAgent.match(/Opera Mini/i);
+    },
+    Windows: function () {
+      return navigator.userAgent.match(/IEMobile/i);
+    },
+    any: function () {
+      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
+    }
+  };
+
+  //
+  // 建议在移动端不初始化，其实 /search.xml 文件还挺大的，
+  if ($('.local-search').size() && !isMobile.any()) {
+    $.getScript('/js/search.js', function () {
+      searchFunc("/search.xml", 'local-search-input', 'local-search-result');
+    });
+  }
+
+  //
+  // Share
+  $('body').on('click', function () {
+    $('.article-share-box.on').removeClass('on');
+  }).on('click', '.article-share-link', function (e) {
+    e.stopPropagation();
+
+    var $this = $(this),
+      url = $this.attr('data-url'),
+      encodedUrl = encodeURIComponent(url),
+      id = 'article-share-box-' + $this.attr('data-id'),
+      offset = $this.offset();
+
+    if ($('#' + id).length) {
+      var box = $('#' + id);
+
+      if (box.hasClass('on')) {
+        box.removeClass('on');
+        return;
+      }
+    } else {
+      var html = [
+        '<div id="' + id + '" class="article-share-box">',
+        '<input class="article-share-input" value="' + url + '">',
+        '<div class="article-share-links">',
+        '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
+        '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
+        '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
+        '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
+        '</div>',
+        '</div>'
+      ].join('');
+
+      var box = $(html);
+      $('body').append(box);
+    }
+    $('.article-share-box.on').hide();
+
+    box.css({
+      top: offset.top + 25,
+      left: offset.left
+    }).addClass('on');
+  }).on('click', '.article-share-box', function (e) {
+    e.stopPropagation();
+  }).on('click', '.article-share-box-input', function () {
+    $(this).select();
+  }).on('click', '.article-share-box-link', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
+  });
+
+  //
+  // fancybox
+  if ($.fancybox) {
+    $('[data-fancybox]').fancybox({
+      protect: true
+    });
+  }
+
+  //
+  // lazyload
+  $("img.lazy").lazyload({
+    effect : "fadeIn"
+  });
+
+  //
+  // justifiedGallery
+  $('#gallery').justifiedGallery({
+    rowHeight : 200,
+    margins : 5
+  });
+
+  //
+  $(document).ready(function ($) {
+    $('.anchor').click(function (event) {
+      event.preventDefault();
+      $('main').animate({scrollTop: $(this.hash).offset().top}, 'smooth');
+    });
+  });
+
+  // To top
+  (function($) {
+    // When to show the scroll link
+    // higher number = scroll link appears further down the page
+    var upperLimit = 1000;
+
+    // Our scroll link element
+    var scrollElem = $('#totop');
+
+    // Scroll to top speed
+    var scrollSpeed = 1600;
+
+    // Show and hide the scroll to top link based on scroll position
+    scrollElem.hide();
+    $('.content').scroll(function () {
+      var scrollTop = $('.content').scrollTop();
+      if ( scrollTop > upperLimit ) {
+        $(scrollElem).stop().fadeTo(300, 1); // fade back in
+      }else{
+        $(scrollElem).stop().fadeTo(300, 0); // fade out
+      }
+    });
+
+    // Scroll to top animation on click
+    $(scrollElem).click(function(){
+      $('.content').animate({scrollTop:0}, scrollSpeed); return false;
+    });
+  })(jQuery);
+
+  // Mobile nav
+  var $content = $('.content'),
+    $sidebar = $('.sidebar'),
+    isMobileNavAnim = false,
+    mobileNavAnimDuration = 200;
+
+  var startMobileNavAnim = function () {
+    isMobileNavAnim = true;
+  };
+
+  var stopMobileNavAnim = function () {
+    setTimeout(function () {
+      isMobileNavAnim = false;
+    }, mobileNavAnimDuration);
+  };
+
+  $('.navbar-toggle').on('click', function () {
+    if (isMobileNavAnim) return;
+    startMobileNavAnim();
+    $content.toggleClass('on');
+    $sidebar.toggleClass('on');
+    stopMobileNavAnim();
+  });
+
+  $($content).on('click', function () {
+    if (isMobileNavAnim || !$content.hasClass('on')) return;
+    $content.removeClass('on');
+    $sidebar.removeClass('on');
+  });
+
+})(jQuery);
+
+
--- a/source/js/busuanzi-2.3.pure.min.js
+++ b/source/js/busuanzi-2.3.pure.min.js
@@ -0,0 +1 @@
+var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
--- a/source/js/jquery-2.0.3.min.js
+++ b/source/js/jquery-2.0.3.min.js
--- a/source/js/jquery.justifiedGallery.min.js
+++ b/source/js/jquery.justifiedGallery.min.js
--- a/source/js/lazyload.min.js
+++ b/source/js/lazyload.min.js
@@ -0,0 +1,8 @@
+/*!
+ * An jQuery | zepto plugin for lazy loading images.
+ * author -> jieyou
+ * see https://github.com/jieyou/lazyload
+ * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
+ * use component's throttle https://github.com/component/throttle (MIT)
+ */
+!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery||window.Zepto)}(function(t,e){var a,r,n=window,o=t(n),l={threshold:0,failure_limit:0,event:"scroll",effect:"show",effect_params:null,container:n,data_attribute:"original",data_srcset_attribute:"original-srcset",skip_invisible:!0,appear:i,load:i,vertical_only:!1,check_appear_throttle_time:300,url_rewriter_fn:i,no_fake_img_loader:!1,placeholder_data_img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",placeholder_real_img:"http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png"};function i(){}function c(t,e){return(e._$container==o?("innerHeight"in n?n.innerHeight:o.height())+o.scrollTop():e._$container.offset().top+e._$container.height())<=t.offset().top-e.threshold}function f(t,e){return(e._$container==o?o.scrollTop():e._$container.offset().top)>=t.offset().top+e.threshold+t.height()}function _(e,a){var r=0;e.each(function(l,i){var _=e.eq(l);if(!(_.width()<=0&&_.height()<=0||"none"===_.css("display")))if(a.vertical_only)if(f(_,a));else if(c(_,a)){if(++r>a.failure_limit)return!1}else d();else if(f(_,a)||function(e,a){return(a._$container==o?t.fn.scrollLeft?o.scrollLeft():n.pageXOffset:a._$container.offset().left)>=e.offset().left+a.threshold+e.width()}(_,a));else if(c(_,a)||function(e,a){return(a._$container==o?o.width()+(t.fn.scrollLeft?o.scrollLeft():n.pageXOffset):a._$container.offset().left+a._$container.width())<=e.offset().left-a.threshold}(_,a)){if(++r>a.failure_limit)return!1}else d();function d(){_.trigger("_lazyload_appear"),r=0}})}function d(t){return t.filter(function(e){return!t.eq(e).data("_lazyload_loadStarted")})}r=Object.prototype.toString,a=function(t){return r.call(t).replace("[object ","").replace("]","")},t.fn.hasOwnProperty("lazyload")||(t.fn.lazyload=function(e){var r,c,f,s=this;return t.isPlainObject(e)||(e={}),t.each(l,function(r,i){var c=a(e[r]);-1!=t.inArray(r,["threshold","failure_limit","check_appear_throttle_time"])?"String"==c?e[r]=parseInt(e[r],10):"Number"!=c&&(e[r]=i):"container"==r?(e.hasOwnProperty(r)?e[r]==n||e[r]==document?e._$container=o:e._$container=t(e[r]):e._$container=o,delete e.container):!l.hasOwnProperty(r)||e.hasOwnProperty(r)&&c==a(l[r])||(e[r]=i)}),r="scroll"==e.event,f=0==e.check_appear_throttle_time?_:function(t,e){var a,r,n,o,l=0;return function(){a=this,r=arguments;var t=new Date-l;return o||(t>=e?i():o=setTimeout(i,e-t)),n};function i(){o=0,l=+new Date,n=t.apply(a,r),a=null,r=null}}(_,e.check_appear_throttle_time),c=r||"scrollstart"==e.event||"scrollstop"==e.event,s.each(function(a,r){var n=this,o=s.eq(a),l=o.attr("src"),f=o.attr("data-"+e.data_attribute),_=e.url_rewriter_fn==i?f:e.url_rewriter_fn.call(n,o,f),u=o.attr("data-"+e.data_srcset_attribute),h=o.is("img");if(o.data("_lazyload_loadStarted")||l==_)return o.data("_lazyload_loadStarted",!0),void(s=d(s));o.data("_lazyload_loadStarted",!1),h&&!l&&o.one("error",function(){o.attr("src",e.placeholder_real_img)}).attr("src",e.placeholder_data_img),o.one("_lazyload_appear",function(){var a,r=t.isArray(e.effect_params);function l(){a&&o.hide(),h?(u&&o.attr("srcset",u),_&&o.attr("src",_)):o.css("background-image",'url("'+_+'")'),a&&o[e.effect].apply(o,r?e.effect_params:[]),s=d(s)}o.data("_lazyload_loadStarted")||(a="show"!=e.effect&&t.fn[e.effect]&&(!e.effect_params||r&&0==e.effect_params.length),e.appear!=i&&e.appear.call(n,o,s.length,e),o.data("_lazyload_loadStarted",!0),e.no_fake_img_loader||u?(e.load!=i&&o.one("load",function(){e.load.call(n,o,s.length,e)}),l()):t("<img />").one("load",function(){l(),e.load!=i&&e.load.call(n,o,s.length,e)}).attr("src",_))}),c||o.on(e.event,function(){o.data("_lazyload_loadStarted")||o.trigger("_lazyload_appear")})}),c&&e._$container.on(e.event,function(){f(s,e)}),o.on("resize load",function(){f(s,e)}),t(function(){f(s,e)}),this})});
--- a/source/js/pace.min.js
+++ b/source/js/pace.min.js
--- a/source/js/search.js
+++ b/source/js/search.js
@@ -0,0 +1,127 @@
+// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
+// Copyright (C) 2015 
+// Joseph Pan <http://github.com/wzpan>
+// Shuhao Mao <http://github.com/maoshuhao>
+// This library is free software; you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as
+// published by the Free Software Foundation; either version 2.1 of the
+// License, or (at your option) any later version.
+// 
+// This library is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// Lesser General Public License for more details.
+// 
+// You should have received a copy of the GNU Lesser General Public
+// License along with this library; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+// 02110-1301 USA
+// 
+
+var searchFunc = function (path, search_id, content_id) {
+  'use strict';
+  var BTN = "<button type='button' class='local-search-close' id='local-search-close'></button>";
+  $.ajax({
+    url: path,
+    dataType: "xml",
+    success: function (xmlResponse) {
+      // get the contents from search data
+      var datas = $("entry", xmlResponse).map(function () {
+        return {
+          title: $("title", this).text(),
+          content: $("content", this).text(),
+          url: $("url", this).text()
+        };
+      }).get();
+
+      var $input = document.getElementById(search_id);
+      var $resultContent = document.getElementById(content_id);
+
+      $input.addEventListener('input', function () {
+        var str = '<ul class="search-result-list">';
+        var keywords = this.value.trim().toLowerCase().split(/[\s]+/);
+        $resultContent.innerHTML = "";
+        if (this.value.trim().length <= 0) {
+          return;
+        }
+        // perform local searching
+        datas.forEach(function (data) {
+          var isMatch = true;
+          // var content_index = [];
+          if (!data.title || data.title.trim() === '') {
+            data.title = "Untitled";
+          }
+          var data_title = data.title.trim().toLowerCase();
+          var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
+          var data_url = data.url;
+          var index_title = -1;
+          var index_content = -1;
+          var first_occur = -1;
+          // only match artiles with not empty contents
+          if (data_content !== '') {
+            keywords.forEach(function (keyword, i) {
+              index_title = data_title.indexOf(keyword);
+              index_content = data_content.indexOf(keyword);
+
+              if (index_title < 0 && index_content < 0) {
+                isMatch = false;
+              } else {
+                if (index_content < 0) {
+                  index_content = 0;
+                }
+                if (i == 0) {
+                  first_occur = index_content;
+                }
+                // content_index.push({index_content:index_content, keyword_len:keyword_len});
+              }
+            });
+          } else {
+            isMatch = false;
+          }
+          // show search results
+          if (isMatch) {
+            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
+            var content = data.content.trim().replace(/<[^>]+>/g, "");
+            if (first_occur >= 0) {
+              // cut out 100 characters
+              var start = first_occur - 20;
+              var end = first_occur + 80;
+
+              if (start < 0) {
+                start = 0;
+              }
+
+              if (start == 0) {
+                end = 100;
+              }
+
+              if (end > content.length) {
+                end = content.length;
+              }
+
+              var match_content = content.substr(start, end);
+
+              // highlight all keywords
+              keywords.forEach(function (keyword) {
+                var regS = new RegExp(keyword, "gi");
+                match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
+              });
+
+              str += "<p class=\"search-result\">" + match_content + "...</p>"
+            }
+            str += "</li>";
+          }
+        });
+        str += "</ul>";
+        if (str.indexOf('<li>') === -1) {
+          return $resultContent.innerHTML = BTN + "<div class=\"search-result-empty\"><p><i class=\"fe fe-tired\"></i> 没有找到内容，更换下搜索词试试吧~<p></div>";
+        }
+        $resultContent.innerHTML = BTN + str;
+      });
+    }
+  });
+  $(document).on('click', '#local-search-close', function () {
+    $('#local-search-input').val('');
+    $('#local-search-result').html('');
+  });
+};
--- a/source/js/tocbot.min.js
+++ b/source/js/tocbot.min.js
				`@@ -0,0 +1 @@`
				var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a\|\|"interactive"===document.readyState\|\|"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a\|\|(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded\|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a\|\|document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};