From 826bf0442065d605f5449c311fc92c779c7450bc Mon Sep 17 00:00:00 2001
From: reco_luan <recoluan@outlook.com>
Date: Sun, 5 Jul 2020 23:51:14 +0800
Subject: [PATCH] fix(vuepress-theme-reco): fix dark mode & mobile page style
 error

---
 example/.vuepress/config.js                              | 1 -
 packages/vuepress-theme-reco/components/Page.vue         | 3 ++-
 packages/vuepress-theme-reco/components/PersonalInfo.vue | 7 ++++---
 packages/vuepress-theme-reco/components/Sidebar.vue      | 2 ++
 packages/vuepress-theme-reco/components/SidebarGroup.vue | 1 +
 packages/vuepress-theme-reco/components/SidebarLink.vue  | 3 ++-
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
index c87f75a..c19a1e1 100644
--- a/example/.vuepress/config.js
+++ b/example/.vuepress/config.js
@@ -95,6 +95,5 @@ module.exports = {
      * 'tomorrow'
      * 'twilight'
      */
-    codeTheme: 'tomorrow'
   }
 }
diff --git a/packages/vuepress-theme-reco/components/Page.vue b/packages/vuepress-theme-reco/components/Page.vue
index 67be299..e343a7b 100644
--- a/packages/vuepress-theme-reco/components/Page.vue
+++ b/packages/vuepress-theme-reco/components/Page.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="page" :style="{ paddingRight: (this.$page.headers || []).length > 0 ? '14rem' : '0' }">
+  <main class="page" :style="{ paddingRight: (this.$page.headers || []).length > 0 ? 'auto' : '0' }">
     <ModuleTransition>
       <div v-show="recoShowModule && $page.title" class="page-title">
         <h1>{{$page.title}}</h1>
@@ -242,6 +242,7 @@ function flatten (items, res) {
   position relative
   padding-top 5rem
   padding-bottom 2rem
+  padding-right 14rem
   display block
   .side-bar
     position fixed
diff --git a/packages/vuepress-theme-reco/components/PersonalInfo.vue b/packages/vuepress-theme-reco/components/PersonalInfo.vue
index df9314a..82b81ae 100644
--- a/packages/vuepress-theme-reco/components/PersonalInfo.vue
+++ b/packages/vuepress-theme-reco/components/PersonalInfo.vue
@@ -40,12 +40,13 @@ export default {
 .personal-info-wrapper {
   .personal-img {
     display block
-    margin 2rem auto
-    width 8rem
-    height 8rem
+    margin 2rem auto 1rem
+    width 5rem
+    height 5rem
     border-radius 50%
   }
   .name {
+    font-size 1rem
     text-align center
     color var(--text-color)
   }
diff --git a/packages/vuepress-theme-reco/components/Sidebar.vue b/packages/vuepress-theme-reco/components/Sidebar.vue
index c134a93..2d8e6d4 100644
--- a/packages/vuepress-theme-reco/components/Sidebar.vue
+++ b/packages/vuepress-theme-reco/components/Sidebar.vue
@@ -31,6 +31,8 @@ export default {
     padding 0
     margin 0
     list-style-type none
+    > li
+      background $accentColor
   a
     display inline-block
   .nav-links
diff --git a/packages/vuepress-theme-reco/components/SidebarGroup.vue b/packages/vuepress-theme-reco/components/SidebarGroup.vue
index 19aad75..cbe9376 100644
--- a/packages/vuepress-theme-reco/components/SidebarGroup.vue
+++ b/packages/vuepress-theme-reco/components/SidebarGroup.vue
@@ -71,6 +71,7 @@ export default {
 
 <style lang="stylus">
 .sidebar-group
+  background var(--background-color)
   .sidebar-group
     padding-left 0.5em
   &:not(.collapsable)
diff --git a/packages/vuepress-theme-reco/components/SidebarLink.vue b/packages/vuepress-theme-reco/components/SidebarLink.vue
index 8b5ce0e..2fae571 100644
--- a/packages/vuepress-theme-reco/components/SidebarLink.vue
+++ b/packages/vuepress-theme-reco/components/SidebarLink.vue
@@ -93,6 +93,7 @@ a.sidebar-link
   color var(--text-color)
   padding 0.35rem 1rem 0.35rem 2.25rem
   line-height 1.4
+  background var(--background-color)
   // margin 0 0 0 1.5rem
   box-sizing: border-box
   &:hover
@@ -100,7 +101,7 @@ a.sidebar-link
   &.active
     font-weight 600
     color $accentColor
-    background lighten($accentColor, 92%)
+    background var(--default-color-8)
     border-right 3px solid $accentColor
   .sidebar-group &
     // padding-left 2rem