fix: some little bugs

1. add style var
2. change avatar var  personal info

README.md

@@ -10,7 +10,7 @@
 
 ## Introduce
 
-1. 这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等功能；
+1. 这是一个vuepress主题，旨在添加博客所需的分类、标签墙、分页、评论等功能；
 2. 主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
 3. 效果：[午后南杂](https://www.recoluan.com) 
 4. 文档：[vuepress-theme-reco-doc](https://vuepress-theme-reco.recoluan.com)

components/PersonalInfo.vue

@@ -1,7 +1,17 @@
 <template>
 <div class="personal-info-wrapper">
-  <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
+  <img
-  <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
+    class="personal-img"
+    v-if="$themeConfig.authorAvatar"
+    :src="$withBase($themeConfig.authorAvatar)"
+    alt="author-avatar"
+  >
+  <h3
+    class="name"
+    v-if="$themeConfig.author || $site.title"
+  >
+    {{ $themeConfig.author || $site.title }}
+  </h3>
   <div class="num">
     <div>
       <h3>{{$recoPosts.length}}</h3>

styles/palette.styl

@@ -1,4 +1,26 @@
-$textShadow = 0 2px 4px rgba(0, 0, 0, 0.1);
+$darkColor10 = rgba(0, 0, 0, 1)
+$darkColor9 = rgba(0, 0, 0, .9)
+$darkColor8 = rgba(0, 0, 0, .8)
+$darkColor7 = rgba(0, 0, 0, .7)
+$darkColor6 = rgba(0, 0, 0, .6)
+$darkColor5 = rgba(0, 0, 0, .5)
+$darkColor4 = rgba(0, 0, 0, .4)
+$darkColor3 = rgba(0, 0, 0, .3)
+$darkColor2 = rgba(0, 0, 0, .2)
+$darkColor1 = rgba(0, 0, 0, .1)
+
+$lightColor10 = rgba(255, 255, 255, 1)
+$lightColor9 = rgba(255, 255, 255, .9)
+$lightColor8 = rgba(255, 255, 255, .8)
+$lightColor7 = rgba(255, 255, 255, .7)
+$lightColor6 = rgba(255, 255, 255, .6)
+$lightColor5 = rgba(255, 255, 255, .5)
+$lightColor4 = rgba(255, 255, 255, .4)
+$lightColor3 = rgba(255, 255, 255, .3)
+$lightColor2 = rgba(255, 255, 255, .2)
+$lightColor1 = rgba(255, 255, 255, .1)
+
+$textShadow = 0 2px 4px $darkColor1;
 $borderRadius = .25rem
 $lineNumbersWrapperWidth = 2.5rem
 $textColorSub = #888
@@ -6,22 +28,19 @@ $textColorSub = #888
 $backgroundColor ?= #fff
 $backgroundColorDark ?= #25272a
 
-$boxShadow = 0 1px 6px 0 rgba(0, 0, 0, 0.2)
+$boxShadow = 0 1px 6px 0 $darkColor2
-$boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
+$boxShadowHover = 0 2px 16px 0 $darkColor2
-$boxShadowDark = 0 1px 6px 0 rgba(0, 0, 0, .6)
+$boxShadowDark = 0 1px 6px 0 $darkColor6
-$boxShadowHoverDark = 0 2px 16px 0 rgba(0, 0, 0, .6)
+$boxShadowHoverDark = 0 2px 16px 0 $darkColor6
 
 $textColor ?= #2c3e50
 $textColorDark ?= #aaa
 
 $borderColor ?= #eaecef
-$borderColorDark ?= rgba(0, 0, 0, .3)
+$borderColorDark ?= $darkColor3
 
 $codeColor ?= rgba(27, 31, 35, 0.05)
-$codeColorDark ?= rgba(0, 0, 0, .3)
+$codeColorDark ?= $darkColor3
-
-$bgmBgColor ?= rgba(255, 255, 255, .7)
-$bgmBgColorDark ?= rgba(0, 0, 0, .7)
 
 $maskColor ?= #888
 $maskColorDark ?= #000