diff options
Diffstat (limited to 'build/css/theme.css')
| -rw-r--r-- | build/css/theme.css | 391 |
1 files changed, 391 insertions, 0 deletions
diff --git a/build/css/theme.css b/build/css/theme.css new file mode 100644 index 00000000..6735e8c0 --- /dev/null +++ b/build/css/theme.css @@ -0,0 +1,391 @@ +/*** Webfonts ***/ + +/* icon font from fontello */ +@font-face { + font-family: 'fontello'; + src: url('../fonts/fontello.eot'); + src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'), + url('../fonts/fontello.woff') format('woff'), + url('../fonts/fontello.ttf') format('truetype'), + url('../fonts/fontello.svg#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} + +/*** Main theme ***/ + +body { + color: #000; + font-family: Times, "Times New Roman", + /* Chinese fonts */ + "Kaiti SC", /* macOS */ + "Songti SC", /* macOS 10.12+ where Kaiti SC isn't installed by default + but is instead available as a downloadable component */ + KaiTi, /* Windows (simkai.ttf, not always included despite + https://www.microsoft.com/typography/fonts/product.aspx?PID=161 + https://www.microsoft.com/typography/fonts/product.aspx?PID=164) */ + "Microsoft YaHei", /* Windows */ + "Heiti SC", /* iOS */ + serif; + font-size: 16px; + -webkit-font-smoothing: antialiased; + margin: 100px 0; +} + +@media +only screen and (-webkit-min-device-pixel-ratio: 1.25), +only screen and ( min-device-pixel-ratio: 1.25), +only screen and ( min-resolution: 200dpi), +only screen and ( min-resolution: 1.25dppx) { + -webkit-font-smoothing: subpixel-antialiased; +} + +#archival-notice { + position: absolute; + top: 30px; + left: 0; + right: 0; + margin: 0 auto; + text-align: center; + color: red; +} + +.nav { + position: fixed; + left: 5%; + top: 90px; + height: 150px; + width: 100px; + text-align: center; +} + +.nav-icon { + display: block; + margin: 2px auto; + width: 100px; + height: 100px; + border-radius: 50%; + background: #ddd; + line-height: 100px; + text-align: center; + text-decoration: none; + font-size: 0; +} + +.nav-icon:before { + content: "ZW"; + display: inline-block; + position: relative; + left: 2px; + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 35px; + font-weight: normal; + letter-spacing: 2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #fff; + transform: scale(1,0.95); + -webkit-transform: scale(1,0.95); + -moz-transform: scale(1,0.95); + -ms-transform: scale(1,0.95); + -o-transform: scale(1,0.95); +} + +.nav-title { + font-size: 17px; + font-weight: bold; + margin: 2px 0 1px 0; + text-decoration: none; +} + +.nav-title:before { + content: "dl? cmplnts?"; +} + +.nav-author { + font-size: 13px; + text-decoration: none; +} + +.nav-author:before { + content: "by Zhiming Wang"; +} + +.content, .content-separator, .footer { + width: 60%; + margin: 0 auto; +} + +hr { + border: 0; + height: 1px; + background: #888; +} + +.content-separator { + margin: 15px auto 3px auto; +} + +.content { + text-align: justify; +} + +h1 { + text-align: center; + font-size: 160%; + font-weight: bold; +} + +h2 { + text-align: center; + font-size: 125%; + font-weight: bold; +} + +.article-metadata { + text-align: center; + font-size: 100%; + font-weight: normal; + margin: 1em 0; +} + +a { + color: inherit; + word-wrap: break-word; +} + +code { + font-size: 90%; + color: #333; + font-family: Courier, monospace; + white-space: pre-wrap; + word-wrap: break-word; +} + +h1 code, h2 code { + font-size: 95%; + color: #000; +} + +pre { + overflow-x: scroll; + padding: 1em; + background: #fbfbfb; + border-left: 0.4em solid #ddd; +} + +/* Pandoc wraps pre[class*=sourceCode] in a div tag, so it is necessary to +eliminate the margins of such pre tags to avoid too much spacing.*/ +pre[class*=sourceCode] { + margin: 0; +} + +pre code { + font-size: 85%; + color: #000; + white-space: pre; + word-wrap: normal; +} + +ol { + padding-left: 20px; +} + +ul { + padding-left: 16px; +} + +blockquote { + margin: 0; + padding: 0 1em; + font-style: italic; + border-left: 0.4em solid #ddd; +} + +img { + display: block; + max-width: 100%; + margin: 5px auto; +} + +.figure { + text-align: center; +} + +.figure img { + display: inline; + margin: 0 0 5px 0; +} + +.figure .caption { + width: 80%; + margin: auto; + font-size: 90%; +} + +sup { + font-size: 11px; + margin: 0 0 0 1px; +} + +noscript { + color: #999; +} + +noscript a { + color: #999; +} + +.footnotes { + font-size: 90%; +} + +.footnotes ol { + padding-left: 1.4em; +} + +.footnotes p { + margin: 0.6em 0; +} + +.footnotes-backlink { + margin-left: 0.2em; + vertical-align: -0.2em; + color: #bbb; + text-decoration: none; +} + +.footnotes-backlink:hover { + background-color: #bbb; + color: #fff; +} + +.lfooter { + float: left; +} + +.lfooter .updated:before { + content: "Last updated: " +} + +.rfooter { + float: right; +} + +.rss-icon, .atom-icon, .cc-icon { + text-decoration: none; + position: relative; + top: 1px; +} + +.rss-icon, .atom-icon { + margin: 0 3px; +} + +.cc-icon { + margin: 0 1px; +} + +.rss-icon:before, .atom-icon:before { + content: "\e800"; + font-family: fontello; + font-size: 105%; +} + +.rss-icon:before { + display: inline-block; + transform: scale(-1,1); + -webkit-transform: scale(-1,1); +} + +.cc-icon:before { + content: "\e801"; + font-family: fontello; + font-size: 95%; +} + +/*** Wide screen ***/ + +@media screen and (min-width: 1441px) { + .content, .content-separator, .footer { + width: 50%; + } +} + +/*** Narrow screen ***/ + +@media screen and (max-width: 1023px) { + body { + margin: 40px 0 100px 0; + } + + .nav { + position: static; + width: 100%; + height: 150px; + margin: 80px 0 20px 0; + } + + .nav-icon { + width: 150px; + height: 150px; + line-height: 150px; + } + + .nav-icon:before { + font-size: 54px; + } + + .nav-title, .nav-author { + height: 0; + width: 0; + visibility: hidden; + pointer-events: none; + } + + .content, .content-separator, .footer { + width: 80%; + } +} + +/*** Ultranarrow screen ***/ + +@media screen and (max-width: 500px) { + .content, .content-separator, .footer { + width: 90%; + } + + .blog-index-yearly-index { + margin-left: 0; + } + + .blog-index-post-date { + width: 4em; + } +} + +/*** Print ***/ + +@media print { + body { + margin: 5% 0; + font-size: 12px; + } + + sup { + font-size: 0.5em; + top: -1em; + } + + pre { + -webkit-print-color-adjust: exact; + } + + .content, .content-separator, .footer { + width: 90%; + } + + .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice { + display: none; + } +} |