/* Base Style */ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html{ color:#333; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-rendering:optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; } /* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 中添加 .borderbox 这个 class */ *, *:before, *: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; *display:inline; *zoom:1; } /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea{ font:400 1em/1.8 Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } /* 去除 IE6 input/button 多余的空白 */ button, input{ *width:auto; *overflow:visible; /* 让 input 和 button 一样高 */ line-height:normal; } button::-moz-focus-inner, input::-moz-focus-inner{ padding:0; border:0; } /* 去掉各Table cell 的边距并让其边重合 */ table{ border-collapse:collapse; border-spacing:0; } /* IE bug fixed: th 不继承 text-align */ th{ text-align:inherit; } /* 去除默认边框 */ fieldset, img{ border:0; } /* 解决 IE6-7 图片缩放锯齿问题 */ img{ -ms-interpolation-mode:bicubic; } /* ie6 7 8(q) bug 显示为行内表现 */ iframe{ display:block; } /* 块/段落引用 */ blockquote { position:relative; color: #999; font-weight:300; font-family:Avenir, 'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; border-left:1px solid #1abc9c; padding-left:1em; margin:1em 3em 1em 2em; } @media only screen and ( max-width:640px ){ blockquote{ margin:1em 0; } .post { margin-bottom: 40px; } } /* 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:#2C5C74; } a:hover{ text-decoration:underline; } .typo a{ border-bottom:1px solid #2C5C74; } .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:10px; *color:pink; *filter:chroma(color=pink); height:10px; *margin:-7px 0 2px; } /* 底部印刷体、版本等标记 */ small, .typo-small, /* 图片说明 */ figcaption{ font-size:0.9em; color:#888; } strong, b{font-weight:bold;color:#000;} /* 可拖动文件添加拖动手势 */ [draggable]{ cursor:move; } /* 强制文本换行 */ .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 p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote{ margin-bottom:1.8em; } h1, h2, h3, h4, h5, h6{ font-family:'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-weight:200; color:#000; } /* 标题应该更贴紧内容，并与其他块区分，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-bottom:0.4em; line-height:1.5; } .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-top:0; margin-bottom:0; 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; } /* 高亮选中 */ ::-moz-selection{ background: #2C5C74; color:#fff; } ::selection{ background: #2C5C74; color:#fff; } .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; content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; } /* Responsive images */ .typo img, img { max-width: 100%; } /* 清理浮动 */ .clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clear { zoom:1; /* for IE6 IE7 */ } /* 隐藏, 通常用来与 JS 配合 */ body .fn-hide { display: none; } /* 设置内联, 减少浮动带来的bug */ .fl, .fr { display:inline; } .fl { float:left; } .fr { float:right; } /* Common */ body { background: #F7F7F7; } /* Header */ #header { width: 100%; } /* Navbar */ .nav-wrap { top: 0; left: 0; width: 100%; height: 40px; z-index: 999; position: fixed; background: #fff; border-bottom: 2px solid #2C5C74; } #navbar { height: 37px; width: 1100px; margin: 0 auto; overflow: hidden; line-height: 40px; } #navbar a { float: left; color: #999; padding: 0 20px; font-size: 16px; display: inline-block; transition: color .3s; border-right: 1px solid #ebebeb; } #navbar a:hover { color: #2C5C74; text-decoration: none; } #navbar a.main { color: #2C5C74; border-left: 1px solid #ebebeb; } #navbar a.current { color: #fff; background: #2C5C74; } #navbar form { float: right; display: inline; } /* Logo */ #logo { color: #fff; width: 100%; overflow: hidden; text-align: center; position: relative; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); } #logo h1, #logo h2 { position: relative; z-index: 1; } #logo h1 { font-size: 3.2em; padding: 60px 0 0; } #logo h1 a { color: #fff; text-decoration: none; } #logo h2 { color: #fff; font-size: 1.6em; padding-bottom: 30px; } #logo .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background: url(./img/bg.jpg) center; } @media (min-width: 1100px) { #logo { height: 400px; } #logo h1 { padding: 150px 0 0; } #logo h2 { padding: 0; } } /* Search Bar */ .search-input { border: 0; height: 37px; width: 150px; outline-offset: -1px; padding: 0 20px 0 40px; outline: 1px solid #ebebeb; outline-width: 0 1px 0 1px; transition: background-color .3s; background: transparent url(img/icon-search.png) no-repeat 10px center; } .search-input:hover { background-color: #f7f7f7; } .search-input:focus { background-color: #fff; } /* Content */ #wrapper { width: 1100px; margin: 0 auto; } #container { margin: 60px 0 0; } @media (max-width: 1100px) { #wrapper, #navbar { width: 100%; } #container { margin: 30px 20px 0; } } /* Footer */ #footer { color: #ccc; font-size: 14px; text-align: center; line-height: 20px; padding: 20px; } #footer a { color: #999; } /* Post */ .post { background: #fff; position: relative; margin-bottom: 60px; box-shadow: 0 0 3px #bababa; } .post:last-child { margin-bottom: 0; } .post-thumbnail { overflow: hidden; min-height: 90px; text-align: center; } .post-thumbnail img { margin-top: -70px; } .post-title a { color: #fff; height: 100px; display: block; font-size: 26px; line-height: 70px; text-indent: 40px; text-decoration: none; background: rgb(44, 92, 116); } .post.thumbnail-on .post-title a { top: 0; left: 0; width: 100%; position: absolute; background: rgba(44, 92, 116, .8); } .post-content, .post-entry { font-size: 16px; padding: 40px; padding-top: 35px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .post-entry { text-indent: 20px; } .post.thumbnail-on .post-content { padding-top: 20px; } .post-time { left: 0; top: 45px; color: #fff; margin: 40px; display: block; font-size: 14px; margin-top: 10px; position: absolute; } .post-footer { padding: 10px 20px; border-top: 1px solid #dfdfdf; } .post-tags { float: left; } .post-tags a { float: left; display: block; font-size: 14px; padding: 3px 12px; text-decoration: none; color: hsl(0, 0%, 60%); transition: background .2s, color .4s; background: transparent; } .post-tags a:before { content: '#'; margin-right: 5px; color: rgb(44, 92, 116); } .post-tags a:hover { color: #fff; background: rgb(44, 92, 116); } .post-readmore { color: #fff; float: right; font-size: 14px; padding: 3px 12px; background: #999; transition: background .3s; } .post-readmore:hover { color: #fff; text-decoration: none; background: rgb(44, 92, 116); } .post-readmore:link { color: #fff; } .post-next-prev { font-size: 20px; margin-bottom: 40px; } .post-next-prev .prev, .post-next-prev .next { width: 50%; color: #c7c7c7; float: left; cursor: pointer; position: relative; display: inline-block; transition: color .2s; } .post-next-prev .prev a, .post-next-prev .next a { color: #c7c7c7; transition: color .2s; } .post-next-prev .prev:hover, .post-next-prev .next:hover { color: #999; } .post-next-prev .prev:hover a, .post-next-prev .next:hover a { color: #999; text-decoration: none; } .post-next-prev .prev:after { content: "\2022"; color: #777; top: -3px; right: -5px; font-size: 25px; position: absolute; } .post-next-prev .prev { text-align: right; margin-left: -20px; padding-right: 20px; } .post-next-prev .next { text-align: left; text-indent: 20px; } .post-next-prev .prev:before, .post-next-prev .next:before { color: #c7c7c7; top: -20px; font-size: 14px; position: absolute; font-family: Georgia, Times, "Times New Roman", serif; } .post-next-prev .prev:before { content: "\2039 Prev"; right: 20px; } .post-next-prev .next:before { content: 'Next \203A'; left: 0; } .archive-title { text-align: center; margin-bottom: 60px; } /* Comment */ #comment-list { background: #fff; position: relative; padding: 60px 0; box-shadow: 0 0 3px #bababa; } #comment-list .wrap { width: 980px; margin: 0 auto; } #comment-list .respond { position: relative; } /* Comemnt Panel */ #commentPanel { top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: none; background: rgba(255, 255, 255, .8); padding-right: 2px; position: absolute; } .submit, #commentArea .textarea, #commentPanel input { text-indent: 10px; outline: none; font: inherit; overflow: auto; position: relative; border: 1px solid #ddd; vertical-align: baseline; -webkit-appearance: none; resize: none; } #commentPanel input { display: block; width: 60%; margin: 0 auto; } #commentPanel .submit { text-align: center; text-indent: 0; display: block; line-height: 30px; margin: 30px auto; } /* Comment Area */ #commentArea { margin-left: 75px; } #commentArea .textarea { width: 100%; height: 111px; } .submit, #commentArea button { color: #777; height: 32px; width: 100px; outline: none; cursor: pointer; margin-top: 7px; background: #fff; font-size: 14px; border: 1px solid #ddd; text-indent: 0; } .avatar, .comment-author img { float: left; width: 50px; height: 50px; padding: 1px; margin-right: 20px; border: 1px solid #ddd; } /* Comment List */ #comments-list { margin-top: 20px; } #comments-list li { padding: 20px 0; padding-left: 20px; position: relative; border-top: 1px solid #ddd; } #comments-list li .authorname a { color: #777; font-size: 14px; padding-left: 6px; } #comments-list li .comment-content { word-wrap: break-word; word-break: normal; padding-left: 75px; } #comments-list li .comment-children { padding-left: 75px; margin-top: 20px; margin-bottom: 0; } #comments-list li .comment-children li { padding-left: 0; } #comments-list li footer { padding-left: 75px; font-size: 14px; color: #999; margin-bottom: -5px; } #comments-list li footer a { color: #999; margin-left: 10px; } @media (max-width: 980px) { #commentArea { margin-left: 0px; } #commentAvatar { display: block; width: 70px; height: 70px; margin: 20px auto; padding-top: 20px; } #commentAvatar img { width: 70px; height: 70px; } #comment-list .wrap { width: 100%; } #comment-list { padding: 0 0 20px; } #comment-list .respond { width: 100%; } #comment-form { text-align: center; } #comment-form input { border-left: 0; border-right: 0; } #comment-form .textarea { border-left: 0; border-right: 0; } #comments-list { padding-bottom: 0; } #comment-form input:first-child { margin-top: 60px; } } /* Pagination*/ #pageNav { text-align: center; } .page-navigator { margin: 0 auto; margin-bottom: 20px; display: inline-block; box-shadow: 0 0 3px #bababa; } .page-navigator li { display: inline-block; } .page-navigator a, .page-navigator span { color: #666; display: block; padding: 10px 15px; line-height: 20px; text-decoration: none; background-color: #fff; transition: color, background .3s; } .page-navigator a:hover, .page-navigator a:focus { color: #2C5C74; background-color: #E2E2E2; } .page-navigator .current a, .page-navigator .current { background-color: #2C5C74; color: #fff; cursor: default; }