diff options
Diffstat (limited to 'static/css/zozo.css')
-rw-r--r-- | static/css/zozo.css | 614 |
1 files changed, 614 insertions, 0 deletions
diff --git a/static/css/zozo.css b/static/css/zozo.css new file mode 100644 index 0000000..06f42c2 --- /dev/null +++ b/static/css/zozo.css @@ -0,0 +1,614 @@ +@charset "UTF-8"; +/*basic styles starts*/ +html { + background-color: #f7f7f7; + -webkit-font-smoothing: antialiased; +} + +body { + color: #333333; + font-family: "source-han-sans-simplified-c", "PingFang SC", "Hiragino Sans GB", "PingHei", "Open Sans", sans-serif, Helvetica Neue, "Work Sans", "Microsoft YaHei", SimSun; + font-size: 16px; + width: 100%; + background-color: #f7f7f7; + margin: 0; + padding: 0; +} + +p { + line-height: 1.9em; + font-weight: 400; + margin: 0; +} + +a { + text-decoration: none; +} +a:link, a:visited { + opacity: 1; + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + -o-transition: all 0.15s linear; + transition: all 0.15s linear; + color: #424242; +} +a:hover, a:active { + color: #555555; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-rendering: optimizeLegibility; +} + +/*basic styles ends*/ +.main { + background: #ffffff; + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + width: 800px; + margin: 60px auto 0; +} + +.content { + width: 720px; + padding: 0 20px; + height: auto; + margin: 0 auto; +} + +.list_with_title .container { + width: 720px; + margin: 0 auto; +} + +.header { + width: 720px; + padding: 100px 0 140px 0; + margin: 0 auto; + -webkit-background-size: cover; + background-size: cover; +} +.header .site_title_container { + padding: 0 0; +} +.header .site_title_container h1 { + line-height: 1; + margin: 0; +} +.header .site_title_container a { + text-decoration: none; + font-weight: bold; + float: left; +} +.header .site_title_container .site_title a { + font-size: 28px; + width: 65px; + letter-spacing: 2px; + line-height: 1.2; + color: #000000; +} +.header .site_title_container .site_title a span { + display: none; +} +.header .site_title_container .site_title a:hover { + color: #666666; +} +.header .site_title_container .description { + font-size: 14px; + color: #565654; + float: right; +} +.header .site_title_container .description .sub_title { + font-weight: normal !important; + float: none !important; + text-align: right; +} +.header .my_socials { + list-style: none; + font-size: 14px; + float: right; + margin: 5px 0; +} +.header .my_socials i { + margin-left: 10px; +} +.header .my_socials a { + color: #5f5f5f; + font-size: 12px; + float: none; + cursor: pointer; +} +.header .my_socials a:hover { + color: #000000; +} + +.post { + background-color: #ffffff; + margin-top: 50px; +} +.post .post_title { + padding-bottom: 16px; +} +.post .post_title h2 { + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1.4rem; + line-height: 1; + font-weight: 600; + color: #1f1f1f; + margin: 0 0 6px 0; +} +.post .post_title a { + text-decoration: none; + letter-spacing: 1px; + color: #1f1f1f; + font-size: 1.4rem; + line-height: 28px; +} +.post .post_title span { + color: rgba(0, 0, 0, 0.44); + font-size: 14px; +} +.post .post_title span.date { + font-size: 12px; +} +.post .post_detail_title h2 { + font-size: 1.5rem; + font-weight: bold; +} +.post .list p { + padding-bottom: 0 !important; +} +.post .post_content { + word-break: normal; +} +.post .post_content p { + line-height: 2em; + letter-spacing: 0.2px; +} +.post .post_content a { + text-decoration: none; + letter-spacing: 1px; + color: #e42b2b; +} +.post .post_content a:hover { + color: #8e0000; +} +.post .post_footer { + padding: 20px 0 40px 0; + border-bottom: 1px solid #f3f3f3; +} +.post .post_footer .meta { + max-width: 100%; + height: 25px; + color: #bbbbbb; +} +.post .post_footer .meta .info { + float: left; + font-size: 11px; +} +.post .post_footer .meta .info .date { + margin-right: 10px; +} +.post .post_footer .meta .field { + margin-right: 10px; +} +.post .post_footer .meta .tags a { + text-decoration: none; + color: #bbbbbb; + padding-right: 6px; +} +.post .post_footer .meta .tags a:hover { + color: #1f1f1f; +} + +.page_tags { + text-align: center; + margin-top: 50px; +} +.page_tags ul li { + margin: 10px 15px; + display: inline-block; + font-size: 1em; +} +.page_tags .terms_count { + display: inline-block; + position: relative; + top: -8px; + right: -2px; + color: #c5c5c5; + font-size: 12px; +} +.page_tags ul { + margin: 0; + padding: 0; +} + +.footer { + clear: both; + max-width: 780px; + text-align: center; + font-size: 12px; + padding: 60px 0px; + margin: 0 auto; +} +.footer a { + color: #a6a6a6; + margin: 0 12px; +} +.footer a:hover { + color: #1f1f1f; +} +.footer .nav_container .site_nav_wrap { + text-align: center; +} +.footer .nav_container .site_nav { + display: inline-block; + float: none; +} +.footer .nav_container .site_nav a { + font-size: 13px; + color: #666666; +} +.footer .nav_container .site_nav a.current { + color: #222222; +} +.footer .powered_by { + margin: 0; + font-size: 11px; +} +.footer .powered_by a { + color: #cccccc; + margin: 0 2px; +} +.footer .powered_by a:hover { + color: #1f1f1f; +} +.footer .footer_slogan { + padding-top: 25px; + padding-bottom: 10px; + color: #000000; + font-size: 16px; + letter-spacing: 1px; +} + +.nav { + width: 100%; + text-align: right; + position: relative; + -webkit-font-smoothing: antialiased; +} +.nav a { + text-decoration: none; +} + +.site_nav { + list-style: none; + margin: 0; + padding: 0; +} +.site_nav ul { + width: 12em; +} +.site_nav li, +.site_nav a { + position: relative; +} +.site_nav li { + float: left; +} +.site_nav ul li, .site_nav.sm-rtl ul li, .site_nav.sm-vertical li { + float: none; +} +.site_nav a { + display: block; + white-space: nowrap; + padding: 12px; +} + +@media screen and (max-width: 768px) { + .nav { + display: block; + } + + .footer .nav_container .site_nav_wrap { + /*text-align: left;*/ + } +} +/*for archive*/ +.list_with_title { + font-size: 14px; + margin: 0; + padding: 0; +} +.list_with_title li { + list-style-type: none; + padding: 0; +} +.list_with_title .listing_title { + font-size: 1.4rem; + color: #1f1f1f; + font-weight: bold; + padding-top: 10px; + line-height: 2.2em; +} +.list_with_title .listing { + margin: 0 0 50px 0; + padding: 0; + line-height: 2.1; +} +.list_with_title .listing .listing_post { + padding-bottom: 5px; +} +.list_with_title .listing .listing_post .post_time { + float: right; + color: #c5c5c5; + font-size: 14px; +} +.list_with_title .listing .listing_post a:hover { + color: #1f1f1f; +} + +.pagination { + padding: 30px 0 60px 0; + border-bottom: 1px solid #f2f2f2; + color: #666666; + font-size: 14px; +} +.pagination a { + color: #888888; + text-decoration: none; +} +.pagination a:hover { + color: #333333; +} +.pagination .pre { + float: left; +} +.pagination .next { + float: right; +} + +.markdown { + color: #555555; + line-height: 1.8em; + word-wrap: break-word; + word-break: normal; + overflow-wrap: break-word; +} +.markdown p, +.markdown ul, +.markdown ol, +.markdown dl { + margin: 0.8em 0; +} +.markdown h1, +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + margin: 2.5em 0 1.3em 0; + color: #000000; +} +.markdown h1 { + font-size: 1.35em; +} +.markdown h2 { + font-size: 1.25em; +} +.markdown h3 { + font-size: 1.15em; +} +.markdown h4 { + font-size: 1.1em; +} +.markdown p { + white-space: pre-line; +} +.markdown pre, +.markdown code { + font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; + font-size: 0.8em; + background: #f8f8f8; + border: none; +} +.markdown pre { + margin-top: 1.2em; + margin-bottom: 2.2em; + padding: 15px 20px; + display: block; + overflow: auto; + white-space: pre; + word-wrap: break-word; +} +.markdown code { + color: #666666; + padding: 4px 5px; + border-radius: 2px; + white-space: nowrap; +} +.markdown pre code { + padding: 0; + color: #555555; +} +.markdown blockquote p { + white-space: pre-line; +} +.markdown pre::-webkit-scrollbar { + height: 10px; +} +.markdown pre::-webkit-scrollbar-button { + display: none; +} +.markdown pre::-webkit-scrollbar-track { + background: white; +} +.markdown pre::-webkit-scrollbar-thumb { + min-height: 1rem; + background-color: #cccccc; + background-clip: padding-box; + border: 3px solid #fdfdfd; + border-radius: 5px; +} +.markdown pre::-webkit-scrollbar-thumb:active { + background-color: #999999; + border-width: 2px; +} +.markdown blockquote { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 2.5em 0; + padding: 0 0 0 50px; + font-style: italic; + color: #555555; + border-left: none; +} +.markdown blockquote:before { + content: "“"; + display: block; + font-family: times, sans-serif; + font-style: normal; + font-size: 48px; + color: #444444; + font-weight: bold; + line-height: 30px; + margin-left: -50px; + position: absolute; +} +.markdown strong, +.markdown b, +.markdown em { + padding: 1px 2px; + background-color: #fcfcf0; + font-weight: normal; +} +.markdown .fancybox { + text-align: center; +} +.markdown img { + max-width: 90%; + height: auto; +} + +a.back_to_top { + text-decoration: none; + position: fixed; + bottom: 40px; + right: 30px; + background: #f0f0f0; + height: 40px; + width: 40px; + border-radius: 50%; + line-height: 36px; + font-size: 18px; + text-align: center; + transition-duration: 0.5s; + transition-property: background-color; + display: none; +} +a.back_to_top span { + color: #888888; +} +a.back_to_top:hover { + cursor: pointer; + background: #dfdfdf; +} +a.back_to_top:hover span { + color: #555555; +} + +@media print, screen and (max-width: 580px) { + .back_to_top { + display: none !important; + } +} +@media screen and (min-width: 1600px) { + .main { + width: 1000px; + } + + .header, +.content { + width: 820px; + } +} +@media screen and (max-width: 900px) { + .main { + width: 95%; + margin-top: 20px; + } + + .header, +.content { + width: 90%; + } + + .post_page { + padding-top: 0; + } + + .footer a { + margin: 0 6px; + } + + .post { + margin-top: 40px; + font-size: 14px; + } + .post .post_title a { + font-size: 1.3rem; + } + + .post_footer { + padding-bottom: 30px; + } +} +/*animation starts*/ +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-3px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-3px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-3px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-3px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/*animation ends*/ + +/*# sourceMappingURL=zozo.css.map */ |