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

1010 lines
23 KiB
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: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
}
}
.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;
}
.highlight:hover .copy-button{
opacity: 1;
}