refactor: add 2 heading styles 标题风格

MOxFIVE · May 18, 2016 · f9fbf55 · f9fbf55 · MOxFIVE · May 18, 2016
1 parent ed4dc37
commit f9fbf55
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 39 deletions.
diff --git a/_config.yml b/_config.yml
@@ -124,6 +124,10 @@ blockquote_style:
   blockquote: 1  # Value: 0 - 7 可选
   # 自定义文章「引用部分」的样式
 
+# Headings Style | 标题风格
+## 0-Yelee, 1-Yilia, 2-GitHub
+heading_style: 0 # Value: 0 - 2
+
 ## List style type (ul) | 无序列表项标记样式
 list_style: 0  # value: 0 - 12 可选
 

diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -156,45 +156,6 @@
   em {
     font-style: italic;
   }
-  h1{
-    margin-top: 30px;
-  }
-  h2{
-    margin: .5em auto;
-    color: #9c9;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #ddd;
-    &:hover {
-      color:#88acdb;
-    };
-    text-align: center;
-    &::before, &::after {
-    content:" —— ";
-    font-family: Arial;
-    };
-  }
-  h3 {
-    margin: .5em auto;
-    color: #438aac;
-    background: rgba(243, 248, 253, .6);
-    border: 1px solid #d2e8fa;
-    padding: 0.2em 0.6em;
-    &:hover a {
-      text-decoration: underline;
-    };
-    &::after {
-      content: " >";
-    };
-  }
-  h4,h5,h6{
-    margin-top: 20px;
-    color: #574C4C;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #ddd;
-    &:hover {
-      color:#88acdb;
-    };
-  }
   video{
     max-width: 100%;
   }
@@ -251,6 +212,7 @@
     }
   }
   @import "customise/list"
+  @import "customise/heading"
   figure{
     table {
       border: none;

diff --git a/source/css/_partial/customise/heading.styl b/source/css/_partial/customise/heading.styl
@@ -0,0 +1,66 @@
+heading_style = hexo-config("heading_style")
+all_heading = "h1, h2, h3, h4, h5, h6"
+
+if !heading_style
+    h1
+        margin-top 30px
+    h2
+        margin .5em auto
+        color #9c9
+        padding-bottom 5px
+        border-bottom 1px solid #ddd
+        text-align center
+        &:hover
+            color #88acdb
+        &::before, &::after
+            content " —— "
+            font-family Arial
+    h3
+        margin .5em auto
+        color #438aac
+        background rgba(243,248,253,0.6)
+        border 1px solid #d2e8fa
+        padding .2em .6em
+        &:hover a
+            text-decoration underline
+        &::after
+            content " >"
+    h4, h5, h6
+        margin-top 20px
+        color #574c4c
+        padding-bottom 5px
+        border-bottom 1px solid #ddd
+
+if heading_style == 1
+    {all_heading}
+        margin-top 20px
+        color #574C4C
+        padding-bottom 5px
+        border-bottom 1px solid #ddd
+    h1
+        margin-top 30px
+
+if heading_style == 2
+    {all_heading}
+        margin-top 1em
+        margin-bottom 16px
+        font-weight bold
+        line-height 1.4
+        color #333
+        font-family "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+    h1, h2
+        padding-bottom .3em
+        border-bottom 1px solid #eee
+
+    heading = 2.25 1.2, 1.75 1.225, 1.5 1.43, 1.25 1.1
+    for x, i in heading
+        h{i+1}
+            font-size x[0]rem
+            line-height x[1]
+
+    h1
+        margin .67em 0
+    h5, h6
+        font-size 1rem
+    h6
+        color #777