style($article): make it modular 样式模块化

MOxFIVE · Jan 17, 2016 · d0c33fb · d0c33fb
1 parent 1d6c09e
commit d0c33fb
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 122 deletions.
diff --git a/themes/Yilia/source/css/_partial/article.styl b/themes/Yilia/source/css/_partial/article.styl
@@ -140,7 +140,11 @@
   margin: -30px 0 20px 30px;
 }
 .article-entry{
-line-height: 1.65em;
+  @require "customise/blockquote"
+  @require "customise/heading"
+  @require "customise/list"
+  @require "customise/table"
+  line-height: 1.65em;
   padding:0 2em;
   a:hover {
     text-decoration: underline;
@@ -150,93 +154,9 @@ line-height: 1.65em;
     margin-top: 0.2em;
     font-size: 1em;
   }
-  li{
-    margin: 0.1em
-    font-size: 1.1em;
-  }
-  blockquote {
-  padding: .4em 20px;
-  margin-top: 10px;
-  border-left: 4px solid rgba(147, 181, 224, .4);
-  background: rgba(255,255,255,0.4);
-  p{
-    margin-top: 0;
-  }
-  blockquote {
-    border-left: none;
-  }
-}
   em {
     font-style: italic;
   }
-  ul{
-    li:before{
-      display inline-block;
-      content: "";
-      width: .4em;
-      height: .4em;
-      margin-right: .5em;
-      margin-bottom: .11em;
-      border: 1px solid lightgray;
-      border-radius: 50%;
-      background: lightgray;
-    }
-  }
-  ul,ol{
-    font-size: 14px;
-    margin: 10px 0px;  
-  }
-  li{
-    ul,ol{
-      margin-left: 30px;
-      li:before{
-        content: "";
-        background: #dedede;
-      }
-    }
-  }
-  h1{
-    margin-top: 30px;
-  }
-  h2{
-    margin: .5em auto;
-    font-weight: bold;
-    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;
-    font-weight: normal;
-    &:hover a {
-      text-decoration: underline;
-    };
-    &::after {
-      content: " >";
-    };
-  }
-  h4,h5,h6{
-    margin-top: 20px;
-    font-weight: bold;
-    color: #574C4C;
-    padding-bottom: 5px;
-    border-bottom: 1px solid #ddd;
-    &:hover {
-      color:#88acdb;
-    };
-  }
   video{
     max-width: 100%;
   }
@@ -257,43 +177,6 @@ line-height: 1.65em;
     border-top: 1px solid #DDD;
     border-bottom: 1px solid #FFF;
   }
-  table{
-    width:100%;
-    max-width: 65em;
-    border: 1px solid #dedede;
-    margin: 15px auto;
-    border-collapse:collapse;
-    empty-cells:show;
-    tr,td{
-      height:35px;
-    }
-    th {
-      font-weight: bold;
-      text-align: center;
-      background: rgba(158, 188, 226, .2);
-      white-space: nowrap;
-    }
-    thead{
-      tr {
-        /*background: #f8f8f8;*/
-      }
-    }
-    tbody{
-      tr:hover{
-        background: #efefef;
-      }
-    }
-    td,th{
-      border: 1px solid #dedede;
-      padding: 0 10px;
-    }
-    tr:nth-child(2n) {
-      background: rgba(158, 188, 226, .12);
-    }
-    td:nth-child(-n+2){
-      white-space: nowrap;
-    }
-  }
   figure{
     table {
       border: none;

diff --git a/themes/Yilia/source/css/_partial/customise/blockquote.styl b/themes/Yilia/source/css/_partial/customise/blockquote.styl
@@ -0,0 +1,9 @@
+blockquote
+    padding .4em 20px
+    margin-top 10px
+    border-left 4px solid rgba(147, 181, 224, .4)
+    background rgba(255,255,255,0.4)
+    p
+        margin-top 0
+    blockquote
+        border-left none
diff --git a/themes/Yilia/source/css/_partial/customise/heading.styl b/themes/Yilia/source/css/_partial/customise/heading.styl
@@ -0,0 +1,36 @@
+h1 
+    margin-top 30px
+
+h2 
+    margin .5em auto
+    font-weight bold
+    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 .2em .6em
+    font-weight normal
+    &hover a 
+        text-decoration underline
+    &after 
+        content " >"
+
+h4, h5, h6
+    margin-top 20px
+    font-weight bold
+    color #574C4C
+    padding-bottom 5px
+    border-bottom 1px solid #ddd
+    &hover 
+        color#88acdb
diff --git a/themes/Yilia/source/css/_partial/customise/list.styl b/themes/Yilia/source/css/_partial/customise/list.styl
@@ -0,0 +1,26 @@
+li
+    margin .1em
+    font-size 1.1em
+
+ul
+    li::before
+        display inline-block
+        content ""
+        width .4em
+        height .4em
+        margin-right .5em
+        margin-bottom .11em
+        border 1px solid lightgray
+        border-radius 50%
+        background lightgray
+
+ul, ol
+    font-size 14px
+    margin 10px 0  
+
+li
+    ul, ol
+        margin-left 30px
+        libefore
+            content ""
+            background #dedede
diff --git a/themes/Yilia/source/css/_partial/customise/table.styl b/themes/Yilia/source/css/_partial/customise/table.styl
@@ -0,0 +1,24 @@
+table
+    width 100%
+    max-width 65em
+    border 1px solid #dedede
+    margin 15px auto
+    border-collapse collapse
+    empty-cells show
+    tr,td
+        height 35px
+    th 
+        font-weight bold
+        text-align center
+        background rgba(158, 188, 226, .2)
+        white-space nowrap
+    tbody
+        tr:hover
+          background #efefef
+    td,th
+        border 1px solid #dedede
+        padding 0 10px
+    tr:nth-child(2n) 
+        background rgba(158, 188, 226, .12)
+    td:nth-child(-n+2)
+        white-space nowrap