From 497f5cf4987a2d1fb56c5a560132fc618f1dc495 Mon Sep 17 00:00:00 2001 From: imzeuk Date: Mon, 15 Apr 2019 21:58:26 +0800 Subject: modify css --- static/css/zozo.css | 147 +++++++++++++++++++++++++++++++++------------- static/css/zozo.scss | 4 +- static/images/favicon.ico | Bin 16958 -> 15086 bytes 3 files changed, 106 insertions(+), 45 deletions(-) diff --git a/static/css/zozo.css b/static/css/zozo.css index 5e33d43..b5b1f68 100644 --- a/static/css/zozo.css +++ b/static/css/zozo.css @@ -7,7 +7,7 @@ html { 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-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-size: 16px; width: 100%; background-color: #f7f7f7; @@ -24,14 +24,14 @@ p { 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; } @@ -48,7 +48,8 @@ h6 { /*basic styles ends*/ .main { background: #ffffff; - box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + -webkit-box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); width: 800px; margin: 60px auto 0; } @@ -75,21 +76,24 @@ h6 { width: 720px; padding: 50px 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; @@ -97,37 +101,45 @@ h6 { 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; } @@ -136,9 +148,11 @@ h6 { background-color: #ffffff; margin-top: 50px; } + .post .post_title { padding-bottom: 16px; } + .post .post_title h2 { text-transform: uppercase; letter-spacing: 1px; @@ -148,6 +162,7 @@ h6 { color: #1f1f1f; margin: 0 0 6px 0; } + .post .post_title a { text-decoration: none; letter-spacing: 1px; @@ -155,59 +170,74 @@ h6 { 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; } @@ -216,11 +246,13 @@ h6 { 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; @@ -229,6 +261,7 @@ h6 { color: #c5c5c5; font-size: 12px; } + .page_tags ul { margin: 0; padding: 0; @@ -242,24 +275,30 @@ h6 { padding: 40px 0; margin: 0 auto; } + .footer a { color: #a6a6a6; margin: 0 12px; } + .footer a:hover { color: #1f1f1f; } + .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; @@ -274,25 +313,32 @@ h6 { padding: 0; float: right; } + .site_nav ul { width: 12em; } + .site_nav li, .site_nav a { position: relative; } + .site_nav li { float: left; } + .site_nav li span.menu_icon { margin-top: 2px; } + .site_nav li span.menu_icon i { font-size: 16px; } + .site_nav ul li { float: none; } + .site_nav a, .site_nav span.menu_icon { display: block; white-space: nowrap; @@ -306,10 +352,12 @@ h6 { 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; @@ -317,23 +365,28 @@ h6 { 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 a { display: inline-block; width: 85%; } + .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; } @@ -344,16 +397,20 @@ h6 { 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; } @@ -365,12 +422,14 @@ h6 { 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, @@ -380,18 +439,23 @@ 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 pre, .markdown code { font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; @@ -399,6 +463,7 @@ h6 { background: #f8f8f8; border: none; } + .markdown pre { margin-top: 1.2em; margin-bottom: 2.2em; @@ -408,28 +473,35 @@ h6 { 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; @@ -437,19 +509,22 @@ h6 { 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; + -webkit-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; @@ -462,6 +537,7 @@ h6 { margin-left: -50px; position: absolute; } + .markdown strong, .markdown b, .markdown em { @@ -469,9 +545,11 @@ h6 { background-color: #fcfcf0; font-weight: normal; } + .markdown .fancybox { text-align: center; } + .markdown img { max-width: 90%; height: auto; @@ -489,17 +567,22 @@ a.back_to_top { line-height: 36px; font-size: 18px; text-align: center; - transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: background-color; 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; } @@ -509,37 +592,34 @@ a.back_to_top:hover span { display: none !important; } } + @media screen and (min-width: 1600px) { .main { width: 1000px; } - .nav_container, -.header, -.content { + .header, + .content { width: 820px; } } + @media screen and (max-width: 900px) { .main { width: 95%; margin-top: 20px; } - .nav_container, -.header, -.content { + .header, + .content { width: 90%; } - .post_page { padding-top: 0; } - .footer a { margin: 0 6px; } - .post { margin-top: 40px; font-size: 14px; @@ -547,11 +627,11 @@ a.back_to_top:hover span { .post .post_title a { font-size: 1.3rem; } - .post_footer { padding-bottom: 30px; } } + /*animation starts*/ @-webkit-keyframes fadeInDown { 0% { @@ -563,36 +643,19 @@ a.back_to_top:hover span { -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); + -webkit-transform: translateY(-3px); + transform: translateY(-3px); } 100% { opacity: 1; - transform: translateY(0); + -webkit-transform: translateY(0); + transform: translateY(0); } } -/*animation ends*/ -/*# sourceMappingURL=zozo.css.map */ +/*animation ends*/ +/*# sourceMappingURL=zozo.css.map */ \ No newline at end of file diff --git a/static/css/zozo.scss b/static/css/zozo.scss index 7f130e9..ee15204 100644 --- a/static/css/zozo.scss +++ b/static/css/zozo.scss @@ -9,9 +9,7 @@ html { 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-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-size: 16px; width: 100%; background-color: #f7f7f7; diff --git a/static/images/favicon.ico b/static/images/favicon.ico index fba1749..572edeb 100644 Binary files a/static/images/favicon.ico and b/static/images/favicon.ico differ -- cgit v1.2.3