From 0ec13d6d7b0639f6d7bbc53a903f7921092f5d6a Mon Sep 17 00:00:00 2001
From: reco_luan <recoluan@outlook.com>
Date: Wed, 16 Oct 2019 20:21:47 +0800
Subject: [PATCH 1/2] style: change valine style

---
 components/HomeBlog.vue |  1 -
 components/Page.vue     |  4 +--
 styles/theme.styl       | 62 ++++++++++++++++++++++++++++++++++++-----
 3 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
index 78b15a3..fed9e59 100644
--- a/components/HomeBlog.vue
+++ b/components/HomeBlog.vue
@@ -148,7 +148,6 @@ export default {
     }
   },
   mounted () {
-    console.log(this)
     this.recoShow = true
   },
   methods: {
diff --git a/components/Page.vue b/components/Page.vue
index cf82d2e..637a538 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -228,7 +228,7 @@ function flatten (items, res) {
 @require '../styles/loadMixin.styl'
 
 .page
-  padding-top 6rem
+  padding-top 5rem
   padding-bottom 2rem
   display block
   #time-line {
@@ -238,7 +238,7 @@ function flatten (items, res) {
   .page-title
     max-width: 740px;
     margin: 0 auto;
-    padding: 0rem 2.5rem;
+    padding: 1rem 2.5rem;
   .page-edit
     @extend $wrapper
     padding-top 1rem
diff --git a/styles/theme.styl b/styles/theme.styl
index bd1cf63..40c9ea1 100644
--- a/styles/theme.styl
+++ b/styles/theme.styl
@@ -113,7 +113,7 @@ h1, h2, h3, h4, h5, h6
     padding-top ($navbarHeight + 1rem)
     margin-bottom 0
     &:first-child
-      margin-top -1.5rem
+      margin-top -3.5rem
       margin-bottom 1rem
       + p, + pre, + .custom-block
         margin-top 2rem
@@ -121,7 +121,7 @@ h1, h2, h3, h4, h5, h6
     opacity: 1
 
 h1
-  font-size 2.2rem
+  font-size 1.95rem
 
 h2
   font-size 1.65rem
@@ -211,11 +211,11 @@ th, td
 ::-webkit-scrollbar-thumb:horizontal
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
-  -webkit-border-radius: 6px;    
+  -webkit-border-radius: 6px;
 
 /************** 流程图的滚动条 **************/
 .vuepress-flowchart
-  overflow: auto  
+  overflow: auto
 
 /************** 腾讯 404 公益 **************/
 
@@ -228,11 +228,59 @@ th, td
     padding: 6px 20px!important
     text-decoration: none!important
     border-radius: 4px
-  }  
+  }
 }
 
 @media screen and (max-width: 720px) {
   .mod_404 .desc {
     margin: 50px 0
-  }  
-}
\ No newline at end of file
+  }
+}
+
+/************** 评论功能 **************/
+
+.comments-wrapper
+  .valine-wrapper
+    #valine.v
+      .vwrap
+        border-radius: 0
+        border-bottom: 1px solid #ddd
+        .vcontrol
+          .vsubmit
+            background: #fff
+      .vinfo
+        padding-left: .6rem
+      .vlist
+        padding: 0 .6rem
+        border-radius: .2rem
+        .vcard
+          .vimg
+            border-radius: .6rem
+            box-shadow: 0 1px 6px 0 rgba(0,0,0,0.2)
+            border: none
+        .vh
+          .vhead
+            .vsys
+              box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2)
+          .vmeta
+            .vat
+              background: #f2f2f2
+              box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2)
+              border-radius: .2rem
+              padding: 0 .4rem
+              color: #313131
+              border: 1px solid #ededed
+          .vcontent
+            background: #f2f2f2
+            box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2)
+            border-radius: .2rem
+            margin-right: 3.6rem
+            padding-top: .1rem
+            padding-left: .6rem
+            padding-right: .6rem
+            padding-bottom: 0.05rem
+            p .at
+              color: #1abc9c
+      .info
+        padding-right: .6rem
+

From b4560bf4bce5ceaaf29cac196bf4a7f1c7884365 Mon Sep 17 00:00:00 2001
From: reco_luan <recoluan@outlook.com>
Date: Thu, 17 Oct 2019 14:28:37 +0800
Subject: [PATCH 2/2] style: ununify styles

 Include box-shadow/text-shadow/border-radius.
