diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css
index 5665ec4..d1ac045 100644
--- a/themes/typing/source/css/typing.css
+++ b/themes/typing/source/css/typing.css
@@ -1,1009 +1,1211 @@
-/* (c) GeekPlux geekplux@gmail.com | https://github.com/geekplux/hexo-theme-typing | MIT license */
 @charset "utf-8";
-html{
-    -webkit-text-size-adjust:100%;
-    -ms-text-size-adjust:100%;
-    text-rendering:optimizelegibility
-}
-html.borderbox *,html.borderbox :after,html.borderbox :before{
-    box-sizing:border-box
-}
-article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{
-    margin:0;
-    padding:0
-}
-article,aside,details,figcaption,figure,footer,header,menu,nav,section{
-    display:block
-}
-audio,canvas,video{
-    display:inline-block
-}
-body,button,input,select,textarea{
-    font:300 1em/1.8 PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans
-}
-button::-moz-focus-inner,input::-moz-focus-inner{
-    padding:0;
-    border:0
-}
-table{
-    border-collapse:collapse;
-    border-spacing:0
-}
-fieldset,img{
-    border:0
-}
-blockquote{
-    position:relative;
-    color:#999;
-    font-weight:400;
-    border-left:1px solid #1abc9c;
-    padding-left:1em;
-    margin:1em 3em 1em 2em
-}
-@media only screen and (max-width:640px){
-    blockquote{
-        margin:1em 0
-    }
-}
-abbr,acronym{
-    border-bottom:1px dotted;
-    font-variant:normal
-}
-abbr{
-    cursor:help
-}
-del{
-    text-decoration:line-through
-}
-address,caption,cite,code,dfn,em,th,var{
-    font-style:normal;
-    font-weight:400
-}
-ol,ul{
-    list-style:none
-}
-caption,th{
-    text-align:left
-}
-q:after,q:before{
-    content:''
-}
-sub,sup{
-    font-size:75%;
-    line-height:0;
-    position:relative
-}
-:root sub,:root sup{
-    vertical-align:baseline
-}
-a{
-    color:#1abc9c
-}
-a:hover{
-    text-decoration:underline
-}
-.typo a{
-    border-bottom:1px solid #1abc9c
-}
-.typo a:hover{
-    border-bottom-color:#555;
-    color:#555
-}
-.typo a:hover,a,ins{
-    text-decoration:none
-}
-.typo-u,u{
-    text-decoration:underline
-}
-mark{
-    background:#fffdd1;
-    border-bottom:1px solid #ffedce;
-    padding:2px;
-    margin:0 5px
-}
-code,pre,pre tt{
-    font-family:monospace,monospace
-}
-pre{
-    background:#f8f8f8;
-    border:1px solid #ddd;
-    padding:1em 1.5em;
-    display:block;
-    -webkit-overflow-scrolling:touch
-}
-hr{
-    border:none;
-    border-bottom:1px solid #cfcfcf;
-    margin-bottom:1em;
-    height:10px
-}
-.typo-small,figcaption,small{
-    font-size:.9em;
-    color:#888
-}
-b,strong{
-    font-weight:700;
-    color:#000
-}
-[draggable]{
-    cursor:move
-}
-.clearfix:after,.clearfix:before{
-    content:"";
-    display:table
-}
-.clearfix:after{
-    clear:both
-}
-.clearfix{
-    zoom:1
-}
-.textwrap,.textwrap td,.textwrap th{
-    word-wrap:break-word;
-    word-break:break-all
-}
-.textwrap-table{
-    table-layout:fixed
-}
-.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,blockquote{
-    margin-bottom:1.2em
-}
-h1,h2,h3,h4,h5,h6{
-    font-family:sans-serif;
-    font-weight:100;
-    color:#000;
-    line-height:1.35
-}
-.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6,.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6{
-    margin-top:1.2em;
-    margin-bottom:.6em;
-    line-height:1.35
-}
-.typo-h1,.typo h1{
-    font-size:2em
-}
-.typo-h2,.typo h2{
-    font-size:1.8em
-}
-.typo-h3,.typo h3{
-    font-size:1.6em
-}
-.typo-h4,.typo h4{
-    font-size:1.4em
-}
-.typo-h5,.typo-h6,.typo h5,.typo h6{
-    font-size:1.2em
-}
-.typo-ul,.typo ul{
-    margin-left:1.3em;
-    list-style:disc
-}
-.typo-ol,.typo ol{
-    list-style:decimal;
-    margin-left:1.9em
-}
-.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul,.typo li ol,.typo li ul{
-    margin-bottom:.8em;
-    margin-left:2em
-}
-.typo-ol ul,.typo-ul ul,.typo li ul{
-    list-style:circle
-}
-.typo-table td,.typo-table th,.typo table caption,.typo table td,.typo table th{
-    border:1px solid #ddd;
-    padding:.5em 1em;
-    color:#666
-}
-.typo-table th,.typo table th{
-    background:#fbfbfb
-}
-.typo-table thead th,.typo table thead th{
-    background:#f1f1f1
-}
-.typo table caption{
-    border-bottom:none
-}
-.typo-input,.typo-textarea{
-    -webkit-appearance:none;
-    border-radius:0
-}
-.typo-em,.typo em,caption,legend{
-    color:#000;
-    font-weight:inherit
-}
-.typo-em{
-    position:relative
-}
-.typo-em:after{
-    position:absolute;
-    top:.65em;
-    left:0;
-    width:100%;
-    overflow:hidden;
-    white-space:nowrap;
-    content:"・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"
-}
-.typo img{
-    max-width:100%
-}
-html{
-    font-family:sans-serif;
-    line-height:1.15;
-    -ms-text-size-adjust:100%;
-    -webkit-text-size-adjust:100%
-}
-body{
-    margin:0
-}
-article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{
-    display:block
-}
-audio,canvas,progress,video{
-    display:inline-block
-}
-audio:not([controls]){
-    display:none;
-    height:0
-}
-progress{
-    vertical-align:baseline
-}
-[hidden],template{
-    display:none
-}
-a{
-    background-color:transparent;
-    -webkit-text-decoration-skip:objects
-}
-a:active,a:hover{
-    outline-width:0
-}
-abbr[title]{
-    border-bottom:none;
-    text-decoration:underline;
-    text-decoration:underline dotted
-}
-b,strong{
-    font-weight:inherit;
-    font-weight:bolder
-}
-dfn{
-    font-style:italic
-}
-h1{
-    font-size:1.5em;
-    margin:.5em 0
-}
-mark{
-    background-color:#ff0;
-    color:#000
-}
-small{
-    font-size:80%
-}
-sub,sup{
-    font-size:75%;
-    line-height:0;
-    position:relative;
-    vertical-align:baseline
-}
-sub{
-    bottom:-.25em
-}
-sup{
-    top:-.5em
-}
-img{
-    border-style:none
-}
-svg:not(:root){
-    overflow:hidden
-}
-code,kbd,pre,samp{
-    font-family:monospace,monospace;
-    font-size:0.9em;
-    background-color:#f3f5f6
-}
-figure{
-    margin:1em 40px
-}
-hr{
-    box-sizing:content-box;
-    height:0;
-    overflow:visible
-}
-button,input,optgroup,select,textarea{
-    font:inherit;
-    margin:0
-}
-optgroup{
-    font-weight:700
-}
-button,input{
-    overflow:visible
-}
-button,select{
-    text-transform:none
-}
-[type=reset],[type=submit],button,html [type=button]{
-    -webkit-appearance:button
-}
-[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
-    border-style:none;
-    padding:0
-}
-[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
-    outline:1px dotted ButtonText
-}
-fieldset{
-    border:1px solid silver;
-    margin:0 2px;
-    padding:.35em .625em .75em
-}
-legend{
-    box-sizing:border-box;
-    color:inherit;
-    display:table;
-    max-width:100%;
-    padding:0;
-    white-space:normal
-}
-textarea{
-    overflow:auto
-}
-[type=checkbox],[type=radio]{
-    box-sizing:border-box;
-    padding:0
-}
-[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
-    height:auto
-}
-[type=search]{
-    -webkit-appearance:textfield;
-    outline-offset:-2px
-}
-[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{
-    -webkit-appearance:none
-}
-::-webkit-input-placeholder{
-    color:inherit;
-    opacity:.54
-}
-::-webkit-file-upload-button{
-    -webkit-appearance:button;
-    font:inherit
-}
-.article .article-entry blockquote footer cite a:hover,.article .article-nav-link-wrap:hover,.dark a:hover,a:hover{
-    color:#22c5e5;
-    border-bottom:1px solid RGBA(34,197,229,.2);
-    -webkit-transition:color .1s linear;
-    transition:color .1s linear
-}
-.archive-container hr,.archive-footer hr,.article .article-footer hr,.article hr,.category-container hr,.home hr,.post-footer hr,.tag-container hr{
-    height:1px;
-    border:0;
-    background-image:-webkit-linear-gradient(0deg,transparent,#d5d5d5,transparent)
-}
-.main-nav-link{
-    margin-right:10px;
-    color:#777;
-    padding-bottom:5px;
-    display:inline-block;
-    border:0
-}
-body,html{
-    width:100%;
-    height:100%;
-    position:relative;
-    box-sizing:border-box;
-    color:#222
-}
-body,h1,h2,h3,h4,h5,h6{
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    -moz-font-feature-settings:"liga" on;
-    -webkit-transition:all .25s ease;
-    transition:all .25s ease
-}
-body{
-    font-family:serif;
-    font-size:1.2em
-}
-h1,h2,h3,h4,h5,h6{
-    font-family:serif
-}
-a{
-    color:#222;
-    -webkit-transition:color .25s linear;
-    transition:color .25s linear;
-    cursor:pointer
-}
-a,a:hover{
-    text-decoration:none
-}
-em{
-    font-style:italic;
-    font-weight:lighter
-}
-b,strong{
-    font-weight:700
-}
-blockquote{
-    color:#666;
-    border-left:2px solid #666;
-    padding-left:1em;
-    margin:1em 3em 1em -1em
-}
-.footer{
-    box-sizing:border-box
-}
-.home-footer{
-    padding:50px 0
-}
-.archive-footer,.post-footer{
-    width:100%;
-    margin:0 auto;
-    padding:1em 0;
-    color:#cacdd0
-}
-.archive-footer a,.archive-footer b,.archive-footer strong,.post-footer a,.post-footer b,.post-footer strong{
-    color:#aeb4b9
-}
-.container{
-    width:100%
-}
-.copyright,.footer-content,.footer-links{
-    text-align:center;
-    width:100%;
-    font-size:0.9em;
-    color:#cacdd0
-}
-.copyright li,.footer-content li,.footer-links li{
-    display:inline-block
-}
-.copyright a,.footer-content a,.footer-links a{
-    color:#777
-}
-.copyright a:hover,.footer-content a:hover,.footer-links a:hover{
-    color:#22c5e5
-}
-.archive-footer,.post-footer{
-    width:60%;
-    max-width:600px
-}
-.footer-content{
-    margin:0 auto;
-    text-align:left
-}
-.footer-links{
-    font-size:0.9em;
-    padding:0
-}
-.footer-links a{
-    text-decoration:none
-}
-.footer-links li{
-    margin:0 5px
-}
-.home-body{
-    display:-webkit-box;
-    display:-ms-flexbox;
-    display:flex;
-    -webkit-box-orient:vertical;
-    -webkit-box-direction:normal;
-    -ms-flex-direction:column;
-    flex-direction:column;
-    -webkit-box-pack:center;
-    -ms-flex-pack:center;
-    justify-content:center
-}
-.home{
-    font-weight:lighter;
-    line-height:1.4;
-    color:#505050;
-    text-align:center;
-    position:relative
-}
-.home a{
-    border-bottom:1px solid #eee
-}
-.home .content{
-    width:60%;
-    max-width:500px;
-    position:relative;
-    margin:0 auto
-}
-.home h1,.home strong{
-    color:#222
-}
-.home hr{
-    width:80%;
-    max-width:300px;
-    margin:20px auto
-}
-.home li{
-    list-style:none
-}
-.home .profile{
-    width:100%
-}
-.home .profile h1{
-    font-weight:300
-}
-.nav-left{
-    position:absolute;
-    left:-130px;
-    text-align:right
-}
-.nav-left .main-nav-link{
-    display:block;
-    padding-bottom:10px
-}
-.header-hr-left,.mobile-nav{
-    display:none
-}
-.archive-container,.category-container,.tag-container{
-    width:60%;
-    margin:0 auto;
-    position:relative;
-    line-height:1;
-    text-align:left;
-    font-size:1em;
-    padding-top:3em;
-    max-width:700px
-}
-.archive-container article,.category-container article,.tag-container article{
-    margin-bottom:15px
-}
-.archive-container a,.archive-container a:hover,.category-container a,.category-container a:hover,.tag-container a,.tag-container a:hover{
-    border:0
-}
-.archive-container .header,.category-container .header,.tag-container .header{
-    font-size:1em
-}
-.archive-container .archive-article-header>a,.archive-container .archive-article-header>h1,.category-container .archive-article-header>a,.category-container .archive-article-header>h1,.tag-container .archive-article-header>a,.tag-container .archive-article-header>h1{
-    vertical-align:middle
-}
-.archive-container .archive-article-header h1,.category-container .archive-article-header h1,.tag-container .archive-article-header h1{
-    width:calc(100% - 120px);
-    font-size:1em;
-    margin:0
-}
-.archive-container hr,.category-container hr,.tag-container hr{
-    width:60%;
-    margin:20px 0 40px;
-    background-image:-webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent)
-}
-.archive-container .archive-article-date,.category-container .archive-article-date,.tag-container .archive-article-date{
-    font-size:1em;
-    color:#cacdd0
-}
-.archive-article-date{
-    margin-right:0.5em
-}
-.archive-container .archive-article-title,.category-container .archive-article-title,.tag-container .archive-article-title{
-    font-weight:200
-}
-.archive-container .archive-year-wrap,.category-container .archive-year-wrap,.tag-container .archive-year-wrap{
-    margin-bottom:20px
-}
-.archive-container .page-nav,.category-container .page-nav,.tag-container .page-nav{
-    text-align:center;
-    margin-top:30px;
-    color:#aeb4b9
-}
-.archive-container .page-nav a,.category-container .page-nav a,.tag-container .page-nav a{
-    color:#777
-}
-.archive-container .extend,.archive-container .page-number,.category-container .extend,.category-container .page-number,.tag-container .extend,.tag-container .page-number{
-    margin-right:15px
-}
-.article{
-    width:80%;
-    max-width:1000px;
-    margin:0 auto
-}
-.article .header{
-    font-size:1.1em;
-    margin:0.5em 0
-}
-.article .main-nav-link:hover{
-    border:0
-}
-.article .nav-left{
-    position:relative;
-    left:auto;
-    text-align:initial
-}
-.article .nav-left .main-nav-link{
-    display:inline-block;
-    padding-bottom:5px
-}
-.article .header-hr-left{
-    display:block
-}
-.article hr{
-    width:80%;
-    background-image:-webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent)
-}
-.article h1,.article h2,.article h3,.article h4,.article h5,.article h6{
-    font-weight:bolder
-}
-.article .article-title{
-    font-size:2em
-}
-.article a.fancybox,.article a.fancybox-item{
-    border:0
-}
-.article .caption{
-    color:#aeb4b9;
-    display:block;
-    font-size:14px;
-    text-align:center
-}
-.article .article-entry{
-    word-break:break-word
-}
-.article .article-entry img{
-    display:block;
-    margin:auto
-}
-.article .article-entry blockquote footer{
-    text-align:center;
-    font-size:80%;
-    color:#aeb4b9
-}
-.article .article-entry blockquote footer cite{
-    font-style:italic
-}
-.article .article-entry blockquote footer cite a{
-    color:#aeb4b9;
-    border-bottom:1px solid #eee;
-    -webkit-transition:color .25s linear;
-    transition:color .25s linear
-}
-.article .article-entry blockquote footer cite:before{
-    content:"—";
-    padding:0 .5em
-}
-.article .article-entry blockquote footer strong{
-    color:#777;
-    font-weight:400
-}
-.article .article-entry table caption,.article .article-entry table td,.article .article-entry table th,.article .article-entry td,.article .article-entry th{
-    word-break:normal
-}
-.article .article-entry .pullquote{
-    width:45%;
-    border:0
-}
-.article .article-entry .pullquote.left{
-    float:left;
-    text-align:left
-}
-.article .article-entry .pullquote.right{
-    float:right;
-    text-align:right
-}
-.article .article-entry .video-container{
-    position:relative;
-    padding-top:56.25%;
-    margin-bottom:30px;
-    height:0;
-    overflow:hidden
-}
-.article .article-entry .video-container iframe{
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-    margin-top:0
-}
-.article .article-nav{
-    max-width:100%;
-}
-.article .article-nav-link-wrap{
-    display:inline-block;
-    color:#aeb4b9;
-    padding:0 10px;
-    width:49%;
-    box-sizing:border-box;
-    vertical-align:top;
-    border:0
-}
-.article .article-nav-link-wrap strong{
-    color:#777
-}
-.article .article-nav-link-wrap:hover{
-    border-bottom:0
-}
-.article .article-nav-link-wrap.newer{
-    text-align:right
-}
-.article .article-nav-link-wrap.older{
-    text-align:left
-}
-.article .article-footer,.article .article-footer hr{
-    margin-top:1em
-}
-.article .article-meta{
-    font-size:0.9em;
-    color:#aeb4b9
-}
-.article .article-meta a{
-    color:#777
-}
-.article .article-meta .label{
-    margin-right:10px
-}
-.article .article-meta .article-category,.article .article-meta .article-tag-list{
-    display:inline-block
-}
-.article .article-meta .article-tag-list-item{
-    display:inline-block;
-    margin-right:5px
-}
-.article .article-meta .article-tag-list-item:before{
-    content:'#'
-}
-.article .article-gallery img{
-    width:100%
-}
-.article-type-page .article-footer{
-    display:none
-}
-.comments{
-    width:60%;
-    max-width:700px;
-    margin:50px auto 0
-}
-.dark{
-    color:#d8d8d8
-}
-.dark,.dark .container,.dark .footer{
-    background-color:#3f3f3f
-}
-.dark a{
-    color:#ddd
-}
-.dark a:hover{
-    color:#fff
-}
-.dark .home{
-    color:#d8d8d8
-}
-.dark .home h1,.dark .home strong{
-    color:#ddd
-}
-.dark .home a{
-    border-bottom:1px solid #ddd
-}
-.dark .home a:hover{
-    border-bottom:1px solid #fff
-}
-.dark code,kbd,pre,samp{
-    font-family:monospace,monospace;
-    font-size:0.9em;
-    background-color:#333
-}
-.dark .archive-container .header .main-nav-link,.dark .article .header .main-nav-link,.dark .category-container .header .main-nav-link,.dark .tag-container .header .main-nav-link{
-    color:#aaa
-}
-.dark .archive-container .header .main-nav-link:hover,.dark .article .header .main-nav-link:hover,.dark .category-container .header .main-nav-link:hover,.dark .tag-container .header .main-nav-link:hover{
-    color:#fff
-}
-.dark .archive-container .article-nav,.dark .archive-container .page-nav,.dark .article .article-nav,.dark .article .page-nav,.dark .category-container .article-nav,.dark .category-container .page-nav,.dark .tag-container .article-nav,.dark .tag-container .page-nav{
-    color:#aaa
-}
-.dark .archive-container .article-nav a,.dark .archive-container .page-nav a,.dark .article .article-nav a,.dark .article .page-nav a,.dark .category-container .article-nav a,.dark .category-container .page-nav a,.dark .tag-container .article-nav a,.dark .tag-container .page-nav a{
-    color:#bbb
-}
-.dark .archive-container .article-nav a:hover,.dark .archive-container .page-nav a:hover,.dark .article .article-nav a:hover,.dark .article .page-nav a:hover,.dark .category-container .article-nav a:hover,.dark .category-container .page-nav a:hover,.dark .tag-container .article-nav a:hover,.dark .tag-container .page-nav a:hover{
-    color:#fff
-}
-.dark .archive-container .article-entry blockquote footer strong,.dark .archive-container .article-meta a,.dark .article .article-entry blockquote footer strong,.dark .article .article-meta a,.dark .category-container .article-entry blockquote footer strong,.dark .category-container .article-meta a,.dark .tag-container .article-entry blockquote footer strong,.dark .tag-container .article-meta a{
-    color:#bbb
-}
-.dark blockquote{
-    color:#aaa
-}
-.dark b,.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,.dark strong{
-    color:#ddd
-}
-.dark .typo-em,.dark .typo em,.dark caption,.dark legend{
-    color:#bbb
-}
-.dark .typo-table td,.dark .typo table caption,.dark .typo table td{
-    border:1px solid #ddd;
-    color:#aaa
-}
-.dark .article-entry .highlight,.dark .article-entry pre{
-    color:#d8d8d8;
-    background-color:#333
-}
-.dark .article-entry .highlight table caption,.dark .article-entry .highlight table td,.dark .article-entry .highlight td{
-    border:0
-}
-.dark .article-entry .highlight .line.marked{
-    background:#444
-}
-.article-entry .highlight,.article-entry pre{
-    padding:1em;
-    background:#f3f5f6;
-    color:#4d4d4c;
-    font-size:0.9em;
-    overflow:auto;
-    line-height:1.8
-}
-.article-entry .highlight .gutter pre{
-    color:#aeb4b9;
-    font-size:0.9em
-}
-.article-entry figure.highlight{
-    margin:0
-}
-.article-entry pre code{
-    background:none;
-    text-shadow:none;
-    padding:0
-}
-.article-entry .highlight pre{
-    border:0;
-    margin:0;
-    padding:0
-}
-.article-entry .highlight table{
-    margin:0;
-    width:100%
-}
-.article-entry .highlight td{
-    border:0;
-    padding:0
-}
-.article-entry .highlight figcaption{
-    color:#8e908c
-}
-.article-entry .highlight figcaption a{
-    float:right
-}
-.article-entry .highlight .line{
-    height:25px
-}
-.article-entry .highlight .line.marked{
-    background:#e6e6e6
-}
-pre .comment,pre .title{
-    color:#8e908c
-}
-pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title{
-    color:#c82829
-}
-pre .built_in,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor{
-    color:#f5871f
-}
-pre .class,pre .css .rules .attribute,pre .header,pre .inheritance,pre .ruby .class .title,pre .ruby .symbol,pre .string,pre .value,pre .xml .cdata{
-    color:#718c00
-}
-pre .css .hexcolor{
-    color:#3e999f
-}
-pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword{
-    color:#4271ae
-}
-pre .javascript .function,pre .keyword{
-    color:#8959a8
-}
-@media (max-width:768px){
-    body{
-        font-size:1.2em
-    }
-    .archive-container,.archive-footer,.article,.home .content,.post-footer{
-        width:80%
-    }
-    .archive-container,.category-container,.tag-container{
-        padding-top:1em;
-    }
-    .article-title{
-        font-size:1.8rem
-    }
-    .comments{
-        width:80%
-    }
-    .nav-left{
-        position:relative;
-        left:auto;
-        text-align:initial
-    }
-    .nav-left .main-nav-link{
-        display:inline-block;
-        padding-bottom:5px
-    }
-    .header-hr-left{
-        display:block
-    }
-}
-@media (max-width:468px){
-    body{
-        font-size:1em
-    }
-    .home{
-        color:#222
-    }
-    .home a{
-        color:$111
-    }
-    .archive-container .archive-footer,.archive-container .post-footer{
-        padding:1em
-    }
-    .archive-container .archive-article-header>a,.archive-container .archive-article-header>h1{
-        width:100%
-    }
-    .mobile-nav{
-        display:-webkit-box;
-        display:-ms-flexbox;
-        display:flex;
-        -webkit-box-align:center;
-        -ms-flex-align:center;
-        align-items:center;
-        -webkit-box-pack:justify;
-        -ms-flex-pack:justify;
-        justify-content:space-between
-    }
-    .main-nav{
-        display:none;
-        position:absolute;
-        background-color:#fff;
-        width:50%;
-        padding:20px;
-        border:2px solid #777;
-        box-shadow:5px 5px 5px #777
-    }
-    .main-nav .main-nav-link{
-        display:block;
-        padding-bottom:10px
-    }
-    .article .nav-left{
-        position:absolute
-    }
-    .article .nav-left .main-nav-link{
-        display:block;
-        padding-bottom:10px
-    }
-}
-@media (max-width:320px){
-    body{
-        font-size:0.9em
-    }
-    .article{
-        font-size:1em
-    }
-    .archive-container .archive-footer,.archive-container .post-footer{
-        padding:1em
-    }
-    .footer,.footer-content{
-        font-size:0.9em
-    }
-}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+button,input,optgroup,select,textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+}
+
+[type=button],[type=reset],[type=submit],button {
+  -webkit-appearance: button;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+html.borderbox *,html.borderbox :after,html.borderbox :before {
+  box-sizing: border-box;
+}
+
+article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul {
+  margin: 0;
+  padding: 0;
+}
+
+body,button,input,select,textarea {
+  font: 300 1em/1.8 sans-serif;
+}
+
+button::-moz-focus-inner,input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,img {
+  border: 0;
+}
+
+blockquote {
+  position: relative;
+  font-weight: 400;
+}
+
+@media only screen and (max-width:640px) {
+  blockquote {
+    margin: 1em 0;
+  }
+}
+
+abbr,acronym {
+  border-bottom: 1px dotted;
+  -webkit-font-feature-settings: normal;
+  font-feature-settings: normal;
+  font-variant: normal;
+}
+
+abbr {
+  cursor: help;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+address,caption,cite,code,dfn,em,th,var {
+  font-style: normal;
+  font-weight: 400;
+}
+
+ol,ul {
+  list-style: none;
+}
+
+caption,th {
+  text-align: left;
+}
+
+q:after,q:before {
+  content: '';
+}
+
+:root sub,:root sup {
+  vertical-align: baseline;
+}
+
+.typo a {
+  border-bottom: 1px solid #1abc9c;
+}
+
+.typo a:hover {
+  border-bottom-color: #555;
+  color: #555;
+}
+
+.typo a:hover,a,ins {
+  text-decoration: none;
+}
+
+.typo-u,u {
+  text-decoration: underline;
+}
+
+mark {
+  background: #fffdd1;
+  border-bottom: 1px solid #ffedce;
+  padding: 2px;
+  margin: 0 5px;
+}
+
+code,pre,pre tt {
+  font-family: monospace,monospace;
+}
+
+pre {
+  background: #f8f8f8;
+  border: 1px solid #ddd;
+  padding: 1em 1.5em;
+  display: block;
+  -webkit-overflow-scrolling: touch;
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid #cfcfcf;
+  margin-bottom: 1em;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+.typo-small,figcaption,small {
+  font-size: .9em;
+  color: #888;
+}
+
+[draggable] {
+  cursor: move;
+}
+
+.clearfix:after,.clearfix:before {
+  content: "";
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.textwrap,.textwrap td,.textwrap th {
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.textwrap-table {
+  table-layout: fixed;
+}
+
+.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,blockquote {
+  margin-bottom: 1.2em;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-weight: 100;
+  color: #000;
+  line-height: 1.35;
+}
+
+.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6,.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6 {
+  margin-top: 1.2em;
+  margin-bottom: .6em;
+  line-height: 1.35;
+}
+
+.typo h1,.typo-h1 {
+  font-size: 2em;
+}
+
+.typo h2,.typo-h2 {
+  font-size: 1.8em;
+}
+
+.typo h3,.typo-h3 {
+  font-size: 1.6em;
+}
+
+.typo h4,.typo-h4 {
+  font-size: 1.4em;
+}
+
+.typo h5,.typo h6,.typo-h5,.typo-h6 {
+  font-size: 1.2em;
+}
+
+.typo ul,.typo-ul {
+  margin-left: 1.3em;
+  list-style: disc;
+}
+
+.typo ol,.typo-ol {
+  list-style: decimal;
+  margin-left: 1.9em;
+}
+
+.typo li ol,.typo li ul,.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul {
+  margin-bottom: .8em;
+  margin-left: 2em;
+}
+
+.typo li ul,.typo-ol ul,.typo-ul ul {
+  list-style: circle;
+}
+
+.typo table caption,.typo table td,.typo table th,.typo-table td,.typo-table th {
+  border: 1px solid #ddd;
+  padding: .5em 1em;
+  color: #666;
+}
+
+.typo table th,.typo-table th {
+  background: #fbfbfb;
+}
+
+.typo table thead th,.typo-table thead th {
+  background: #f1f1f1;
+}
+
+.typo table caption {
+  border-bottom: none;
+}
+
+.typo-input,.typo-textarea {
+  -webkit-appearance: none;
+  border-radius: 0;
+}
+
+.typo em,.typo-em,caption,legend {
+  color: #000;
+  font-weight: inherit;
+}
+
+.typo-em {
+  position: relative;
+}
+
+.typo-em:after {
+  position: absolute;
+  top: .65em;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
+}
+
+.typo img {
+  max-width: 100%;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-rendering: optimizelegibility;
+  font-family: sans-serif;
+  line-height: 1.15;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
+  display: block;
+}
+
+audio,canvas,progress,video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden],template {
+  display: none;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  color: #222;
+  transition: color .25s linear;
+  cursor: pointer;
+}
+
+a:active,a:hover {
+  outline-width: 0;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+dfn {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 1.5em;
+  margin: .5em 0;
+}
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+img {
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+code,kbd,pre,samp {
+  font-family: monospace,monospace;
+  font-size: .9em;
+  background-color: #f3f5f6;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+button,input,optgroup,select,textarea {
+  font: inherit;
+  margin: 0;
+}
+
+optgroup {
+  font-weight: 700;
+}
+
+button,input {
+  overflow: visible;
+}
+
+button,select {
+  text-transform: none;
+}
+
+[type=reset],[type=submit],button,html [type=button] {
+  -webkit-appearance: button;
+}
+
+[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
+  outline: ButtonText dotted 1px;
+}
+
+fieldset {
+  border: 1px solid silver;
+  margin: 0 2px;
+  padding: .35em .625em .75em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox],[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+.article .article-entry blockquote footer cite a:hover,.article .article-nav-link-wrap:hover,.dark a:hover,a:hover {
+  color: #22c5e5;
+  border-bottom: 1px solid;
+  transition: color .1s linear;
+}
+
+.archive-container hr,.archive-footer hr,.article .article-footer hr,.article hr,.category-container hr,.home hr,.post-footer hr,.tag-container hr {
+  height: 1px;
+  border: 0;
+  background-image: -webkit-linear-gradient(0deg,transparent,#d5d5d5,transparent);
+}
+
+.main-nav-link {
+  margin-right: 10px;
+  color: #777;
+  padding-bottom: 5px;
+  display: inline-block;
+  border: 0;
+}
+
+body,html {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  color: #222;
+}
+
+body,h1,h2,h3,h4,h5,h6 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+  transition: .25s;
+}
+
+body {
+  margin: 0;
+  font-family: serif;
+  font-size: 1.2em;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-family: serif;
+}
+
+a,a:hover {
+  text-decoration: none;
+}
+
+em {
+  font-style: italic;
+  font-weight: lighter;
+}
+
+b,strong {
+  color: #000;
+  font-weight: 700;
+}
+
+blockquote {
+  color: #666;
+  border-left: 2px solid #666;
+  padding-left: 1em;
+  margin: 1em 3em 1em -1em;
+}
+
+.footer {
+  box-sizing: border-box;
+}
+
+.home-footer {
+  padding: 50px 0;
+}
+
+.archive-footer a,.archive-footer b,.archive-footer strong,.post-footer a,.post-footer b,.post-footer strong {
+  color: #aeb4b9;
+}
+
+.container {
+  width: 100%;
+}
+
+.copyright,.footer-content,.footer-links {
+  text-align: center;
+  width: 100%;
+  font-size: .9em;
+  color: #cacdd0;
+}
+
+.copyright li,.footer-content li,.footer-links li {
+  display: inline-block;
+}
+
+.copyright a,.footer-content a,.footer-links a {
+  color: #777;
+}
+
+.copyright a:hover,.footer-content a:hover,.footer-links a:hover {
+  color: #22c5e5;
+}
+
+.archive-footer,.post-footer {
+  margin: 0 auto;
+  padding: 1em 0;
+  color: #cacdd0;
+  width: 60%;
+  max-width: 600px;
+}
+
+.footer-content {
+  margin: 0 auto;
+  text-align: left;
+}
+
+.footer-links {
+  font-size: .9em;
+  padding: 0;
+}
+
+.footer-links a {
+  text-decoration: none;
+}
+
+.footer-links li {
+  margin: 0 5px;
+}
+
+.home-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.home {
+  font-weight: lighter;
+  line-height: 1.4;
+  color: #505050;
+  text-align: center;
+  position: relative;
+}
+
+.home a {
+  border-bottom: 1px solid #eee;
+}
+
+.home .content {
+  width: 60%;
+  max-width: 500px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.home h1,.home strong {
+  color: #222;
+}
+
+.home hr {
+  width: 80%;
+  max-width: 300px;
+  margin: 20px auto;
+}
+
+.home li {
+  list-style: none;
+}
+
+.home .profile {
+  width: 100%;
+}
+
+.home .profile h1 {
+  font-weight: 300;
+}
+
+.nav-left {
+  position: absolute;
+  left: -130px;
+  text-align: right;
+}
+
+.nav-left .main-nav-link {
+  display: block;
+  padding-bottom: 10px;
+}
+
+.header-hr-left,.mobile-nav {
+  display: none;
+}
+
+.archive-container,.category-container,.tag-container {
+  width: 60%;
+  margin: 0 auto;
+  position: relative;
+  line-height: 1;
+  text-align: left;
+  font-size: 1em;
+  padding-top: 3em;
+  max-width: 700px;
+}
+
+.archive-container article,.category-container article,.tag-container article {
+  margin-bottom: 15px;
+}
+
+.archive-container a,.archive-container a:hover,.category-container a,.category-container a:hover,.tag-container a,.tag-container a:hover {
+  border: 0;
+}
+
+.archive-container .header,.category-container .header,.tag-container .header {
+  font-size: 1em;
+}
+
+.archive-container .archive-article-header>a,.archive-container .archive-article-header>h1,.category-container .archive-article-header>a,.category-container .archive-article-header>h1,.tag-container .archive-article-header>a,.tag-container .archive-article-header>h1 {
+  vertical-align: middle;
+}
+
+.archive-container .archive-article-header h1,.category-container .archive-article-header h1,.tag-container .archive-article-header h1 {
+  width: calc(100% - 120px);
+  font-size: 1em;
+  margin: 0;
+}
+
+.archive-container hr,.category-container hr,.tag-container hr {
+  width: 60%;
+  margin: 20px 0 40px;
+  background-image: -webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent);
+}
+
+.archive-container .archive-article-date,.category-container .archive-article-date,.tag-container .archive-article-date {
+  font-size: 1em;
+  color: #cacdd0;
+}
+
+.archive-article-date {
+  margin-right: .5em;
+}
+
+.archive-container .archive-article-title,.category-container .archive-article-title,.tag-container .archive-article-title {
+  font-weight: 200;
+}
+
+.archive-container .archive-year-wrap,.category-container .archive-year-wrap,.tag-container .archive-year-wrap {
+  margin-bottom: 20px;
+}
+
+.archive-container .page-nav,.category-container .page-nav,.tag-container .page-nav {
+  text-align: center;
+  margin-top: 30px;
+  color: #aeb4b9;
+}
+
+.archive-container .page-nav a,.category-container .page-nav a,.tag-container .page-nav a {
+  color: #777;
+}
+
+.archive-container .extend,.archive-container .page-number,.category-container .extend,.category-container .page-number,.tag-container .extend,.tag-container .page-number {
+  margin-right: 15px;
+}
+
+.article {
+  width: 80%;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.article .header {
+  font-size: 1.1em;
+  margin: .5em 0;
+}
+
+.article .main-nav-link:hover {
+  border: 0;
+}
+
+.article .nav-left {
+  position: relative;
+  left: auto;
+  text-align: initial;
+}
+
+.article .nav-left .main-nav-link {
+  display: inline-block;
+  padding-bottom: 5px;
+}
+
+.article .header-hr-left {
+  display: block;
+}
+
+.article hr {
+  width: 80%;
+  background-image: -webkit-linear-gradient(0deg,#d5d5d5,#d5d5d5,transparent);
+}
+
+.article h1,.article h2,.article h3,.article h4,.article h5,.article h6 {
+  font-weight: bolder;
+}
+
+.article .article-title {
+  font-size: 2em;
+}
+
+.article a.fancybox,.article a.fancybox-item {
+  border: 0;
+}
+
+.article .caption {
+  color: #aeb4b9;
+  display: block;
+  font-size: 14px;
+  text-align: center;
+}
+
+.article .article-entry {
+  word-break: break-word;
+}
+
+.article .article-entry img {
+  display: block;
+  margin: auto;
+}
+
+.article .article-entry blockquote footer {
+  text-align: center;
+  font-size: 80%;
+  color: #aeb4b9;
+}
+
+.article .article-entry blockquote footer cite {
+  font-style: italic;
+}
+
+.article .article-entry blockquote footer cite a {
+  color: #aeb4b9;
+  border-bottom: 1px solid #eee;
+  transition: color .25s linear;
+}
+
+.article .article-entry blockquote footer cite:before {
+  content: "—";
+  padding: 0 .5em;
+}
+
+.article .article-entry blockquote footer strong {
+  color: #777;
+  font-weight: 400;
+}
+
+.article .article-entry table caption,.article .article-entry table td,.article .article-entry table th,.article .article-entry td,.article .article-entry th {
+  word-break: normal;
+}
+
+.article .article-entry .pullquote {
+  width: 45%;
+  border: 0;
+}
+
+.article .article-entry .pullquote.left {
+  float: left;
+  text-align: left;
+}
+
+.article .article-entry .pullquote.right {
+  float: right;
+  text-align: right;
+}
+
+.article .article-entry .video-container {
+  position: relative;
+  padding-top: 56.25%;
+  margin-bottom: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.article .article-entry .video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-top: 0;
+}
+
+.article .article-nav {
+  max-width: 100%;
+}
+
+.article .article-nav-link-wrap {
+  display: inline-block;
+  color: #aeb4b9;
+  padding: 0 10px;
+  width: 49%;
+  box-sizing: border-box;
+  vertical-align: top;
+  border: 0;
+}
+
+.article .article-nav-link-wrap strong {
+  color: #777;
+}
+
+.article .article-nav-link-wrap:hover {
+  border-bottom: 0;
+}
+
+.article .article-nav-link-wrap.newer {
+  text-align: right;
+}
+
+.article .article-nav-link-wrap.older {
+  text-align: left;
+}
+
+.article .article-footer,.article .article-footer hr {
+  margin-top: 1em;
+}
+
+.article .article-meta {
+  font-size: .9em;
+  color: #aeb4b9;
+}
+
+.article .article-meta a {
+  color: #777;
+}
+
+.article .article-meta .label {
+  margin-right: 10px;
+}
+
+.article .article-meta .article-category,.article .article-meta .article-tag-list {
+  display: inline-block;
+}
+
+.article .article-meta .article-tag-list-item {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.article .article-meta .article-tag-list-item:before {
+  content: '#';
+}
+
+.article .article-gallery img {
+  width: 100%;
+}
+
+.article-type-page .article-footer {
+  display: none;
+}
+
+.comments {
+  width: 60%;
+  max-width: 700px;
+  margin: 50px auto 0;
+}
+
+.dark {
+  color: #d8d8d8;
+}
+
+.dark,.dark .container,.dark .footer {
+  background-color: #3f3f3f;
+}
+
+.dark a {
+  color: #ddd;
+}
+
+.dark a:hover {
+  color: #fff;
+}
+
+.dark .home {
+  color: #d8d8d8;
+}
+
+.dark .home h1,.dark .home strong {
+  color: #ddd;
+}
+
+.dark .home a {
+  border-bottom: 1px solid #ddd;
+}
+
+.dark .home a:hover {
+  border-bottom: 1px solid #fff;
+}
+
+.dark code,kbd,pre,samp {
+  font-family: monospace,monospace;
+  font-size: .9em;
+  background-color: #333;
+}
+
+.dark .archive-container .header .main-nav-link,.dark .article .header .main-nav-link,.dark .category-container .header .main-nav-link,.dark .tag-container .header .main-nav-link {
+  color: #aaa;
+}
+
+.dark .archive-container .header .main-nav-link:hover,.dark .article .header .main-nav-link:hover,.dark .category-container .header .main-nav-link:hover,.dark .tag-container .header .main-nav-link:hover {
+  color: #fff;
+}
+
+.dark .archive-container .article-nav,.dark .archive-container .page-nav,.dark .article .article-nav,.dark .article .page-nav,.dark .category-container .article-nav,.dark .category-container .page-nav,.dark .tag-container .article-nav,.dark .tag-container .page-nav {
+  color: #aaa;
+}
+
+.dark .archive-container .article-nav a,.dark .archive-container .page-nav a,.dark .article .article-nav a,.dark .article .page-nav a,.dark .category-container .article-nav a,.dark .category-container .page-nav a,.dark .tag-container .article-nav a,.dark .tag-container .page-nav a {
+  color: #bbb;
+}
+
+.dark .archive-container .article-nav a:hover,.dark .archive-container .page-nav a:hover,.dark .article .article-nav a:hover,.dark .article .page-nav a:hover,.dark .category-container .article-nav a:hover,.dark .category-container .page-nav a:hover,.dark .tag-container .article-nav a:hover,.dark .tag-container .page-nav a:hover {
+  color: #fff;
+}
+
+.dark .archive-container .article-entry blockquote footer strong,.dark .archive-container .article-meta a,.dark .article .article-entry blockquote footer strong,.dark .article .article-meta a,.dark .category-container .article-entry blockquote footer strong,.dark .category-container .article-meta a,.dark .tag-container .article-entry blockquote footer strong,.dark .tag-container .article-meta a {
+  color: #bbb;
+}
+
+.dark blockquote {
+  color: #aaa;
+}
+
+.dark b,.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,.dark strong {
+  color: #ddd;
+}
+
+.dark .typo em,.dark .typo-em,.dark caption,.dark legend {
+  color: #bbb;
+}
+
+.dark .typo table caption,.dark .typo table td,.dark .typo-table td {
+  border: 1px solid #ddd;
+  color: #aaa;
+}
+
+.dark .article-entry .highlight,.dark .article-entry pre {
+  color: #d8d8d8;
+  background-color: #333;
+}
+
+.dark .article-entry .highlight table caption,.dark .article-entry .highlight table td,.dark .article-entry .highlight td {
+  border: 0;
+}
+
+.dark .article-entry .highlight .line.marked {
+  background: #444;
+}
+
+.article-entry .highlight,.article-entry pre {
+  padding: 1em;
+  background: #f3f5f6;
+  color: #4d4d4c;
+  font-size: .9em;
+  overflow: auto;
+  line-height: 1.8;
+}
+
+.article-entry .highlight .gutter pre {
+  color: #aeb4b9;
+  font-size: .9em;
+}
+
+.article-entry figure.highlight {
+  margin: 0;
+}
+
+.article-entry pre code {
+  background: 0 0;
+  text-shadow: none;
+  padding: 0;
+}
+
+.article-entry .highlight pre {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.article-entry .highlight table {
+  margin: 0;
+  width: 100%;
+}
+
+.article-entry .highlight td {
+  border: 0;
+  padding: 0;
+}
+
+.article-entry .highlight figcaption {
+  color: #8e908c;
+}
+
+.article-entry .highlight figcaption a {
+  float: right;
+}
+
+.article-entry .highlight .line {
+  height: 25px;
+}
+
+.article-entry .highlight .line.marked {
+  background: #e6e6e6;
+}
+
+pre .comment,pre .title {
+  color: #8e908c;
+}
+
+pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title {
+  color: #c82829;
+}
+
+pre .built_in,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor {
+  color: #f5871f;
+}
+
+pre .class,pre .css .rules .attribute,pre .header,pre .inheritance,pre .ruby .class .title,pre .ruby .symbol,pre .string,pre .value,pre .xml .cdata {
+  color: #718c00;
+}
+
+pre .css .hexcolor {
+  color: #3e999f;
+}
+
+pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword {
+  color: #4271ae;
+}
+
+pre .javascript .function,pre .keyword {
+  color: #8959a8;
+}
+
+@media (max-width:768px) {
+  body {
+    font-size: 1.2em;
+  }
+
+  .archive-container,.archive-footer,.article,.home .content,.post-footer {
+    width: 80%;
+  }
+
+  .archive-container,.category-container,.tag-container {
+    padding-top: 1em;
+  }
+
+  .article-title {
+    font-size: 1.8rem;
+  }
+
+  .comments {
+    width: 80%;
+  }
+
+  .nav-left {
+    position: relative;
+    left: auto;
+    text-align: initial;
+  }
+
+  .nav-left .main-nav-link {
+    display: inline-block;
+    padding-bottom: 5px;
+  }
+
+  .header-hr-left {
+    display: block;
+  }
+}
+
+@media (max-width:468px) {
+  body {
+    font-size: 1em;
+  }
+
+  .home {
+    color: #222;
+  }
+
+  .home a {
+    color: #111;
+  }
+
+  .archive-container .archive-footer,.archive-container .post-footer {
+    padding: 1em;
+  }
+
+  .archive-container .archive-article-header>a,.archive-container .archive-article-header>h1 {
+    width: 100%;
+  }
+
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .main-nav {
+    display: none;
+    position: absolute;
+    background-color: #fff;
+    width: 50%;
+    padding: 20px;
+    border: 2px solid #777;
+    box-shadow: 5px 5px 5px #777;
+  }
+
+  .main-nav .main-nav-link {
+    display: block;
+    padding-bottom: 10px;
+  }
+
+  .article .nav-left {
+    position: absolute;
+  }
+
+  .article .nav-left .main-nav-link {
+    display: block;
+    padding-bottom: 10px;
+  }
+}
+
+@media (max-width:320px) {
+  body {
+    font-size: .9em;
+  }
+
+  .article {
+    font-size: 1em;
+  }
+
+  .archive-container .archive-footer,.archive-container .post-footer {
+    padding: 1em;
+  }
+
+  .footer,.footer-content {
+    font-size: .9em;
+  }
+}
+
 .copy-button {
-    cursor: pointer;
-    border: 1px solid #d5d5d5;
-    border-radius: 3px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-appearance: none;
-    font-size: 0.8em;
-    font-weight: 700;
-    line-height: 1em;
-    font-family:monospace,monospace;
-    -webkit-transition: opacity .3s ease-in-out;
-    -o-transition: opacity .3s ease-in-out;
-    transition: opacity .3s ease-in-out;
-    padding: 2px;
-    opacity: 0;
+  cursor: pointer;
+  border: 1px solid #d5d5d5;
+  border-radius: 3px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  font-size: .8em;
+  font-weight: 700;
+  line-height: 1em;
+  font-family: monospace,monospace;
+  transition: opacity .3s ease-in-out;
+  padding: 2px;
+  opacity: 0;
 }
-.highlight:hover .copy-button{
+
+.highlight:hover .copy-button {
   opacity: 1;
-}
+}
\ No newline at end of file