modify css

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
--- a/static/images/favicon.ico
+++ b/static/images/favicon.ico