---
 components/AlgoliaSearchBox.vue   |  3 ++-
 components/DropdownLink.vue       |  6 ++++--
 components/Home.vue               |  3 ++-
 components/HomeBlog.vue           | 12 +++++++-----
 components/Navbar.vue             |  4 +++-
 components/NoteAbstract.vue       |  7 ++++---
 components/Password.vue           | 15 ++++++++-------
 components/TagList.vue            |  8 +++++---
 components/Theme/ThemeOptions.vue | 11 ++---------
 components/Theme/index.vue        |  3 ++-
 global-components/Badge.vue       |  5 +++--
 layouts/Category.vue              |  9 +++++----
 styles/colorMixin.styl            |  2 +-
 styles/recoConfig.styl            |  6 +++++-
 styles/theme.styl                 | 31 ++++++++++++++++++++-----------
 15 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/components/AlgoliaSearchBox.vue b/components/AlgoliaSearchBox.vue
index 41b62af..92ea648 100644
--- a/components/AlgoliaSearchBox.vue
+++ b/components/AlgoliaSearchBox.vue
@@ -60,6 +60,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 .algolia-search-wrapper
   & > span
     vertical-align middle
@@ -68,7 +69,7 @@ export default {
     .ds-dropdown-menu
       background-color #fff
       border 1px solid #999
-      border-radius 4px
+      border-radius $borderRadius
       font-size 16px
       margin 6px 0 0
       padding 4px
diff --git a/components/DropdownLink.vue b/components/DropdownLink.vue
index f859857..aa55fac 100644
--- a/components/DropdownLink.vue
+++ b/components/DropdownLink.vue
@@ -80,6 +80,8 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
+
 .dropdown-wrapper
   cursor pointer
   .dropdown-title
@@ -173,9 +175,9 @@ export default {
       right 0
       background-color #fff
       padding 0.6rem 0
-      box-shadow: 0 4px 20px 0 rgba(0,0,0,.2);
+      box-shadow: $boxShadow;
       text-align left
-      border-radius 0.25rem
+      border-radius $borderRadius
       white-space nowrap
       margin 0
 </style>
diff --git a/components/Home.vue b/components/Home.vue
index 05159e8..90c0802 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -98,6 +98,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 @require '../styles/loadMixin.styl'
 
 .home {
@@ -127,7 +128,7 @@ export default {
       color: #fff;
       background-color: $accentColor;
       padding: 0.6rem 1.2rem;
-      border-radius: 4px;
+      border-radius: $borderRadius
       transition: background-color 0.1s ease;
       box-sizing: border-box;
       load-start()
diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
index fed9e59..107be05 100644
--- a/components/HomeBlog.vue
+++ b/components/HomeBlog.vue
@@ -185,6 +185,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 @require '../styles/loadMixin.styl'
 
 .home-blog {
@@ -235,11 +236,12 @@ export default {
       margin-left 15px;
       flex 0 0 300px
       height auto;
-      box-shadow 0 2px 10px rgba(0,0,0,0.2);
+      box-shadow $boxShadow;
+      border-radius $borderRadius
       box-sizing border-box
       padding 0 15px
       &:hover {
-        box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
+        box-shadow: $boxShadowHover;
       }
       .personal-img {
         display block
@@ -278,8 +280,8 @@ export default {
           margin-bottom .4rem
           padding: .4rem .8rem;
           transition: all .5s
-          border-radius 2px
-          box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+          border-radius $borderRadius
+          box-shadow $boxShadow
           &:not(:first-child) {
             border-top: none;
           }
@@ -301,7 +303,7 @@ export default {
               height 1.6rem
               text-align center
               line-height 1.6rem
-              border-radius 4px
+              border-radius $borderRadius
               background #eee
               font-size .6rem
               color $textColor
diff --git a/components/Navbar.vue b/components/Navbar.vue
index b788653..da74d22 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -87,13 +87,15 @@ function css (el, property) {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
+
 $navbar-vertical-padding = 0.7rem
 $navbar-horizontal-padding = 1.5rem
 
 .navbar
   padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
-  box-shadow 0 1px 6px 0 rgba(32,33,36,.28)
+  box-shadow $boxShadow
   a, span, img
     display inline-block
   .logo
diff --git a/components/NoteAbstract.vue b/components/NoteAbstract.vue
index f950055..82d4b73 100644
--- a/components/NoteAbstract.vue
+++ b/components/NoteAbstract.vue
@@ -26,6 +26,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 
 .abstract-wrapper
   width 100%
@@ -34,13 +35,13 @@ export default {
     padding: 16px 20px;
     width 100%
     overflow: hidden;
-    border-radius: 2px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    border-radius: $borderRadius
+    box-shadow: $boxShadow;
     box-sizing: border-box;
     transition all .3s
     background-color $bgColor
     &:hover
-      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: $boxShadowHover
     .title
       position: relative;
       font-size: 1.28rem;
diff --git a/components/Password.vue b/components/Password.vue
index 1b52d71..6a9c946 100644
--- a/components/Password.vue
+++ b/components/Password.vue
@@ -94,6 +94,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 .theme-container.no-sidebar
   .password-shadow
     padding-left 0
@@ -119,7 +120,7 @@ export default {
     font-size 30px
     box-sizing: border-box;
     padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
+    text-shadow $textShadow
   }
   .description {
     position: absolute;
@@ -132,13 +133,13 @@ export default {
     font-size 22px
     box-sizing: border-box;
     padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
+    text-shadow $textShadow
   }
   .inputBox{
     max-width:700px;
     height: 100px;
     background: $accentColor;
-    border-radius: 2px;
+    border-radius: $borderRadius
     position: absolute;
     left 0
     right 0
@@ -191,7 +192,7 @@ export default {
     button{
       width:0px;
       height:98px;
-      border-radius: 2px;
+      border-radius: $borderRadius
       position: absolute;
       border 1px solid $accentColor
       right:1px;
@@ -229,7 +230,7 @@ export default {
       max-width:700px;
       height: 60px;
       background: $accentColor;
-      border-radius: 2px;
+      border-radius: $borderRadius
       position: absolute;
       left 0
       right 0
@@ -282,7 +283,7 @@ export default {
       button{
         width:0px;
         height:58px;
-        border-radius: 2px;
+        border-radius: $borderRadius
         position: absolute;
         border 1px solid $accentColor
         right:1px;
@@ -311,4 +312,4 @@ export default {
 @media (max-width: $MQMobile)
   .password-shadow
     padding-left 0
-</style>
\ No newline at end of file
+</style>
diff --git a/components/TagList.vue b/components/TagList.vue
index b29b93b..3addd07 100644
--- a/components/TagList.vue
+++ b/components/TagList.vue
@@ -45,6 +45,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
+
 .tags
   margin 30px 0
   span
@@ -53,14 +55,14 @@ export default {
     padding: 4px 8px;
     display: inline-block;
     cursor: pointer;
-    border-radius: 2px;
+    border-radius: $borderRadius
     background: #fff;
     color: #fff;
     font-size: 13px;
-    box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+    box-shadow $boxShadow
     transition: all .5s
     &:hover
       transform scale(1.04)
     &.active
       transform scale(1.2)
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Theme/ThemeOptions.vue b/components/Theme/ThemeOptions.vue
index 1a305b2..fa0a92a 100755
--- a/components/Theme/ThemeOptions.vue
+++ b/components/Theme/ThemeOptions.vue
@@ -65,6 +65,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../../styles/recoConfig.styl'
 
 .color-theme-options {
 	display: flex;
@@ -72,21 +73,13 @@ export default {
 	li {
 		width: 20%;
 		text-align: center;
-
 		a {
 			width: 15px;
 			height: 15px;
-			border-radius: 2px;
-
+			border-radius: $borderRadius
 			&.default-theme {
 				background-color: $accentColor;
 			}
-
-			for key, value in $themePicker {
-				&.{key}-theme {
-					background-color: value;
-				}
-			}
 		}
 	}
 }
diff --git a/components/Theme/index.vue b/components/Theme/index.vue
index 8ef6da3..321f232 100755
--- a/components/Theme/index.vue
+++ b/components/Theme/index.vue
@@ -41,6 +41,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../../styles/recoConfig.styl'
 
 .color-picker {
 	position: relative;
@@ -64,7 +65,7 @@ export default {
 		margin: 0;
 		padding: 1em;
 		border: 1px solid $borderColor;
-		border-radius: 4px;
+		border-radius: $borderRadius
 		transform: translateX(-50%);
 		z-index: 150;
 
diff --git a/global-components/Badge.vue b/global-components/Badge.vue
index 8255293..b3c1b4c 100644
--- a/global-components/Badge.vue
+++ b/global-components/Badge.vue
@@ -24,19 +24,20 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 .badge
   display inline-block
   font-size 14px
   height 18px
   line-height 18px
-  border-radius 3px
+  border-radius $borderRadius
   padding 0 6px
   color white
   background-color #42b983
   &.tip, &.green
     background-color #42b983
   &.error
-    background-color #DA5961 //#f66
+    background-color #DA5961
   &.warning, &.warn, &.yellow
     background-color darken(#ffe564, 35%)
   & + &
diff --git a/layouts/Category.vue b/layouts/Category.vue
index bafa1e2..9a64639 100644
--- a/layouts/Category.vue
+++ b/layouts/Category.vue
@@ -95,6 +95,7 @@ export default {
 <style src="../styles/theme.styl" lang="stylus"></style>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 @require '../styles/loadMixin.styl'
 .categories-wrapper
   max-width: 740px;
@@ -108,9 +109,9 @@ export default {
       margin: 4px 8px 10px;
       display: inline-block;
       cursor: pointer;
-      border-radius: 2px;
+      border-radius: $borderRadius
       font-size: 13px;
-      box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+      box-shadow $boxShadow
       transition: all .5s
       &:hover, &.active {
         background $accentColor
@@ -136,7 +137,7 @@ export default {
           height 1.2rem
           text-align center
           line-height 1.2rem
-          border-radius 4px
+          border-radius $borderRadius
           background #eee
           font-size .7rem
         }
@@ -168,4 +169,4 @@ export default {
       font-size .8em
       float none
       text-align left
-</style>
\ No newline at end of file
+</style>
diff --git a/styles/colorMixin.styl b/styles/colorMixin.styl
index 5ee02f6..9b14eb8 100644
--- a/styles/colorMixin.styl
+++ b/styles/colorMixin.styl
@@ -14,7 +14,7 @@ color-mode(accountColor , colorName)
       &:focus
         border-color: accountColor!important;
     .navbar
-      box-shadow: 0 1px 6px 0 rgba(32,33,36,.28)
+      box-shadow: $boxShadow
       .nav-links a:hover,
       .nav-links a.router-link-active,
       .nav-links a:hover .iconfont,
diff --git a/styles/recoConfig.styl b/styles/recoConfig.styl
index 64a62b4..3c24188 100644
--- a/styles/recoConfig.styl
+++ b/styles/recoConfig.styl
@@ -1,10 +1,14 @@
 // colors
 $accentColor = #424242
 $textColor = #232321
+$boxShadow = 0 1px 6px 0 rgba(0, 0, 0, 0.2)
+$boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
+$textShadow = 0 2px 4px rgba(0, 0, 0, 0.2);
+$borderRadius = .25rem
 
 $themePicker = {
   red: #f26d6d,
   blue: #2196f3,
   green: #3eaf7c,
   orange: #fb9b5f
-}
\ No newline at end of file
+}
diff --git a/styles/theme.styl b/styles/theme.styl
index 40c9ea1..55ae664 100644
--- a/styles/theme.styl
+++ b/styles/theme.styl
@@ -10,6 +10,7 @@
 html, body
   padding 0
   margin 0
+  text-shadow: $textShadow
 body
   font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
   -webkit-font-smoothing antialiased
@@ -196,7 +197,7 @@ th, td
 
 /************** 滚动条 **************/
 ::-webkit-scrollbar
-  width: 5px;
+  width: 6px;
   height: 5px;
 
 ::-webkit-scrollbar-track-piece
@@ -243,8 +244,8 @@ th, td
   .valine-wrapper
     #valine.v
       .vwrap
-        border-radius: 0
-        border-bottom: 1px solid #ddd
+        background: #f2f2f2
+        box-shadow: $boxShadow
         .vcontrol
           .vsubmit
             background: #fff
@@ -252,28 +253,28 @@ th, td
         padding-left: .6rem
       .vlist
         padding: 0 .6rem
-        border-radius: .2rem
+        border-radius: $borderRadius
         .vcard
           .vimg
-            border-radius: .6rem
-            box-shadow: 0 1px 6px 0 rgba(0,0,0,0.2)
+            border-radius: $borderRadius
+            box-shadow: $boxShadow
             border: none
         .vh
           .vhead
             .vsys
-              box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2)
+              box-shadow: $boxShadow
           .vmeta
             .vat
               background: #f2f2f2
-              box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2)
-              border-radius: .2rem
+              box-shadow: $boxShadow
+              border-radius: $borderRadius
               padding: 0 .4rem
               color: #313131
               border: 1px solid #ededed
           .vcontent
             background: #f2f2f2
-            box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2)
-            border-radius: .2rem
+            box-shadow: $boxShadow
+            border-radius: $borderRadius
             margin-right: 3.6rem
             padding-top: .1rem
             padding-left: .6rem
@@ -284,3 +285,11 @@ th, td
       .info
         padding-right: .6rem
 
+/************** 分页 **************/
+.pagation
+  .pagation-list
+    .jump, .jumpinp input
+      box-shadow: $boxShadow
+
+.search-box input
+  border-radius: $borderRadius