body { width: 100%; } body:before, body:after { content: ""; display: table; } body:after { clear: both; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 100%; vertical-align: baseline; } body { line-height: 1; color: #000; background: #fff; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } a img { border: none; } input, button { margin: 0; padding: 0; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } @font-face { font-family: iconfont; font-style: normal; font-weight: normal; src: url("fonts/iconfont.eot?v=#4.0.3"); src: url("fonts/iconfont.eot?#iefix&v=#4.0.3") format("embedded-opentype"), url("fonts/iconfont.woff?v=#4.0.3") format("woff"), url("fonts/iconfont.ttf?v=#4.0.3") format("truetype"), url("fonts/iconfont.svg#fontawesomeregular?v=#4.0.3") format("svg"); } html, body, #container { height: 100%; } body { background: #fff; font: 14px "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; -webkit-text-size-adjust: 100%; } .left, .alignleft { float: left; } .right, .alignright { float: right; } .clear { clear: both; } #container { position: relative; } .mobile-nav-on { overflow: hidden; } #wrap { height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -ms-transition: 0.2s ease-out; transition: 0.2s ease-out; z-index: 1; background: #fff; } .mobile-nav-on #wrap { left: 280px; } .outer { max-width: 920px; margin: 0 auto; padding: 0 20px; } .outer:before, .outer:after { content: ""; display: table; } .outer:after { clear: both; } @media screen and (min-width: 858px) { #main { width: 768px; padding-right: 50px; margin: 0 auto; } } ::-webkit-scrollbar { width: 0px; } .article-date, .article-category-link, .archive-year { text-decoration: none; color: #999; line-height: 1em; } .article-inner, .archive-article-inner { background: #fff; } .article-entry h1 { font-size: 2em; } .article-entry h2 { font-size: 1.5em; } .article-entry h3 { font-size: 1.3em; } .article-entry h4 { font-size: 1.2em; } .article-entry h5 { font-size: 1em; } .article-entry h6 { font-size: 1em; color: #999; } .article-entry hr { border: 1px dashed #ddd; } .article-entry strong { font-weight: bold; } .article-entry em, .article-entry cite { font-style: italic; } .article-entry sup, .article-entry sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } .article-entry sup { top: -0.5em; } .article-entry sub { bottom: -0.2em; } .article-entry small { font-size: 0.85em; } .article-entry acronym, .article-entry abbr { border-bottom: 1px dotted; } .article-entry ul, .article-entry ol, .article-entry dl { margin: 0 20px; line-height: 1.6em; } .article-entry ul ul, .article-entry ol ul, .article-entry ul ol, .article-entry ol ol { margin-top: 0; margin-bottom: 0; } .article-entry ul { list-style: disc; } .article-entry ol { list-style: decimal; } .article-entry dt { font-weight: bold; } .article { margin: 50px 0; border-bottom: 1px dashed #d9d9d9; text-align: justify; } .article-inner { overflow: hidden; } .article-meta:before, .article-meta:after { content: ""; display: table; } .article-meta:after { clear: both; } .article-date { float: left; } .article-category { float: left; line-height: 1em; color: #ccc; text-shadow: 0 1px #fff; margin-left: 8px; } .article-category:before { content: "#"; } .article-category-link { margin: 0 5px 0 0; } .article-header { padding: 20px 0; } .article-title { text-decoration: none; font-size: 1.8em; font-weight: bold; color: #555; line-height: 1.1em; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; } a.article-title:hover { color: #991a1a; } .article-entry { color: #555; padding: 0; padding-bottom: 20px; } .article-entry:before, .article-entry:after { content: ""; display: table; } .article-entry:after { clear: both; } .article-entry p, .article-entry table { line-height: 1.6em; margin: 1.6em 0; } .article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6 { font-weight: bold; } .article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6 { line-height: 1.1em; margin: 1.1em 0; } .article-entry a { color: #991a1a; text-decoration: none; } .article-entry a:hover { text-decoration: underline; } .article-entry ul, .article-entry ol, .article-entry dl { margin-top: 1.6em; margin-bottom: 1.6em; } .article-entry img, .article-entry video { max-width: 100%; height: auto; display: block; margin: auto; } .article-entry iframe { border: none; } .article-entry table { width: 100%; border-collapse: collapse; border-spacing: 0; } .article-entry th { font-weight: bold; border-bottom: 3px solid #ddd; padding-bottom: 0.5em; } .article-entry td { border-bottom: 1px solid #ddd; padding: 10px 0; } .article-entry blockquote { font-family: Georgia, "Times New Roman", serif; font-size: 1em; background: #f7f7f7; margin: 20px 0; padding: 10px 20px; border-left: 4px solid #991a1a; } .article-entry blockquote p { margin: 10px 0; text-align: justify; word-break: break-word; } .article-entry blockquote footer { font-size: 14px; margin: 1.6em 0; font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } .article-entry blockquote footer cite:before { content: "—"; padding: 0 0.5em; } .article-entry .pullquote { text-align: left; width: 45%; margin: 0; } .article-entry .pullquote.left { margin-left: 0.5em; margin-right: 1em; } .article-entry .pullquote.right { margin-right: 0.5em; margin-left: 1em; } .article-entry .caption { color: #999; display: block; font-size: 0.9em; margin-top: 0.5em; position: relative; text-align: center; } .article-entry .video-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; } .article-entry .video-container iframe, .article-entry .video-container object, .article-entry .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; } .article-entry .tag-list { padding: 20px 0; margin: 0 0 20px 0; } .article-entry .tag-list .tag-list-item { list-style: none; float: left; margin-right: 20px; } .article-entry .tag-list .tag-list-item a { padding-right: 5px; } .article-entry .tag-list .tag-list-item span.tag-list-count { color: #ccc; } .article-entry .tag-list .tag-list-item span.tag-list-count:before { content: '('; } .article-entry .tag-list .tag-list-item span.tag-list-count:after { content: ')'; } .article-more-link a { display: inline-block; line-height: 1em; padding: 6px 0; border-radius: 15px; background: #fff; color: #991a1a; text-shadow: 0 1px #fff; text-decoration: none; } .article-more-link a:hover { color: #991a1a; text-decoration: none; } .article-footer { font-size: 0.85em; line-height: 1.6em; border-top: 1px solid #ddd; padding-top: 1.6em; margin: 0 20px 20px; } .article-footer:before, .article-footer:after { content: ""; display: table; } .article-footer:after { clear: both; } .article-footer a { color: #999; text-decoration: none; } .article-footer a:hover { color: #555; } .article-tag-list-item { float: left; margin-right: 10px; } .article-tag-list-link:before { content: "#"; } #article-nav { position: relative; } #article-nav:before, #article-nav:after { content: ""; display: table; } #article-nav:after { clear: both; } @media screen and (min-width: 858px) { #article-nav { margin: 50px 0; } #article-nav:before { width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; content: ""; border-radius: 50%; background: #ddd; -webkit-box-shadow: 0 1px 2px #fff; box-shadow: 0 1px 2px #fff; } } .article-nav-link-wrap { text-decoration: none; text-shadow: 0 1px #fff; color: #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 50px; text-align: center; display: block; } .article-nav-link-wrap:hover { color: #555; } @media screen and (min-width: 858px) { .article-nav-link-wrap { width: 50%; margin-top: 0; } } @media screen and (min-width: 858px) { #article-nav-newer { float: left; text-align: right; padding-right: 20px; } } @media screen and (min-width: 858px) { #article-nav-older { float: right; text-align: left; padding-left: 20px; } } .article-nav-caption { text-transform: uppercase; letter-spacing: 2px; color: #ddd; line-height: 1em; font-weight: bold; } #article-nav-newer .article-nav-caption { margin-right: -2px; } .article-nav-title { font-size: 0.85em; line-height: 1.6em; margin-top: 0.5em; } .article-share-box { position: absolute; display: none; background: #fff; -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.2); box-shadow: 1px 2px 10px rgba(0,0,0,0.2); border-radius: 3px; margin-left: -145px; overflow: hidden; z-index: 1; } .article-share-box.on { display: block; } .article-share-input { width: 100%; background: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 14px "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; padding: 0 15px; color: #555; outline: none; border: 1px solid #ddd; border-radius: 3px 3px 0 0; height: 36px; line-height: 36px; } .article-share-links { background: #fff; } .article-share-links:before, .article-share-links:after { content: ""; display: table; } .article-share-links:after { clear: both; } .article-gallery { background: #000; position: relative; } .article-gallery-photos { position: relative; overflow: hidden; } .article-gallery-img { display: none; max-width: 100%; } .article-gallery-img:first-child { display: block; } .article-gallery-img.loaded { position: absolute; display: block; } .article-gallery-img img { display: block; max-width: 100%; margin: 0 auto; } #comments { background: #fff; margin: 50px 0; } #comments a { color: #991a1a; } .archives-wrap { margin: 50px 0; } .archives:before, .archives:after { content: ""; display: table; } .archives:after { clear: both; } .archive-year-wrap { margin-bottom: 1em; } .archives { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } @media screen and (min-width: 480px) and (max-width: 857px) { .archives { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media screen and (min-width: 858px) { .archives { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } .archive-article { -webkit-column-break-inside: avoid; page-break-inside: avoid; overflow: hidden; break-inside: avoid-column; } .archive-article-inner { padding: 10px; margin-bottom: 15px; } .archive-article-title { text-decoration: none; font-weight: bold; color: #555; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; line-height: 1.6em; } .archive-article-title:hover { color: #991a1a; } .archive-article-footer { margin-top: 1em; } .archive-article-date { color: #999; text-decoration: none; font-size: 0.85em; line-height: 1em; margin-bottom: 0.5em; display: block; } #page-nav { margin: 40px auto; background: #fff; text-align: center; color: #999; overflow: hidden; } #page-nav:before, #page-nav:after { content: ""; display: table; } #page-nav:after { clear: both; } #page-nav a, #page-nav span { padding: 10px 10px; line-height: 1; height: 2ex; } #page-nav a { color: #999; text-decoration: none; } #page-nav a:hover { background: #991a1a; color: #fff; } #page-nav .prev { float: left; } #page-nav .next { float: right; } #page-nav .page-number { display: inline-block; } @media screen and (max-width: 479px) { #page-nav .page-number { display: none; } } #page-nav .current { color: #991a1a; font-weight: bold; } #page-nav .space { color: #ddd; } #footer { background: #fff; color: #999; padding: 30px 20px; } @media screen and (min-width: 858px) { #footer { width: 768px; margin: 0 auto; padding: 30px 0; padding-right: 50px; } } #footer a { color: #991a1a; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer-info { line-height: 1.6em; font-size: 0.85em; padding: 0; margin: 0; } .article-entry pre, .article-entry .highlight { border-radius: 4px; background: #f7f7f7; margin: 0 -10px; padding: 10px 10px; overflow: auto; color: #666; line-height: 22.400000000000002px; } .article-entry .highlight .gutter pre { color: #666; font-size: 0.85em; } .article-entry pre, .article-entry code { font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; } .article-entry code { background: #fff; text-shadow: 0 1px #fff; padding: 0 0.3em; } .article-entry pre code { background: none; text-shadow: none; padding: 0; } .article-entry .highlight pre { border: none; margin: 0; padding: 0; } .article-entry .highlight table { margin: 0; width: auto; } .article-entry .highlight td { border: none; padding: 0; } .article-entry .highlight figcaption { padding: 0 10px; font-size: 0.85em; color: #999; line-height: 1em; margin-bottom: 1em; } .article-entry .highlight figcaption:before, .article-entry .highlight figcaption:after { content: ""; display: table; } .article-entry .highlight figcaption:after { clear: both; } .article-entry .highlight figcaption a { float: right; } .article-entry .highlight .gutter pre { text-align: right; padding: 0 10px; border-right: 1px solid #ddd; margin-right: 10px; border-radius: 0; } .article-entry .highlight .line { height: 22.400000000000002px; } pre .comment, pre .title { color: #999; } pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: #f2777a; } pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { color: #f99157; } pre .class, pre .ruby .class .title, pre .css .rules .attribute { color: #9c9; } pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { color: #9c9; } pre .css .hexcolor { color: #6cc; } pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { color: #69c; } pre .keyword, pre .javascript .function { color: #c9c; } @media screen and (max-width: 479px) { #mobile-nav { position: absolute; top: 0; left: 0; width: 100%; height: 45px; background: #2a2a2a; z-index: 999; } } @media screen and (max-width: 479px) { .mobile-nav-link { float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px; padding: 0 20px; } .mobile-nav-link:hover { color: #fff; } } @media screen and (min-width: 480px) and (max-width: 857px) { #mobile-nav { position: absolute; top: 0; left: 0; width: 100%; height: 45px; background: #2a2a2a; z-index: 999; } } @media screen and (min-width: 480px) and (max-width: 857px) { .mobile-nav-link { float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px; padding: 0 20px; } .mobile-nav-link:hover { color: #fff; } } #sidebar { display: none; } @media screen and (min-width: 858px) { #sidebar { display: block; position: fixed; right: 0; top: 0; width: 50px; height: 100%; background: #2a2a2a; } #sidebar a#go-top { position: absolute; bottom: 10px; left: 0; width: 50px; height: 50px; color: #fff; text-align: center; line-height: 50px; text-decoration: none; } #sidebar a#go-top i.icon { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; font-size: 20px; } #sidebar a#go-top i.icon.icon-up:before { content: "\e606"; } #sidebar .menus { padding-top: 10px; } #sidebar .menus ul li a { display: block; width: 50px; height: 50px; margin-bottom: 5px; text-align: center; line-height: 50px; text-decoration: none; color: #fff; } #sidebar .menus ul li a:hover { color: #999; } #sidebar .menus ul li a i.icon { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; font-size: 20px; } #sidebar .menus ul li a i.icon.icon-home:before { content: "\e600"; } #sidebar .menus ul li a i.icon.icon-fenlei:before { content: "\e603"; } #sidebar .menus ul li a i.icon.icon-tag:before { content: "\e601"; } #sidebar .menus ul li a i.icon.icon-github:before { content: "\e604"; } } .gist { color: #000; } .gist div { padding: 0; margin: 0; } .gist .gist-file { border: 1px solid #dedede; /* gray */ font-family: Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; margin-bottom: 1em; } .gist .gist-file .gist-meta { overflow: hidden; font-size: 85%; padding: 0.5em 12px; color: #666; background-color: #f5f5f5; font-size: 12px; } .gist .gist-file .gist-meta a { color: #666; } .gist .gist-file .gist-meta a:visited { color: #991a1a; } .gist .gist-file .gist-data { overflow: auto; word-wrap: normal; background-color: #f8f8ff; border-bottom: 1px solid #ddd; font-size: 100%; } .gist .gist-file .gist-data pre { font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace; background: transparent !important; margin: 0 !important; border: none !important; padding: 0.25em 0.5em 0.5em 0.5em !important; } .gist .gist-file .gist-data .gist-highlight { background: transparent !important; } .gist .gist-file .gist-data .gist-line-numbers { background-color: #ececec; color: #aaa; border-right: 1px solid #ddd; text-align: right; } .gist .gist-file .gist-data .gist-line-numbers span { clear: right; display: block; }