docs: override accent color of default theme

Author: PeachScript

docs/.vuepress/styles/palette.styl

@@ -0,0 +1,3 @@
+@require '../theme/styles/config'
+
+$accentColor = saturation(lighten($c-basic, 25%), 40%)

docs/.vuepress/theme/layouts/Layout.vue

@@ -104,7 +104,7 @@ export default {
 
 body
   font 16px/1.42857 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif
-  background-color #fbfcff
+  background-color $c-bg
 
 .navbar
   transition all 0.3s
@@ -122,7 +122,18 @@ body
 
 .sidebar
   @media (min-width $mq-mobile)
-    background #fbfcff
+    width $s-sidebar-width * 0.82
+    background $c-bg
+
+  @media (min-width $mq-narrow)
+    width $s-sidebar-width
+
+.page
+  @media (min-width $mq-mobile)
+    padding-left $s-sidebar-width * 0.82
+
+  @media (min-width $mq-narrow)
+    padding-left $s-sidebar-width
 
 .theme-container
   .previewer
@@ -265,6 +276,7 @@ body
         width 40px
         height 40px
         transform none
+
       @media (max-width $mq-mobile)
         opacity 0
         visibility hidden

docs/.vuepress/theme/styles/config.styl

@@ -2,19 +2,20 @@
  * color config
  */
 
-$c-basic = #32495f;
-$c-basic-light = desaturate(lighten($c-basic, 35%), 10%);
+$c-basic = #32495f
+$c-basic-light = desaturate(lighten($c-basic, 35%), 10%)
+$c-bg = #fbfcff
 
 /**
  * size config
  */
 
-$s-home-divide-ratio = 36.5%;
-$s-home-middle-gap = 40px;
-$s-edge-gap = 30px;
-$s-header-height = 62px;
-$s-sidebar-width = 200px;
-$s-preview-width = 334px;
+$s-home-divide-ratio = 36.5%
+$s-home-middle-gap = 40px
+$s-edge-gap = 30px
+$s-header-height = 62px
+$s-preview-width = 334px
+$s-sidebar-width = 16.4rem
 
 /**
  * responsive breakpoints