From 7e61d738cfcbb16fb50a73cefb29e8e6830110ef Mon Sep 17 00:00:00 2001
From: yige <a@wyr.me>
Date: Sun, 12 Jul 2020 16:32:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DCSS=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/common.styl |   4 +-
 pages/post/_id.vue  | 446 ++++++++++++++++++++++----------------------
 2 files changed, 226 insertions(+), 224 deletions(-)

diff --git a/layouts/common.styl b/layouts/common.styl
index 4c4896a..4b9614f 100644
--- a/layouts/common.styl
+++ b/layouts/common.styl
@@ -500,11 +500,11 @@ input:-moz-placeholder
   color #ffffff
   position fixed
   right 8px
-  bottom 38px
+  bottom 42px
   z-index 999
   padding 4px
 
-@media (max-width: 768px)
+@media (max-width 768px)
   .header
     position fixed
     z-index 999999
diff --git a/pages/post/_id.vue b/pages/post/_id.vue
index b8d1def..6f2b438 100644
--- a/pages/post/_id.vue
+++ b/pages/post/_id.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+.postPage
   article.articleDetails
     .articleTitle
       | {{ articels.post_title }}
@@ -453,283 +453,285 @@ export default {
 }
 </script>
 
-<style lang="stylus" socped>
-.articleDetails
-  margin-top 30px
-  background-color #fff
-  padding 50px 10px
+<style lang="stylus">
+.postPage
+  .articleDetails
+    margin-top 30px
+    background-color #fff
+    padding 50px 10px
 
-  .articleTitle
-    text-align center
-    font-size 24px
+    .articleTitle
+      text-align center
+      font-size 24px
 
-  .articalMeta
-    text-align center
-    padding 20px 0
-    font-size 12px
-    color #a1887f
+    .articalMeta
+      text-align center
+      padding 20px 0
+      font-size 12px
+      color #a1887f
 
-    ul
-      list-style none
-      padding-right 20px
+      ul
+        list-style none
+        padding-right 20px
 
-      > li
-        display inline-block
-        margin-left 20px
-        line-height 2
+        > li
+          display inline-block
+          margin-left 20px
+          line-height 2
 
-        > i
-          margin-right 8px
+          > i
+            margin-right 8px
 
-        > span a
-          color #a1887f
-          margin-left 10px
+          > span a
+            color #a1887f
+            margin-left 10px
 
-        a span
-          color #a1887f
+          a span
+            color #a1887f
 
-        > span a:first-child
+          > span a:first-child
+            margin-left 0
+
+        > li :first-child
           margin-left 0
 
-      > li :first-child
-        margin-left 0
+    .articelContent
+      margin-top 20px
+      margin-bottom 30px
+      line-height 2
+      font-weight 300
+      font-size responsive
 
-  .articelContent
-    margin-top 20px
-    margin-bottom 30px
-    line-height 2
-    font-weight 300
-    font-size responsive
+      pre
+        text-align 0.16rem
+        overflow-x auto
+        line-height 1
 
-    pre
-      text-align 0.16rem
-      overflow-x auto
-      line-height 1
+        code
+          padding 16px
 
       code
-        padding 16px
+        color #24292e
+        background-color rgba(27, 31, 35, 0.05)
+        border-radius 3px
+        font-size 85%
+        padding 2px 5px
 
-    code
-      color #24292e
-      background-color rgba(27, 31, 35, 0.05)
-      border-radius 3px
-      font-size 85%
-      padding 2px 5px
+  .comment
+    width 100%
+    margin-top 60px
 
-.comment
-  width 100%
-  margin-top 60px
+    .comment-title
+      color #777
+      margin-bottom 30px
 
-  .comment-title
-    color #777
-    margin-bottom 30px
+    .comment-item
+      margin-top 10px
+      padding 10px 8px
 
-  .comment-item
-    margin-top 10px
-    padding 10px 8px
+      .comment-avatar
+        float left
+        margin-top 3px
 
-    .comment-avatar
-      float left
-      margin-top 3px
-
-      img
-        border-radius 50%
-        width 40px
-        border-style none
-        cursor pointer
-        box-sizing border-box
-        margin 0
-
-    .comment-area
-      margin-left 50px
-
-      .comment-author, .comment-info
-        font-size 10px
-
-      .comment-author
-        color #a1887f
-
-      .comment-info
-        color #777
-
-        .reply
-          color #a1887f
+        img
+          border-radius 50%
+          width 40px
+          border-style none
           cursor pointer
-          user-select none
-          margin-left 10px
+          box-sizing border-box
+          margin 0
 
-  .comment-userinfo
-    margin-left 5px
-    padding 10px 5px
+      .comment-area
+        margin-left 50px
 
-    .comment-avatar
-      float left
-      margin-top 3px
+        .comment-author, .comment-info
+          font-size 10px
 
-      img
-        border-radius 50%
-        width 60px
-        border-style none
+        .comment-author
+          color #a1887f
+
+        .comment-info
+          color #777
+
+          .reply
+            color #a1887f
+            cursor pointer
+            user-select none
+            margin-left 10px
+
+    .comment-userinfo
+      margin-left 5px
+      padding 10px 5px
+
+      .comment-avatar
+        float left
+        margin-top 3px
+
+        img
+          border-radius 50%
+          width 60px
+          border-style none
+          cursor pointer
+          box-sizing border-box
+          margin 0
+
+      .comment-nickname
+        color #a1887f
+        margin-left 80px
+        height 70px
+        line-height 70px
+
+    #editor
+      margin-top 10px
+      margin-bottom 10px
+
+    .comment-reply-commit
+      margin 10px 0 10px 50px
+
+    .comment-default-commit
+      margin-top 125px
+
+    .comment-default-commit, .comment-reply-commit
+      position relative
+
+      .login
+        position absolute
+        left 0
+        top 0
+        width 100%
+        height 100%
+        text-align center
+        line-height 1
+        margin auto
+        z-index 99
         cursor pointer
