diff --git a/style.css b/style.css index 0a9655f..aa84ebc 100644 --- a/style.css +++ b/style.css @@ -1,166 +1,3 @@ -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote { - margin: 0; - padding: 0; -} - -body { - font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif; - font-size: 18px; - line-height: 1.4; - color: #000000; - margin: 10px 13px 10px 13px; -} - -a { - color: #0069d6; -} - -a:hover { - color: #0050a3; - text-decoration: none; -} - -a img { - border: none; -} - -p { - text-indent: 2em; - margin-bottom: 12px; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: #404040; - line-height: 36px; -} - -h1 { - margin-bottom: 32px; - margin-top: 32px; - font-size: 30px; - color: #0050a3; -} - -h1 a { - margin-top: 100px; - display: block; -} - -h2 { - font-size: 24px; - margin-bottom: 28px; -} - -h3 { - font-size: 18px; - margin-bottom: 24px; -} - -h4 { - font-size: 16px; -} - -h5 { - font-size: 14px; -} - -h6 { - font-size: 13px; -} - -hr { - margin: 0 0 19px; - border: 0; - border-bottom: 1px solid #ccc; -} - -blockquote { - padding: 2px 13px 21px 2px; - margin-bottom: 12px; - font-family: georgia,serif; - font-style: italic; -} - -blockquote:before { - content: "\201C"; - font-size: 40px; - margin-left: -10px; - font-family: georgia,serif; - color: #eee; -} - -blockquote p { - font-size: 14px; - font-weight: 300; - line-height: 18px; - margin-bottom: 0; - font-style: italic; -} - -code, pre { - font-family: Monaco, Andale Mono, Courier New, monospace; -} - -code { - background-color: #fee9cc; - color: rgba(0, 0, 0, 0.75); - padding: 1px 3px; - font-size: 12px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} - -pre { - display: block; - padding: 14px; - margin: 0 0 18px; - line-height: 16px; - font-size: 11px; - border: 1px solid #d9d9d9; - white-space: pre-line; - word-wrap: break-word; -} - -pre code { - background-color: #fff; - color: #737373; - font-size: 11px; - padding: 0; - white-space: pre-wrap; -} - - -figure img { - display: block; - margin: 0 auto; - max-width: 100%; -} - -figcaption { - text-align: center; -} - -ul li a { - font-weight: bold; -} - -ul li ul a { - font-weight: normal; -} - @media screen and (min-width: 768px) { body { width: 748px; @@ -169,383 +6,690 @@ ul li ul a { } -table { - margin: 10px auto; +/*! + * Mifa v0.2.0 + * https://github.com/phodal/mifa#readme + * + * Copyright (c) 2018 Phodal Huang + * Licensed under the MIT license + */ + +.color-primary { + color: #384452; + background-color: #384452; } -thead { - font-size: 120%; - font-weight: 1000; - cursor: pointer; - background: #c9dff0 +.color-grey { + color: #d1d8df; + background-color: #d1d8df; } -thead tr th { - text-align: center; - font-weight: bold; - padding: 12px 30px; - padding-left: 42px +.color-green { + color: #1abc9c; + background-color: #1abc9c; } -thead tr th span { - padding-right: 20px; - background-repeat: no-repeat; - background-position: 100% 100% +.color-dark-grey { + color: #5e6772; + background-color: #5e6772; } -tbody tr td { - padding: 15px 10px +.color-blue { + color: #23B7F3; + background-color: #23B7F3; } -tbody tr td.lalign { - text-align: left +.color-code-grey { + color: #eef1f5; + background-color: #eef1f5; } -tbody tr:nth-child(even) { - background: #fff +.color-red { + color: #f53d3d; + background-color: #f53d3d; } -tbody tr:nth-child(odd) { - background: #eee +.color-yellow { + color: #ffff3a; + background-color: #ffff3a; } -td,th { - border-left: 1px solid #cbcbcb; - border-width: 0 0 0 1px; - font-size: inherit; - margin: 0; - overflow: visible; - padding: .5em 1em +.color-light-grey { + color: #fdfdfd; + background-color: #fdfdfd; } +*, +*:after, +*:before { + box-sizing: inherit; +} - -/* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等,推荐在 中添加 .borderbox 这个 class */ -html.borderbox *, html.borderbox *:before, html.borderbox *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; +html { box-sizing: border-box; + font-size: 62.5%; } -/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ -article, aside, details, figcaption, figure, footer, header, menu, nav, section { - display: block; +body { + color: #384452; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-size: 1.6em; + font-weight: 300; + letter-spacing: .01em; + line-height: 1.6; } -/* HTML5 媒体文件跟 img 保持一致 */ -audio, canvas, video { - display: inline-block; -} - -/* 要注意表单元素并不继承父级 font 的问题 */ -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-serif; -} - -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; + border-left: 0.3rem solid #1abc9c; + margin-left: 0; + margin-right: 0; + padding: 1rem 1.5rem; } -@media only screen and ( max-width: 640px ) { - blockquote { - margin: 1em 0; - } +blockquote *:last-child { + margin-bottom: 0; } -/* Firefox 以外,元素没有下划线,需添加 */ -acronym, abbr { - border-bottom: 1px dotted; - font-variant: normal; +q:before { + color: #1abc9c; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; } -/* 添加鼠标问号,进一步确保应用的语义是正确的(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) */ -abbr { - cursor: help; +q:after { + content: none; } -/* 一致的 del 样式 */ -del { - text-decoration: line-through; +.button, +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + background-color: #384452; + border: 0.1rem solid #384452; + border-radius: .4rem; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 1.1rem; + font-weight: 700; + height: 3.8rem; + letter-spacing: .1rem; + line-height: 3.8rem; + padding: 0 3.0rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; } -address, caption, cite, code, dfn, em, th, var { - font-style: normal; - font-weight: 400; +.button:focus, .button:hover, +button:focus, +button:hover, +input[type='button']:focus, +input[type='button']:hover, +input[type='reset']:focus, +input[type='reset']:hover, +input[type='submit']:focus, +input[type='submit']:hover { + background-color: #1abc9c; + border-color: #1abc9c; + color: #fff; + outline: 0; } -/* 去掉列表前的标识, li 会继承,大部分网站通常用列表来很多内容,所以应该当去 */ -ul, ol { - list-style: none; +.button[disabled], +button[disabled], +input[type='button'][disabled], +input[type='reset'][disabled], +input[type='submit'][disabled] { + cursor: default; + opacity: .5; } -/* 对齐是排版最重要的因素, 别让什么都居中 */ -caption, th { - text-align: left; +.button[disabled]:focus, .button[disabled]:hover, +button[disabled]:focus, +button[disabled]:hover, +input[type='button'][disabled]:focus, +input[type='button'][disabled]:hover, +input[type='reset'][disabled]:focus, +input[type='reset'][disabled]:hover, +input[type='submit'][disabled]:focus, +input[type='submit'][disabled]:hover { + background-color: #384452; + border-color: #384452; } -q:before, q:after { - content: ''; +.button.button-outline, +button.button-outline, +input[type='button'].button-outline, +input[type='reset'].button-outline, +input[type='submit'].button-outline { + background-color: transparent; + color: #384452; } -/* 统一上标和下标 */ -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 { +.button.button-outline:focus, .button.button-outline:hover, +button.button-outline:focus, +button.button-outline:hover, +input[type='button'].button-outline:focus, +input[type='button'].button-outline:hover, +input[type='reset'].button-outline:focus, +input[type='reset'].button-outline:hover, +input[type='submit'].button-outline:focus, +input[type='submit'].button-outline:hover { + background-color: transparent; + border-color: #1abc9c; color: #1abc9c; } -a:hover { - text-decoration: underline; +.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover, +button.button-outline[disabled]:focus, +button.button-outline[disabled]:hover, +input[type='button'].button-outline[disabled]:focus, +input[type='button'].button-outline[disabled]:hover, +input[type='reset'].button-outline[disabled]:focus, +input[type='reset'].button-outline[disabled]:hover, +input[type='submit'].button-outline[disabled]:focus, +input[type='submit'].button-outline[disabled]:hover { + border-color: inherit; + color: #384452; } -a { - border-bottom: 1px solid #1abc9c; +.button.button-clear, +button.button-clear, +input[type='button'].button-clear, +input[type='reset'].button-clear, +input[type='submit'].button-clear { + background-color: transparent; + border-color: transparent; + color: #384452; } -a:hover { - border-bottom-color: #555; - color: #555; - text-decoration: none; +.button.button-clear:focus, .button.button-clear:hover, +button.button-clear:focus, +button.button-clear:hover, +input[type='button'].button-clear:focus, +input[type='button'].button-clear:hover, +input[type='reset'].button-clear:focus, +input[type='reset'].button-clear:hover, +input[type='submit'].button-clear:focus, +input[type='submit'].button-clear:hover { + background-color: transparent; + border-color: transparent; + color: #1abc9c; } -/* 默认不显示下划线,保持页面简洁 */ -ins, a { - text-decoration: none; +.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover, +button.button-clear[disabled]:focus, +button.button-clear[disabled]:hover, +input[type='button'].button-clear[disabled]:focus, +input[type='button'].button-clear[disabled]:hover, +input[type='reset'].button-clear[disabled]:focus, +input[type='reset'].button-clear[disabled]:hover, +input[type='submit'].button-clear[disabled]:focus, +input[type='submit'].button-clear[disabled]:hover { + color: #384452; } -/* 专名号:虽然 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; +code { + background: #eef1f5; + border-radius: .4rem; + font-size: 86%; + margin: 0 .2rem; + padding: .2rem .5rem; + white-space: nowrap; } pre { - background: #f8f8f8; - border: 1px solid #ddd; - padding: 1em 1.5em; - display: block; - -webkit-overflow-scrolling: touch; + background: #eef1f5; + border-left: 0.3rem solid #1abc9c; + overflow-y: hidden; } -/* 一致化 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; -} - -/* 保证块/段落之间的空白隔行 */ -p, pre, ul, ol, dl, form, hr, table, -.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 值要相应做优化 */ -h1, h2, h3, h4, h5, 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; -} - -h1, .typo-h1 { - font-size: 2em; -} - -h2, .typo-h2 { - font-size: 1.8em; -} - -h3, .typo-h3 { - font-size: 1.6em; -} - -h4, .typo-h4 { - font-size: 1.4em; -} - -h5, h6, .typo-h5, .typo-h6 { - font-size: 1.2em; -} - -/* 在文章中,应该还原 ul 和 ol 的样式 */ -ul, .typo-ul { - margin-left: 1.3em; - list-style: disc; -} - -ol, .typo-ol { - list-style: decimal; - margin-left: 1.9em; -} - -li ul, li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { - margin-bottom: 0.8em; - margin-left: 2em; -} - -li ul, .typo-ul ul, .typo-ol ul { - list-style: circle; -} - -/* 同 ul/ol,在文章中应用 table 基本格式 */ -table th, table td, .typo-table th, .typo-table td, table caption { - border: 1px solid #ddd; - padding: 0.5em 1em; - color: #666; -} - -table th, .typo-table th { - background: #fbfbfb; -} - -table thead th, .typo-table thead th { - background: #f1f1f1; -} - -table caption { - border-bottom: none; -} - -/* 去除 webkit 中 input 和 textarea 的默认样式 */ -.typo-input, .typo-textarea { - -webkit-appearance: none; +pre > code { border-radius: 0; + display: block; + padding: 1rem 1.5rem; + white-space: pre; } -.typo-em, em, legend, caption { - color: #000; - font-weight: inherit; +hr { + border: 0; + border-top: 0.1rem solid #384452; + margin: 3.0rem 0; } -/* 着重号,只能在少量(少于100个字符)且全是全角字符的情况下使用 */ -.typo-em { - position: relative; -} - -.typo-em:after { - position: absolute; - top: 0.65em; - left: 0; +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'], +input[type='url'], +input:not([type]), +textarea, +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: 0.1rem solid #d1d8df; + border-radius: .4rem; + box-shadow: none; + box-sizing: inherit; + height: 3.8rem; + padding: .6rem 1.0rem; width: 100%; - overflow: hidden; - white-space: nowrap; - content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; } -/* Responsive images */ +input[type='email']:focus, +input[type='number']:focus, +input[type='password']:focus, +input[type='search']:focus, +input[type='tel']:focus, +input[type='text']:focus, +input[type='url']:focus, +input:not([type]):focus, +textarea:focus, +select:focus { + border-color: #1abc9c; + outline: 0; +} + +select { + background: url('data:image/svg+xml;utf8,') center right no-repeat; + padding-right: 3.0rem; +} + +select:focus { + background-image: url('data:image/svg+xml;utf8,'); +} + +textarea { + min-height: 6.5rem; +} + +label, +legend { + display: block; + font-size: 1.6rem; + font-weight: 700; + margin-bottom: .5rem; +} + +fieldset { + border-width: 0; + padding: 0; +} + +input[type='checkbox'], +input[type='radio'] { + display: inline; +} + +.label-inline { + display: inline-block; + font-weight: normal; + margin-left: .5rem; +} + +.container { + margin: 0 auto; + max-width: 112.0rem; + padding: 0 2.0rem; + position: relative; + width: 100%; +} + +.row { + display: flex; + flex-direction: column; + padding: 0; + width: 100%; +} + +.row.row-no-padding { + padding: 0; +} + +.row.row-no-padding > .column { + padding: 0; +} + +.row.row-wrap { + flex-wrap: wrap; +} + +.row.row-top { + align-items: flex-start; +} + +.row.row-bottom { + align-items: flex-end; +} + +.row.row-center { + align-items: center; +} + +.row.row-stretch { + align-items: stretch; +} + +.row.row-baseline { + align-items: baseline; +} + +.row .column { + display: block; + flex: 1 1 auto; + margin-left: 0; + max-width: 100%; + width: 100%; +} + +.row .column.column-offset-10 { + margin-left: 10%; +} + +.row .column.column-offset-20 { + margin-left: 20%; +} + +.row .column.column-offset-25 { + margin-left: 25%; +} + +.row .column.column-offset-33, .row .column.column-offset-34 { + margin-left: 33.3333%; +} + +.row .column.column-offset-50 { + margin-left: 50%; +} + +.row .column.column-offset-66, .row .column.column-offset-67 { + margin-left: 66.6666%; +} + +.row .column.column-offset-75 { + margin-left: 75%; +} + +.row .column.column-offset-80 { + margin-left: 80%; +} + +.row .column.column-offset-90 { + margin-left: 90%; +} + +.row .column.column-10 { + flex: 0 0 10%; + max-width: 10%; +} + +.row .column.column-20 { + flex: 0 0 20%; + max-width: 20%; +} + +.row .column.column-25 { + flex: 0 0 25%; + max-width: 25%; +} + +.row .column.column-33, .row .column.column-34 { + flex: 0 0 33.3333%; + max-width: 33.3333%; +} + +.row .column.column-40 { + flex: 0 0 40%; + max-width: 40%; +} + +.row .column.column-50 { + flex: 0 0 50%; + max-width: 50%; +} + +.row .column.column-60 { + flex: 0 0 60%; + max-width: 60%; +} + +.row .column.column-66, .row .column.column-67 { + flex: 0 0 66.6666%; + max-width: 66.6666%; +} + +.row .column.column-75 { + flex: 0 0 75%; + max-width: 75%; +} + +.row .column.column-80 { + flex: 0 0 80%; + max-width: 80%; +} + +.row .column.column-90 { + flex: 0 0 90%; + max-width: 90%; +} + +.row .column .column-top { + align-self: flex-start; +} + +.row .column .column-bottom { + align-self: flex-end; +} + +.row .column .column-center { + -ms-grid-row-align: center; + align-self: center; +} + +@media (min-width: 40rem) { + .row { + flex-direction: row; + margin-left: -1.0rem; + width: calc(100% + 2.0rem); + } + .row .column { + margin-bottom: inherit; + padding: 0 1.0rem; + } +} + img { max-width: 100%; } +a { + color: #1abc9c; + text-decoration: none; +} + +a:focus, a:hover { + color: #23B7F3; +} + +dl, +ol, +ul { + list-style: none; + margin-top: 0; + padding-left: 0; +} + +dl dl, +dl ol, +dl ul, +ol dl, +ol ol, +ol ul, +ul dl, +ul ol, +ul ul { + font-size: 90%; + margin: 1.5rem 0 1.5rem 3.0rem; +} + +ol { + list-style: decimal inside; +} + +ul { + list-style: circle inside; +} + +.button, +button, +dd, +dt, +li { + margin-bottom: 1.0rem; +} + +fieldset, +input, +select, +textarea { + margin-bottom: 1.5rem; +} + +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + margin-bottom: 2.5rem; +} + +table { + border-spacing: 0; + width: 100%; +} + +table thead th, +thead th { + border-top: 0.1rem solid #d1d8df; + background: #fdfdfd; +} + +tbody tr:nth-child(even) { + background: #fdfdfd; +} + +tbody tr:nth-child(odd) { + background: #eef1f5; +} + +td, +th { + border-bottom: 0.1rem solid #d1d8df; + padding: 1.2rem 1.5rem; + text-align: left; +} + +td:first-child, +th:first-child { + padding-left: 0; +} + +td:last-child, +th:last-child { + padding-right: 0; +} + +u { + text-decoration: none; + border-bottom: 1px dashed; +} + +a { + text-decoration: none; +} + +u { + background: #ffff3a; +} + +b, +strong { + font-weight: bold; +} + +p { + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; + letter-spacing: -.1rem; + margin-bottom: 2.0rem; + margin-top: 0; +} + +h1 { + font-size: 4.0rem; + line-height: 1.2; +} + +h2 { + font-size: 3.2rem; + line-height: 1.25; +} + +h3 { + font-size: 2.8rem; + line-height: 1.3; +} + +h4 { + font-size: 2.4rem; + letter-spacing: -.08rem; + line-height: 1.35; +} + +h5 { + font-size: 2.0rem; + letter-spacing: -.05rem; + line-height: 1.5; +} + +h6 { + font-size: 1.6rem; + letter-spacing: 0; + line-height: 1.4; +} + +.clearfix:after { + clear: both; + content: ' '; + display: table; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +}