From e002d09d2b6b2317fec6caa8836b20e6709c5da3 Mon Sep 17 00:00:00 2001 From: Jinwei Zhao Date: Mon, 4 Apr 2016 14:00:39 +0800 Subject: jinwei.me --- .../jinweiclarkchao.github.io/assets/style.css | 360 +++++++++++++++++++++ 1 file changed, 360 insertions(+) create mode 100644 deprecated/jinweiclarkchao.github.io/assets/style.css (limited to 'deprecated/jinweiclarkchao.github.io/assets/style.css') diff --git a/deprecated/jinweiclarkchao.github.io/assets/style.css b/deprecated/jinweiclarkchao.github.io/assets/style.css new file mode 100644 index 0000000..d893c23 --- /dev/null +++ b/deprecated/jinweiclarkchao.github.io/assets/style.css @@ -0,0 +1,360 @@ +@charset "UTF-8"; +body { + line-height: 1.65em; + font-family: Merriweather, serif; + font-weight: 400; + font-size: 16px; + background-color: #fff; } + +a { + color: #8f65ca; + text-decoration: none; } + +.site-header { + text-align: center; + font-size: 10px; + padding: 30px 0; } + .site-header a { + padding-bottom: 4px; + color: #555; + letter-spacing: 2px; + margin-right: 30px; + white-space: nowrap; + font-family: helvetica, sans-serif; } + .site-header a.active { + opacity: .2; + border-bottom: 1px solid #333; } + .site-header a:last-child { + margin-right: 0; } + +.instagram { + text-align: center; + margin-bottom: 20px; + height: 140px; } + .instagram .img { + padding: 0; + transition: all 1s; + opacity: 0; + display: inline-block; + background: #eee; + margin-right: 20px; } + .instagram .img:hover { + box-shadow: inset 0 0 5px #000; } + .instagram .img, .instagram img { + border-radius: 200px; + width: 140px; + height: 140px; } + +.wrapper { + max-width: 700px; + width: 100%; + margin: auto; } + +.posts { + list-style: none; + padding-left: 0; + margin-top: 0; } + .posts a { + color: #333; } + .posts .post { + margin-bottom: 30px; } + +.content { + padding: 35px; } + +.meta { + font-size: 9px; } + .meta, .meta * { + color: #a0a0a0; } + +.post-title { + font-size: 20px; } + +.post-header { + text-align: center; + border-bottom: 1px solid #eee; + padding-bottom: 30px; + margin-bottom: 30px; + position: relative; } + .post-header:after { + content: ""; + display: block; + width: 6px; + height: 6px; + background: #eee; + position: absolute; + border: 6px solid #fff; + left: 50%; + border-radius: 15px; + margin-left: -9px; + bottom: -9px; } + +article img { + max-width: 100%; } +article h3 { + border-bottom: 1px solid #777; + line-height: 0.9em; + display: inline-block; + text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff; } + +.a-cat, .a-house, .a-person, .a-page { + display: inline-block; + background: #333; + vertical-align: middle; + margin-bottom: 2px; + position: relative; } + +.a-cat { + background: #333; + height: 13px; + width: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + box-shadow: 0 -2px #333; } + .a-cat:before, .a-cat:after { + content: ''; + display: block; } + .a-cat:before { + width: 10px; + height: 10px; + background: #fff; + -webkit-transform: rotate(45deg) skew(-20deg, -20deg); + -moz-transform: rotate(45deg) skew(-20deg, -20deg); + transform: rotate(45deg) skew(-20deg, -20deg); + margin-top: -6px; } + .a-cat:after { + height: 1px; + width: 16px; + margin-left: -3px; + margin-top: 2px; + box-shadow: 0 2px 0 #333; + background: #333; } + +.a-house { + width: 10px; + height: 8px; + border-radius: 2px; } + .a-house:before { + top: -13px; + left: -3px; + position: absolute; + content: ''; + display: block; + border: 8px solid transparent; + border-bottom: 6px solid #333; } + +.a-page { + width: 11px; + height: 13px; + border-radius: 2px; } + .a-page:before, .a-page:after { + content: ''; + display: block; } + .a-page:before { + position: absolute; + border: 2px solid transparent; + border-top-color: #fff; + border-right-color: #fff; + width: 0; + right: 0; } + .a-page:after { + height: 1px; + width: 7px; + margin: auto; + margin-top: 4px; + box-shadow: 0 2px 0 #fff, 0 4px 0 #fff, 0 6px 0 #fff; + background: #fff; } + +.a-person { + width: 13px; + height: 13px; + border-radius: 15px; + overflow: hidden; } + .a-person:before, .a-person:after { + content: ''; + display: block; + position: absolute; + background: #fff; } + .a-person:before { + width: 5px; + height: 5px; + border-radius: 10px; + left: 4px; + top: 3px; } + .a-person:after { + top: 8px; + left: 3px; + height: 4px; + width: 7px; + border-radius: 10px; } + +.site-footer { + font-size: 11px; + padding: 30px 30px 50px; + text-align: center; } + +.pagination { + position: relative; + margin: auto; + text-align: center; + opacity: .4; + transition: opacity .4s; } + .pagination:hover { + opacity: 1; } + +.page-nav { + display: inline-block; + height: 9px; + width: 10px; + background: #333; + font-size: 0; + border-radius: 3px; + top: -30px; + position: absolute; } + .page-nav:before, .page-nav:after { + content: ''; + display: block; + position: absolute; } + .page-nav:before { + width: 6px; + left: -3px; + height: 2px; + border-radius: 4px; + background: #333; } + .page-nav:after { + height: 1px; + top: 2px; + width: 3px; + margin: auto; + box-shadow: 0 2px 0 #fff, 0 4px 0 #fff; + background: #fff; } + +.previous { + left: -60px; } + +.next { + right: -60px; + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + transform: scale(-1, 1); } + +blockquote { + margin: 0; + padding: 30px; + position: relative; + color: #555; } + blockquote:before, blockquote:after { + font-family: georgia, serif; + font-size: 50px; + color: #e0e0e0; + position: absolute; } + blockquote:before { + line-height: 1em; + left: 0; + top: 0; + content: '“'; } + blockquote:after { + right: 0; + bottom: 0; + content: '”'; } + blockquote p:first-child { + margin-top: 0; } + blockquote p:last-child { + margin-bottom: 0; } + +hr { + border: 0; + border-top: 1px solid #eee; + margin: 30px 0; + text-align: center; } + hr:before { + content: '///'; + line-height: 1em; + margin-top: -6px; + font-size: 10px; + color: #ddd; + padding: 1px 3px; + background: #fff; + display: inline-block; } + +.fork-me { + padding: 5px 35px 3px 10px; + color: #fff; + text-align: center; + background: #333; + position: absolute; + right: 0; + top: 30px; + font-size: 12px; + overflow: hidden; + transition: all .3s; } + .fork-me:before, .fork-me:after { + transition: all .3s; + content: ''; + display: block; + position: absolute; } + .fork-me:hover:before, .fork-me:hover:after { + right: 15px; } + .fork-me:before { + width: 10px; + height: 7px; + border: 1px solid #eee; + border-left: 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + top: 12px; + right: 10px; } + .fork-me:after { + height: 1px; + width: 47px; + background: #eee; + top: 12px; + right: 10px; + margin-top: 4px; + margin-right: -36px; } + +.about { + text-align: center; } + +.links { + font-size: 0; } + .links a { + text-transform: uppercase; + font-size: 12px; + text-align: center; + padding: 3px 0; + display: inline-block; + color: #333; + width: 20%; + position: relative; } + .links a:before { + content: ''; + position: absolute; + left: 50%; + margin-left: -3px; + margin-top: -25px; + transition: .4s; + height: 3px; + width: 3px; + border: 3px solid transparent; + -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); + -moz-transform: rotate(-45deg) skew(-10deg, -10deg); + transform: rotate(-45deg) skew(-10deg, -10deg); } + .links a:hover:before { + margin-top: -15px; + border-bottom-color: #d8badc; + border-left-color: #d8badc; } + +@media (max-width: 480px) { + .links a { + width: auto; + height: 50px; + margin-right: 70%; } + .links a:before { + -webkit-transform: rotate(-135deg) skew(-10deg, -10deg); + -moz-transform: rotate(-135deg) skew(-10deg, -10deg); + transform: rotate(-135deg) skew(-10deg, -10deg); + left: -15px; + margin-top: 6px !important; } } + +/*# sourceMappingURL=style.css.map */ -- cgit v1.2.3