Update: 优化 CSS 样式

layout/about.ejs

@@ -1,12 +1,12 @@
 <% if(page.title == 'about') { %>
     <div class="about-container">
-        <div class="about-content">
+        <div class="about-content markdown">
             <%- page.content %>
         </div>
         <div class="about-comments">
-            <%if (page.comments) {%>
+            <% if (page.comments) { %>
                 <%- partial('common/valine') %>
-            <%}%>
+            <% } %>
         </div>
     </div>
 <% } %>

layout/article-post.ejs

@@ -8,7 +8,7 @@
             <%- partial('common/article-meta-info', {articleObject: page, index: true}) %>
         </div>
 
-        <div class="article-content">
+        <div class="article-content markdown">
             <%- page.content %>
         </div>
 

source/css/layout/article-post.styl

@@ -27,30 +27,6 @@
     padding-bottom: 10px;
     border-bottom: 1px solid #f2f2f2;
 
-    a {
-      text-decoration: none;
-      letter-spacing: 1px;
-      color: #4786D6;
-    }
-
-    a:hover {
-      color: #2F69B3;
-    }
-
-    h3 {
-      color: #5F5F5F;
-      font-size: 22px;
-      font-weight: 600;
-    }
-
-    h4 {
-      color: #5F5F5F;
-      font-size: 16px;
-    }
-
-    img {
-      width: 100%;
-    }
   }
 
 

source/css/markdown.styl

@@ -0,0 +1,103 @@
+@require 'layout/variables.styl'
+
+.markdown {
+
+  blockquote {
+    border-left: 5px solid $default-font-color;
+    margin: 0;
+    padding: 0 0 0 10px;
+    background: $border-color;
+  }
+
+
+  a {
+    color: $a-hover-color;
+  }
+
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+
+  h1 {
+    color: $article-title-color;
+    font-size: 2.2em;
+    font-weight: 700;
+  }
+
+
+  h2 {
+    color: $article-title-color;
+    font-size: 2em;
+    font-weight: 650;
+  }
+
+  h3 {
+    color: $article-title-color;
+    font-size: 1.8em;
+    font-weight: 600;
+  }
+
+
+  h4 {
+    color: $article-title-color;
+    font-size: 1.6em;
+    font-weight: 550;
+  }
+
+  h5 {
+    color: $article-title-color;
+    font-size: 1.4em;
+    font-weight: 500;
+  }
+
+  h6 {
+    color: $article-title-color;
+    font-size: 1.2em;
+    font-weight: 500;
+  }
+
+
+  img {
+    padding: 1px;
+    width: 100%;
+    border: 1px solid $border-color;
+  }
+
+  table {
+
+    border: solid $border-color;
+    border-width: 1px 0 0 1px;
+
+    thead {
+
+      background: $border-color;
+
+      tr {
+        th {
+          margin: 0;
+          padding: 4px;
+          border: solid $border-color;
+          border-width: 0 1px 1px 0;
+
+        }
+      }
+    }
+
+    tbody {
+
+      tr {
+        margin: 0;
+        td {
+          padding: 4px;
+          border: solid $border-color;
+          border-width: 0 1px 1px 0;
+        }
+      }
+
+    }
+  }
+
+}
+

source/css/style.styl

@@ -16,3 +16,4 @@
 @import "layout/common/valine.styl"
 @import "highlight"
 @import "layout/variables.styl"
+@import "markdown.styl"