first commit

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
+        

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
+
+
+

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

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

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

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

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

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%

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

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

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

source/css/_partial/float.styl

@@ -0,0 +1,9 @@
+
+.float-left
+  float: left !important;
+
+.float-right
+  float: right !important;
+
+.float-none
+  float: none !important;

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

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

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

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

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
+      

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)

source/css/_partial/lists.styl

@@ -0,0 +1,2 @@
+.list-unstyled
+  list-unstyled()

source/css/_partial/mobile.styl

@@ -0,0 +1 @@
+

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
+
+  

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
+
+
+

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

source/css/_partial/sidebar.styl

@@ -0,0 +1,2 @@
+@import "navbar"
+@import "totop"

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

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

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
+  }

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

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%