blog/themes/typing/source/css/typing.css

/* (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:Courier,Courier New,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
}
.serif{
    font-family:Palatino,Optima,Georgia,serif
}
.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:PingFang SC,Verdana,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,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:#333
}
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:Baskerville,Times New Roman,Liberation Serif,STFangsong,FangSong,FangSong_GB2312,CWTEX\\-F,serif;
    font-size:1.2em
}
h1,h2,h3,h4,h5,h6{
    font-family:Baskerville,Georgia,Liberation Serif,Kaiti SC,STKaiti,AR PL UKai CN,AR PL UKai HK,AR PL UKai TW,AR PL UKai TW MBE,AR PL KaitiM GB,KaiTi,KaiTi_GB2312,DFKai-SB,TW\\-Kai,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{
    display:inline-block;
    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 .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
    }
}
.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:Courier,Courier New,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;
}
.highlight:hover .copy-button{
  opacity: 1;
}