-        box-sizing border-box
-        margin 0
+        user-select none
 
-    .comment-nickname
-      color #a1887f
-      margin-left 80px
-      height 70px
-      line-height 70px
+        img
+          margin-top 70px
 
-  #editor
-    margin-top 10px
-    margin-bottom 10px
+      .login:hover
+        background-color #fff
 
-  .comment-reply-commit
-    margin 10px 0 10px 50px
+      .login:before
+        content ''
+        position absolute
+        background rgba(0, 0, 0, 0.1)
+        top 0
+        left 0
+        width 100%
+        height 100%
+        filter blur(5px)
+        z-index 9
 
-  .comment-default-commit
-    margin-top 125px
+  #editor-reply
+    margin 0
 
-  .comment-default-commit, .comment-reply-commit
-    position relative
+  .btnFooter
+    font-size 12px
+    margin-top 25px
 
-    .login
-      position absolute
-      left 0
-      top 0
-      width 100%
-      height 100%
-      text-align center
-      line-height 1
-      margin auto
-      z-index 99
-      cursor pointer
-      user-select none
+    i
+      margin 10px
 
-      img
-        margin-top 70px
+  .btnPrevt
+    float left
 
-    .login:hover
-      background-color #fff
+  .btnNext
+    float right
 
-    .login:before
-      content ''
-      position absolute
-      background rgba(0, 0, 0, 0.1)
-      top 0
-      left 0
-      width 100%
-      height 100%
-      filter blur(5px)
-      z-index 9
+  footer .footer
+    color #cccccc
+    text-align left
+    line-height 1.5
+    margin 20px 0
 
-    #editor-reply
-      margin 0
+  .anchor-fix
+    display block
+    height 70px /* same height as header */
+    margin-top -70px /* same height as header */
+    visibility hidden
 
-    .btnFooter
-      font-size 12px
-      margin-top 25px
+  .articelRightToc
+    position fixed
+    width 15%
+    top 0
+    right 0
+    overflow-y auto
+    background-color #000
+    padding 10px
+    box-shadow 0 0 8px #000
+    z-index 999999
 
-      i
-        margin 10px
+  .articelToc
+    width 100%
 
-    .btnPrevt
-      float left
+  .articelToc, .articelRightToc
+    color #bbb
+    user-select none
 
-    .btnNext
-      float right
+    .articelTitle
+      font-weight 400
+      margin-bottom 10px
 
-    footer .footer
-      color #cccccc
-      text-align left
-      line-height 1.5
-      margin 20px 0
-
-    .anchor-fix
-      display block
-      height 70px /* same height as header */
-      margin-top -70px /* same height as header */
-      visibility hidden
-
-    .articelRightToc
-      position fixed
-      width 15%
-      top 0
-      right 0
-      overflow-y auto
-      background-color #000
-      padding 10px
-      box-shadow 0 0 8px #000
-      z-index 999999
-
-    .articelToc
-      width 100%
-
-    .articelToc, .articelRightToc
+    .articelTocList
       color #bbb
-      user-select none
 
-      .articelTitle
-        font-weight 400
-        margin-bottom 10px
-
-      .articelTocList
+      a
         color #bbb
 
-        a
+        &:visited
           color #bbb
 
-          &:visited
-            color #bbb
+        &:hover
+          color #d01c2e
 
-          &:hover
-            color #d01c2e
+      ol.toc, ol.toc ol
+        counter-reset toc
+        list-style none
 
-        ol.toc, ol.toc ol
-          counter-reset toc
-          list-style none
+      ol li
+        counter-increment toc
 
-        ol li
-          counter-increment toc
+      .toc li:before
+        content counters(toc, '.') ' '
 
-        .toc li:before
-          content counters(toc, '.') ' '
+      ol
+        margin-left 20px
 
-        ol
-          margin-left 20px
+        li
+          font-weight 400
 
-          li
-            font-weight 400
+          ol
+            margin-left 20px
 
-            ol
-              margin-left 20px
+            li
+              font-weight 300
 
-              li
-                font-weight 300
+  .tools
+    margin-top 80px
+    margin-bottom 10px
+    text-align center
+    user-select none
 
-    .tools
-      margin-top 80px
-      margin-bottom 10px
-      text-align center
-      user-select none
+    .reward
+      margin 15px 0
+      border 1px solid #888
+      padding 5px 10px
+      display inline-block
+      color #888
+      font-weight 300
+      cursor pointer
+      margin auto
 
-      .reward
-        margin 15px 0
-        border 1px solid #888
-        padding 5px 10px
-        display inline-block
-        color #888
-        font-weight 300
-        cursor pointer
-        margin auto
+  .vditor--fullscreen
+    z-index 9999999
 
-    .vditor--fullscreen
-      z-index 9999999
-
-    @media (max-width: 768px)
-      .articleDetails
-        padding 20px
-        margin-top 50px
+@media (max-width: 768px)
+  .postPage
+    .articleDetails
+      padding 20px
+      margin-top 50px
 
       .articelRightToc
         position fixed