/* basic colors */ /* theme colors */ /* modify value of $theme-color to get different theme colors */ /* typo.css from https://github.com/sofish/typo.css */ @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { color: #333; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizelegibility; } /* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 中添加 .borderbox 这个 class */ html.borderbox *, html.borderbox *:before, html.borderbox *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { margin: 0; padding: 0; } /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } /* HTML5 媒体文件跟 img 保持一致 */ audio, canvas, video { display: inline-block; } /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { font: 300 1rem/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 cell 的边距并让其边重合 */ 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; } } /* Firefox 以外，元素没有下划线，需添加 */ acronym, abbr { border-bottom: 1px dotted; font-variant: normal; } /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ abbr { cursor: help; } /* 一致的 del 样式 */ del { text-decoration: line-through; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400; } /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ ul, ol { list-style: none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ caption, th { text-align: left; } q:before, q:after { content: ''; } /* 统一上标和下标 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } :root sub, :root sup { vertical-align: baseline; /* for ie9 and other modern browsers */ } sup { top: -0.5em; } sub { bottom: -0.25em; } /* 让链接在 hover 状态下显示下划线 */ // a { // color: #1abc9c; // } // a:hover { // text-decoration: underline; // } // .typo a { // border-bottom: 1px solid #1abc9c; // } // .typo a:hover { // border-bottom-color: #555; // color: #555; // text-decoration: none; // } /* 默认不显示下划线，保持页面简洁 */ ins, a { text-decoration: none; } /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 * 关于 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated * 一篇关于 标签的很好文章：http://html5doctor.com/u-element/ */ u, .typo-u { text-decoration: underline; } /* 标记，类似于手写的荧光笔的作用 */ mark { background: #fffdd1; border-bottom: 1px solid #ffedce; padding: 2px; margin: 0 5px; } /* 代码片断 */ pre, code, 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; } /* 一致化 horizontal rule */ hr { border: none; border-bottom: 1px solid #cfcfcf; margin-bottom: 0.8em; height: 10px; } /* 底部印刷体、版本等标记 */ small, .typo-small, /* 图片说明 */ figcaption { font-size: 0.9em; color: #888; } strong, b { font-weight: bold; color: #000; } /* 可拖动文件添加拖动手势 */ [draggable] { cursor: move; } .clearfix:before, .clearfix:after { 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 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */ .serif { font-family: Palatino, Optima, Georgia, serif; } /* 保证块/段落之间的空白隔行 */ .typo table, .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, 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; } /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ .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: 0.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; } /* 在文章中，应该还原 ul 和 ol 的样式 */ .typo ul, .typo-ul { margin-left: 1.3em; list-style: disc; } .typo ol, .typo-ol { list-style: decimal; margin-left: 1.9em; } .typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { margin-bottom: 0.8em; margin-left: 2em; } .typo li ul, .typo-ul ul, .typo-ol ul { list-style: circle; } /* 同 ul/ol，在文章中应用 table 基本格式 */ // .typo table th, // .typo table td, .typo-table th, .typo-table td, .typo table caption { border: 1px solid #ddd; padding: 0.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; } /* 去除 webkit 中 input 和 textarea 的默认样式 */ .typo-input, .typo-textarea { -webkit-appearance: none; border-radius: 0; } .typo-em, .typo em, legend, caption { color: #000; font-weight: inherit; } /* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */ .typo-em { position: relative; } .typo-em:after { position: absolute; top: 0.65em; left: 0; width: 100%; overflow: hidden; white-space: nowrap; content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; } /* Responsive images */ .typo img { max-width: 100%; } .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #23241f; } .hljs, .hljs-tag, .hljs-subst { color: #f8f8f2; } .hljs-strong, .hljs-emphasis { color: #a8a8a2; } .hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link { color: #ae81ff; } .hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #a6e22e; } .hljs-strong { font-weight: bold; } .hljs-emphasis { font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #f92672; } .hljs-symbol, .hljs-attribute { color: #66d9ef; } .hljs-params, .hljs-class .hljs-title { color: #f8f8f2; } .hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-variable { color: #e6db74; } .hljs-comment, .hljs-deletion, .hljs-meta { color: #75715e; } .highlight { overflow: auto; } .highlight table { width: 100%; max-width: 100%; } .highlight pre { font-size: 0.8125rem; } .highlight .gutter { width: 5%; text-align: right; } .highlight .gutter pre { border-top: 0; border-bottom: 0; border-left: 0; } .highlight .code { width: 95%; } .highlight .code pre { border: 0; } code { color: #1999ec; padding: 0 0.125rem; margin: 0 0.125rem; border-radius: 0.0625rem; background-color: #f0e8df; } @media only screen and (max-width: 414px) { .highlight pre { font-size: 0.75rem; } } html, body { color: #555; background-color: #fff; font-size: 100%; /* add PX (or original value) as backup */ font-size: 100%; } a { color: #1999ec; } a:hover { text-decoration: none; color: #fff; background-color: #1999ec; transition: all 0.25s; cursor: pointer; } strong { color: #555; } h1, h2, h3, h4, h5, h6 { color: #555; } .site-header { padding: 2.5rem 0; border-bottom: 1px solid #e1e1e1; margin-bottom: 1.875rem; } .site-header.header-background { border-bottom: 0; background-color: #808080; background-position: center center; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .site-header .page-title { color: #1999ec; text-align: center; text-shadow: 1px 1px 2px #555; } .site-header .page-title.with-background-image { color: #fff; padding: 3.125rem 0; } .site-header .page-title .title { font-size: 2.25rem; } .site-menu { text-align: center; margin-top: 0.625rem; text-shadow: 3px 3px 3px #555; } .site-menu ul { margin: 0 auto; padding: 0; } .site-menu ul > li { display: inline-block; margin-right: 0.625rem; } .site-menu ul > li:last-child { margin-right: 0; } .site-menu ul > li > a { padding: 0.1875rem 0.625rem; border-radius: 0.125rem; } .site-menu.with-background-image a { color: #fff; } @media only screen and (max-width: 414px) { .site-header .page-title.with-background-image { padding: 1.875rem 0; } .site-header .page-title .title { font-size: 1.375rem; } .site-menu { font-size: 1rem; } .site-menu ul li { margin-right: 0; } .site-menu ul li > a { padding: 0.1875rem 0.375rem; } } .post-item-wrapper { padding: 2.1875rem 0; border-bottom: 1px solid #e1e1e1; text-align: center; overflow: hidden; } .post-item-wrapper:last-child { border-bottom: none; } .post-item-wrapper .post-title { display: inline-block; padding: 0 0.625rem; margin-bottom: 1.25rem; font-size: 1.375rem; text-align: center; border-radius: 0.125rem; } .post-item-wrapper .post-excerpt { overflow: hidden; } .post-item-wrapper .date-and-category, .post-item-wrapper .excerpt, .post-item-wrapper .tags { float: left; } .post-item-wrapper .date-and-category, .post-item-wrapper .tags { width: 14%; } .post-item-wrapper .excerpt { width: 64%; margin: 0 4%; font-size: 0.875rem; text-align: justify; } .post-item-wrapper .excerpt p { margin-bottom: 0; } .post-item-wrapper .date-and-category { font-size: 0.8125rem; text-align: center; border: 1px solid #1999ec; border-radius: 0.1875rem; } .post-item-wrapper .date-and-category .date, .post-item-wrapper .date-and-category .categories { padding: 0.125rem 0; } .post-item-wrapper .date-and-category .date { color: #1999ec; } .post-item-wrapper .date-and-category .categories { color: #fff; background-color: #1999ec; } .post-item-wrapper .date-and-category .categories > a { color: #fff; background-color: #1999ec; } .post-item-wrapper .tags { overflow: hidden; } .post-item-wrapper .tags .untagged, .post-item-wrapper .tags .tag { display: inline-block; font-size: 0.8125rem; padding: 0 0.3125rem; text-align: center; border: 1px solid #1999ec; border-radius: 0.1875rem; } .post-item-wrapper .tags .untagged { color: #1999ec; } @media only screen and (max-width: 768px) { .post-item-wrapper .date-and-category, .post-item-wrapper .tags { display: none; } .post-item-wrapper .excerpt { width: 100%; padding: 0 5%; margin: 0; float: none; } .post-item-wrapper .post-title { font-size: 1.125rem; } } .archive-item { margin-bottom: 1.25rem; } .archive-item .post-title { font-size: 1.25rem; padding: 0 0.3125rem; border-radius: 0.125rem; } .archive-item .date { font-size: 0.875rem; padding: 0 0.3125rem; } @media only screen and (max-width: 414px) { .archive-item .post-title { font-size: 1rem; } .archive-item .date { font-size: 0.875rem; } } .post-tags, .post-info { font-size: 0.875rem; font-style: italic; text-align: center; } .post-info { margin-bottom: 0.3125rem; } .post-info .info { padding: 0 0.5rem; border-right: 1px dotted #85878a; } .post-info .info:last-child { border-right: none; } .post-info .categories a { padding: 0.125rem 0.25rem; border-radius: 0.125rem; } .post-tags { font-style: italic; } .post-tags > a { display: inline-block; padding: 0 0.25rem; margin-right: 0.125rem; border-radius: 0.125rem; } .post-content { padding-top: 2.5rem; padding-bottom: 2.5rem; font-size: 0.9375rem; } @media only screen and (max-width: 414px) { .post-tags, .post-info { font-size: 0.75rem; } .post-tags .info, .post-info .info { padding: 0 0.3125rem; } .post-tags .time, .post-info .time { display: none; } .post-content { font-size: 0.78125rem; } } footer { padding: 2.1875rem 0; border-top: 1px solid #e1e1e1; font-size: 0.75rem; text-align: center; } .footer-links { margin-top: 10px; margin-bottom: 10px; } .footer-links a { color: #666; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .pagination { display: block; text-align: center; overflow: hidden; } .pagination > li { display: inline-block; } .pagination > li > a { color: #1999ec; background-color: #fff; border: 1px solid #1999ec; border-radius: 0.1875rem; } .pagination > li > a:hover { color: #fff; background-color: #1999ec; border: 1px solid #1999ec; } .pagination > li > a span { display: inline-block; } @media only screen and (max-width: 414px) { .pagination { font-size: 0.875rem; } }