fix: some little bugs

1. add style var
2. change avatar var  personal info
This commit is contained in:
reco_luan 2019-12-28 23:53:30 +08:00
parent f627f5a458
commit b2f52f9396
3 changed files with 42 additions and 13 deletions

View File

@ -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)

View File

@ -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">
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
<img
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>

View File

@ -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)
$boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
$boxShadowDark = 0 1px 6px 0 rgba(0, 0, 0, .6)
$boxShadowHoverDark = 0 2px 16px 0 rgba(0, 0, 0, .6)
$boxShadow = 0 1px 6px 0 $darkColor2
$boxShadowHover = 0 2px 16px 0 $darkColor2
$boxShadowDark = 0 1px 6px 0 $darkColor6
$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)
$bgmBgColor ?= rgba(255, 255, 255, .7)
$bgmBgColorDark ?= rgba(0, 0, 0, .7)
$codeColorDark ?= $darkColor3
$maskColor ?= #888
$maskColorDark ?= #000