improvements: 代碼名全大寫

improvements: 補全card-categories和card-archives的 '查看更多‘鏈接 close #337
fix: 修復comments沒設置時，報Unexpected token ')'的bugs close #344
improvements: 優化js和html
fix: 修復toc 滾動百分比不準的Bugs

source/css/_layout/aside.styl

@@ -87,6 +87,10 @@
     span
       margin-left: .5rem
 
+    & + div,
+    & + ul
+      padding: .3rem 0 0
+
   .sticky_layout
     +minWidth900()
       position: sticky
@@ -102,8 +106,6 @@
         color: $text-hover !important
 
   .aside-list
-    margin: 10px 0 -15px
-
     & > span
       display: block
       margin-bottom: .5rem
@@ -121,7 +123,7 @@
         border-bottom: 1px dashed #f5f5f5
 
       &:last-child
-        margin-bottom: .3rem
+        padding-bottom: 0
 
       .thumbnail
         overflow: hidden
@@ -173,7 +175,6 @@
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list
     margin: 0
-    padding: .2rem 0 0
     list-style: none
 
   .card-archives ul.card-archive-list > .card-archive-list-item,
@@ -241,12 +242,10 @@
 
   .card-webinfo
     .webinfo
-      padding: .2rem .5rem
-
       .webinfo-item
         display: flex
         align-items: center
-        padding: 4px 0 0
+        padding: .1rem .5rem 0
 
         div
           &:first-child

source/css/_layout/head.styl

@@ -188,13 +188,13 @@ _:future,
     padding: 0 16px
 
   &:not(.fixed)
-    .menus
+    #menus
       padding-right: 0 !important
 
   #blog_name
     flex: 1
 
-  .toggle-menu
+  #toggle-menu
     display: none
     padding: .1rem 0 0 .3rem
     vertical-align: top
@@ -218,7 +218,7 @@ _:future,
 
     a,
     #site-name,
-    .toggle-menu
+    #toggle-menu
       color: var(--font-color)
       text-shadow: none
 
@@ -302,7 +302,7 @@ _:future,
             text-shadow: none
 
   &.hide-menu
-    .toggle-menu
+    #toggle-menu
       display: inline-block !important
 
       .site-page

source/css/_layout/relatedposts.styl

@@ -1,53 +1,54 @@
 .relatedPosts
   margin-top: 1rem
 
-  .relatedPosts_headline
+  & > .headline
     margin-bottom: 5px
     font-weight: 700
     font-size: 1.43em
 
-  .relatedPosts_item
-    position: relative
-    display: inline-block
-    overflow: hidden
-    margin: 3px
-    width: calc(33.333% - 6px)
-    height: 200px
-    background: $dark-black
-    vertical-align: bottom
+  & > .relatedPosts-list
+    & > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: $dark-black
+      vertical-align: bottom
 
-    &:hover
-      .relatedPosts_cover
-        opacity: .8
-        transform: scale(1.1)
+      &:hover
+        .cover
+          opacity: .8
+          transform: scale(1.1)
 
-    +maxWidth768()
-      margin: 2px
-      width: calc(50% - 4px)
-      height: 150px
+      +maxWidth768()
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
 
-    +maxWidth600()
-      width: calc(100% - 4px)
+      +maxWidth600()
+        width: calc(100% - 4px)
 
-  .relatedPosts_cover
-    width: 100%
-    height: 100%
-    opacity: .4
-    transition: all .6s
-    object-fit: cover
+    .cover
+      width: 100%
+      height: 100%
+      opacity: .4
+      transition: all .6s
+      object-fit: cover
 
-  .relatedPosts_main
-    position: absolute
-    top: 50%
-    padding: 0 1rem
-    width: 100%
-    transform: translate(0, -50%)
+    .content
+      position: absolute
+      top: 50%
+      padding: 0 1rem
+      width: 100%
+      transform: translate(0, -50%)
 
-    .relatedPosts_date
-      color: var(--light-grey)
-      font-size: 90%
+      .date
+        color: var(--light-grey)
+        font-size: 90%
 
-    .relatedPosts_title
-      @extend .limit-more-line
-      color: var(--white)
-      -webkit-line-clamp: 2
+      .title
+        @extend .limit-more-line
+        color: var(--white)
+        -webkit-line-clamp: 2