zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加主题色筛选功能

Browse Source
This commit is contained in:
reco_luan 2019-04-14 20:33:52 +08:00
parent 565ce70d81
commit 022a20ea02
20 changed files with 247 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/Home.vue
View File

@ -174,56 +174,55 @@ export default {
}
&.reco-hide {
.hero {
img {
load-start()
}
.h1 {
load-start()
}
.description {
load-start()
}
.action-button {
load-start()
}
}
.features {
.hero {
img {
load-start()
}
.home-center {
.h1 {
load-start()
}
.footer {
.description {
load-start()
}
.action-button {
load-start()
}
}
.features {
load-start()
}
.home-center {
load-start()
}
.footer {
load-start()
}
}
&.reco-show {
.hero {
img {
load-end(0.08s)
}
.h1 {
load-end(0.16s)
}
.description {
load-end(0.24s)
}
.action-button {
load-end(0.32s)
}
&.reco-show {
.hero {
img {
load-end(0.08s)
}
.features {
load-end(0.40s)
.h1 {
load-end(0.16s)
}
.home-center {
load-end(0.48s)
.description {
load-end(0.24s)
}
.footer {
load-end(0.56s)
.action-button {
load-end(0.32s)
}
}
.features {
load-end(0.40s)
}
.home-center {
load-end(0.48s)
}
.footer {
load-end(0.56s)
}
}
@media (max-width: $MQMobile) {

2
components/Page.vue
View File

@ -219,7 +219,7 @@ function flatten (items, res) {
<style lang="stylus">
@require '../styles/wrapper.styl'
@require '../../styles/loadMixin.styl'
@require '../styles/loadMixin.styl'
.page
padding-top 6rem

20
components/Theme/CogIcon.vue
View File

@ -1,20 +0,0 @@
<template>
<svg
aria-hidden="true"
data-prefix="fas"
data-icon="cog"
class="svg-inline--fa fa-cog fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!-- eslint-disable-next-line vue/html-self-closing -->
<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path>
</svg>
</template>
<script>
export default {
name: 'CogIcon',
};
</script>

80
components/Theme/ThemeOptions.vue
View File

@ -1,81 +1,93 @@
<template>
<div class="theme-options">
<ul v-if="yuu.hasThemes" class="color-theme-options">
<ul v-if="reco.hasThemes" class="color-theme-options">
<li>
<a href="#" class="default-theme" @click.prevent="setTheme()"></a>
</li>
<li v-for="color in yuu.themes" :key="color">
<a href="#" :class="`${color}-theme`" @click.prevent="setTheme(color)"></a>
<li v-for="color in reco.themes" :key="color">
<a href="#" :class="`${color}-theme`" :style="{background: colors[color]}" @click.prevent="setTheme(color)"></a>
</li>
</ul>
<div v-if="!yuu.disableDarkTheme" class="dark-theme-options toggle-option">
<div v-if="!reco.disableDarkTheme" class="dark-theme-options toggle-option">
<label for="dark-theme-toggle">Enable Dark Theme?</label>
<input id="dark-theme-toggle" v-model="darkTheme" type="checkbox" @change="toggleDarkTheme" />
</div>
<div v-if="yuu.hasThemes && !yuu.disableThemeIgnore" class="force-theme-options toggle-option">
<label for="force-theme-toggle">Ignore Forced Themes?</label>
<input id="force-theme-toggle" v-model="ignoreForcedThemes" type="checkbox" @change="toggleForcedThemes" />
</div>
</div>
</template>
<script>
import yuuConfig from './yuuConfig.js';
import themeHandler from './themeHandler.js';
import recoConfig from './recoConfig.js';
export default {
name: 'ThemeOptions',
mixins: [yuuConfig, themeHandler],
mixins: [recoConfig],
data() {
return {
darkTheme: false,
ignoreForcedThemes: false,
darkTheme: 'false'
};
},
mounted() {
if (this.yuu.disableDarkTheme !== true) {
this.darkTheme = localStorage.getItem('dark-theme') === 'true';
this.toggleDarkTheme();
}
const theme = localStorage.getItem('reco-theme')
const night = localStorage.getItem('reco-night')
const classes = document.body.classList;
if (this.yuu.disableThemeIgnore !== true) {
this.ignoreForcedThemes = localStorage.getItem('ignore-forced-themes') === 'true';
}
this.darkTheme = night === 'true' ? true : false
if (night === 'true') classes.add(`reco-theme-night`)
if (theme) this.setTheme(theme)
},
methods: {
toggleDarkTheme() {
console.log(123, this.darkTheme)
localStorage.setItem('reco-night', this.darkTheme)
console.log(456, localStorage.getItem('reco-night'))
const classes = document.body.classList;
if (this.darkTheme) {
document.body.classList.add('yuu-theme-dark');
return localStorage.setItem('dark-theme', true);
const oldColor = [...classes]
classes.value = ''
classes.add(`reco-theme-night`)
oldColor.forEach(item => {
classes.add(item)
})
}
else {
classes.remove(`reco-theme-night`)
}
},
setTheme(theme, moveClass = true) {
const colorThemes = this.reco.themes;
const classes = document.body.classList;
const themes = colorThemes.map(colorTheme => `reco-theme-${colorTheme}`);
if (!theme) {
if (moveClass) localStorage.removeItem('reco-theme');
classes.remove(...themes);
return
}
document.body.classList.remove('yuu-theme-dark');
localStorage.removeItem('dark-theme');
},
classes.remove(...themes.filter(t => t !== `reco-theme-${theme}`));
toggleForcedThemes() {
if (this.ignoreForcedThemes) {
this.setTheme(localStorage.getItem('color-theme'));
return localStorage.setItem('ignore-forced-themes', true);
if (moveClass) {
classes.add(`reco-theme-${theme}`);
localStorage.setItem('reco-theme', theme);
} else {
localStorage.removeItem('reco-theme')
classes.remove(`reco-theme-${theme}`);
}
localStorage.removeItem('ignore-forced-themes');
},
}
},
};
</script>
<style lang="stylus">
@import '../../styles/config.styl';
.color-theme-options {
display: flex;
justify-content: space-around;
li {
width: 33%;
text-align: center;

40
components/Theme/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div v-if="showSettings" v-click-outside="hideMenu" class="user-settings">
<a class="settings-button" href="#" @click.prevent="showMenu = !showMenu">
<CogIcon class="settings-icon" />
<div v-if="showSettings" v-click-outside="hideMenu" class="color-picker">
<a class="color-button" href="#" @click.prevent="showMenu = !showMenu">
<i class="iconfont reco-color"></i>
</a>
<transition name="menu-transition" mode="out-in">
<div v-show="showMenu" class="user-settings-menu">
<div v-show="showMenu" class="color-picker-menu">
<ThemeOptions />
</div>
</transition>
@ -14,8 +14,7 @@
<script>
import ClickOutside from 'vue-click-outside';
import ThemeOptions from './ThemeOptions.vue';
import CogIcon from './CogIcon.vue';
import yuuConfig from './yuuConfig.js';
import recoConfig from './recoConfig.js';
export default {
name: 'UserSettings',
@ -25,11 +24,10 @@ export default {
},
components: {
CogIcon,
ThemeOptions,
ThemeOptions
},
mixins: [yuuConfig],
mixins: [recoConfig],
data() {
return {
@ -39,8 +37,8 @@ export default {
computed: {
showSettings() {
const { yuu } = this;
return yuu.hasThemes || yuu.disableDarkTheme !== true || yuu.disableThemeIgnore !== true;
const { reco } = this;
return reco.hasThemes || reco.disableDarkTheme !== true || reco.disableThemeIgnore !== true;
},
},
@ -53,24 +51,26 @@ export default {
</script>
<style lang="stylus">
@import '../../styles/config.styl';
.user-settings {
.color-picker {
position: relative;
margin-right: 1em;
.settings-button {
.color-button {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.iconfont {
font-size 1.4rem
color: $accentColor
}
.settings-icon {
width: 18px;
}
}
.user-settings-menu {
.color-picker-menu {
background-color: #fff;
position: absolute;
top: 40px;
@ -113,8 +113,8 @@ export default {
}
}
.yuu-theme-dark {
.user-settings-menu {
.reco-theme-dark {
.color-picker-menu {
background-color: $darkPrimaryBg;
border-color: $darkBorderColor;
@ -125,10 +125,10 @@ export default {
}
@media (max-width: $MQMobile) {
.user-settings {
.color-picker {
margin-right: 0;
.user-settings-menu {
.color-picker-menu {
left: calc(50% - 35px);
&::before {

22
components/Theme/recoConfig.js Executable file
View File

@ -0,0 +1,22 @@
export default {
data() {
return {
reco: {},
colors: {
blue: '#2196f3',
red: '#f26d6d',
green: '#3eaf7c',
orange: '#fb9b5f'
}
};
},
mounted() {
this.reco = {
themes: ['blue', 'red', 'green', 'orange'],
disableDarkTheme: false
};
this.reco.hasThemes = this.$site.themeConfig.themePicker || true
},
};

46
components/Theme/themeHandler.js
View File

@ -1,46 +0,0 @@
export default {
mounted() {
this.setPageTheme();
},
beforeUpdate() {
this.setPageTheme();
},
methods: {
setTheme(theme, persist = true) {
const colorThemes = this.yuu.themes || {};
if (!Array.isArray(colorThemes) || !colorThemes.length) return;
const classes = document.body.classList;
const themes = colorThemes.map(colorTheme => `yuu-theme-${colorTheme}`);
if (!theme) {
if (persist) localStorage.removeItem('color-theme');
return classes.remove(...themes);
}
if (theme && !colorThemes.includes(theme)) {
const oldTheme = localStorage.getItem('color-theme');
return this.setTheme(colorThemes.includes(oldTheme) ? oldTheme : null);
}
classes.remove(...themes.filter(t => t !== `yuu-theme-${theme}`));
classes.add(`yuu-theme-${theme}`);
if (persist) {
localStorage.setItem('color-theme', theme);
}
},
setPageTheme() {
if (this.yuu.disableThemeIgnore !== true && localStorage.getItem('ignore-forced-themes') === 'true') {
return;
}
const theme = this.$page.frontmatter.forceTheme || localStorage.getItem('color-theme');
this.setTheme(theme, false);
},
},
};

19
components/Theme/yuuConfig.js
View File

@ -1,19 +0,0 @@
export default {
data() {
return {
yuu: {},
};
},
mounted() {
const { yuu = {} } = this.$site.themeConfig;
this.yuu = {
themes: yuu.colorThemes || ['blue', 'red'],
disableDarkTheme: yuu.disableDarkTheme || false,
disableThemeIgnore: yuu.disableThemeIgnore || false,
};
this.yuu.hasThemes = Array.isArray(this.yuu.themes) && this.yuu.themes.length > 0;
},
};

16
fonts/iconfont.css
View File

@ -1,10 +1,10 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1548606483811'); /* IE9 */
src: url('iconfont.eot?t=1548606483811#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1548606483811') format('woff'),
url('iconfont.ttf?t=1548606483811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1548606483811#iconfont') format('svg'); /* iOS 4.1- */
src: url('iconfont.eot?t=1555230336940'); /* IE9 */
src: url('iconfont.eot?t=1555230336940#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1555230336940') format('woff'),
url('iconfont.ttf?t=1555230336940') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1555230336940#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
@ -15,6 +15,10 @@
-moz-osx-font-smoothing: grayscale;
}
.reco-color:before {
content: "\eae9";
}
.reco-message:before {
content: "\e634";
}

BIN
fonts/iconfont.eot
View File

Binary file not shown.

5
fonts/iconfont.svg
View File

@ -20,6 +20,9 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="color" unicode="&#60137;" d="M778.22179555 384q29.56401778 0 51.21517 20.48606777t21.60260778 52.33171001-21.60260778 52.33171001-51.21517 20.48606776-51.21516998-20.48606776-21.60260779-52.33171001 21.60260779-52.33171001 51.21516998-20.48606777zM632.58624 577.40401778q29.56401778 0 51.21516999 21.60260779t21.60260779 51.21516998-21.60260779 51.21517-51.21516999 21.60260778-51.21516999-21.60260778-21.60260779-51.21517 21.60260779-51.21516998 51.21516999-21.60260779zM391.41376 577.40401778q29.56401778 0 51.21516999 21.60260779t21.60260779 51.21516998-21.60260779 51.21517-51.21516999 21.60260778-51.21516999-21.60260778-21.60260779-51.21517 21.60260779-51.21516998 51.21516999-21.60260779zM245.77820445 384q29.56401778 0 51.21516998 20.48606777t21.60260779 52.33171001-21.60260779 52.33171001-51.21516998 20.48606776-51.21517-20.48606776-21.60260778-52.33171001 21.60260778-52.33171001 51.21517-20.48606777zM512 820.90666667q179.76282112 0 308.35901667-113.78991446t128.54765-275.34828999q0-100.14871666-71.7012389-170.68487111t-171.80140999-70.53615445l-84.17735111 0q-31.8456411 0-52.33171001-21.60260779t-20.48606777-51.21516999q0-25.04931555 18.20444444-47.76846222t18.20444445-50.05008555q0-31.8456411-20.48606777-52.33171001t-52.33171001-20.48606777q-182.04444445 0-309.47555555 127.43111112t-127.43111112 309.47555555 127.43111112 309.47555555 309.47555555 127.43111112z" horiz-adv-x="1024" />
<glyph glyph-name="message" unicode="&#58932;" d="M864.227 791.373h-702c-48.988 0-88.732-39.621-88.732-88.487v-519.688c0-48.866 42.607-84.866 91.616-84.866h218.638l122.113-106.65 122.134 106.65h233.366c48.988 0 91.596 36.021 91.596 84.866v519.688c0 48.866-39.763 88.487-88.732 88.487zM685.393 342.72299999999996h-309.702c-17.202 0-31.152 13.95-31.152 31.152s13.95 31.152 31.152 31.152h309.702c17.223 0 31.152-13.95 31.152-31.152s-13.95-31.152-31.152-31.152zM759.029 505.848h-484.343c-17.202 0-31.152 13.95-31.152 31.152 0 17.223 13.95 31.173 31.152 31.173h484.343c17.202 0 31.152-13.95 31.152-31.173 0.021-17.202-13.95-31.152-31.152-31.152z" horiz-adv-x="1024" />
@ -80,7 +83,7 @@ Created by iconfont
<glyph glyph-name="jianshu" unicode="&#58880;" d="M0 384v-512h1024V896H0v-512z m356.864 331.776c-1.024-6.656-4.096-15.872-6.144-20.48-3.584-8.704 2.048-9.216 78.848-9.216H512v-51.2h-43.52c-24.064 0-43.52-0.512-43.52-1.024 0-1.024 4.608-16.384 10.24-34.816 5.632-18.432 10.24-33.792 10.24-34.304 0-1.024-18.432-1.536-40.448-1.536h-40.448l-3.584 16.896c-9.216 45.056-13.824 54.784-27.136 54.784-7.68 0-21.504-8.192-35.328-20.992-22.016-19.968-71.168-46.592-99.84-53.76-14.336-3.072-14.336-3.072-14.336 22.528 0 23.552 1.024 26.112 19.968 38.4 25.088 16.384 41.984 38.912 59.392 76.8l13.312 29.184h41.472c39.936 0 40.96-0.512 38.4-11.264z m306.688-6.656l-3.584-17.92h179.712v-56.32h-96.768l10.24-29.184c14.848-43.008 15.36-42.496-28.16-42.496h-37.888l-3.584 16.896c-2.048 8.704-6.144 25.088-8.704 35.84-5.12 17.92-7.168 18.944-25.6 18.944-16.384 0-23.552-3.584-41.472-20.992-19.456-18.944-76.288-50.176-104.448-58.368-10.752-3.072-11.776-1.536-11.776 18.944 0 20.992 2.048 24.576 27.648 46.592 25.6 22.016 49.152 59.392 61.44 97.28 2.048 7.168 9.216 8.704 44.544 8.704h41.472l-3.072-17.92z m-317.44-162.304c4.608-8.704 13.824-32.256 20.48-51.2 13.824-41.472 14.336-40.96-36.352-38.912l-34.816 1.536-11.264 35.84c-6.144 19.968-14.848 43.52-19.968 52.736L255.488 563.2h40.96c40.96 0 41.472 0 49.664-16.384z m462.848-225.792c0-200.192-0.512-217.6-9.216-233.984-15.872-28.672-40.448-37.888-103.424-38.4h-53.76l-1.536 29.696-1.536 29.184h33.792c29.184 0 35.328 1.536 46.08 12.8l12.8 12.288V476.16H384V537.6h424.96v-216.576zM291.84 243.2v-202.24h-76.8V445.44h76.8V243.2z m363.52 57.344c0-182.784 4.608-177.664-167.424-177.664H373.76V424.96h281.6v-124.416zM450.56 335.36v-33.28h128V368.64h-128v-33.28zM450.56 215.04v-35.84h55.808c65.024 0 69.12 2.56 69.632 43.008v26.112l-62.464 1.536-62.976 1.536v-36.352z" horiz-adv-x="1024" />
<glyph glyph-name="theme" unicode="&#59368;" d="M949.6 535.4s-0.1 0-0.1 0.1L755.1 729.4c-15.6 25.3-43.4 42.4-75.4 42.4h-55.5c-16.2 0-29.7-11.6-32.7-27l-0.6-0.9v1.2c-0.8-2-2-3.9-3.4-5.9-9.4-32.3-38.9-56-74.3-56-31 0-57.6 18.3-70.1 44.5l-0.4 0.3c-0.1 0.4-0.3 0.8-0.4 1.2-0.9 2-1.5 4.1-2.3 6.2-1.4 3.6-3 7.1-4.6 10.6v-5.3h-0.2c-0.2 3.6-1 7.1-2.2 10.3-0.7 1.5-1.5 3-2.3 4.5-5.8 9.8-16.3 16.4-28.5 16.4-2 0-3.9-0.3-5.9-0.7-1 0.5-2.1 0.7-3.2 0.7-0.7 0-1.4-0.2-2.1-0.4v0.4h-44.4c-28.9 0-54.3-14-70.6-35.3l-201.4-201s-0.1 0-0.1-0.1c-13-13-13-34 0-47l141.3-141c11.5-11.5 28.9-12.2 41.9-3.4v-325.6h2.2c4.6-12.9 16.6-22.2 31.1-22.2h444.2c14.5 0 26.5 9.3 31.1 22.2h2.2v324c12.7-7.2 28.9-5.9 39.7 4.9l141.3 141c13.1 13 13.1 34 0.1 47z" horiz-adv-x="1024" />
<glyph glyph-name="theme" unicode="&#59368;" d="M978.77333333 545.49333333s-0.10666667 0-0.10666666 0.10666667L771.30666667 752.42666667c-16.64 26.98666667-46.29333333 45.22666667-80.42666667 45.22666666h-59.2c-17.28 0-31.68-12.37333333-34.88-28.8l-0.64-0.96v1.28c-0.85333333-2.13333333-2.13333333-4.16-3.62666667-6.29333333-10.02666667-34.45333333-41.49333333-59.73333333-79.25333333-59.73333333-33.06666667 0-61.44 19.52-74.77333333 47.46666666l-0.42666667 0.32c-0.10666667 0.42666667-0.32 0.85333333-0.42666667 1.28-0.96 2.13333333-1.6 4.37333333-2.45333333 6.61333334-1.49333333 3.84-3.2 7.57333333-4.90666667 11.30666666v-5.65333333h-0.21333333c-0.21333333 3.84-1.06666667 7.57333333-2.34666667 10.98666667-0.74666667 1.6-1.6 3.2-2.45333333 4.8-6.18666667 10.45333333-17.38666667 17.49333333-30.4 17.49333333-2.13333333 0-4.16-0.32-6.29333333-0.74666667-1.06666667 0.53333333-2.24 0.74666667-3.41333334 0.74666667-0.74666667 0-1.49333333-0.21333333-2.24-0.42666667v0.42666667h-47.36c-30.82666667 0-57.92-14.93333333-75.30666666-37.65333333l-214.82666667-214.4s-0.10666667 0-0.10666667-0.10666667c-13.86666667-13.86666667-13.86666667-36.26666667 0-50.13333333l150.72-150.4c12.26666667-12.26666667 30.82666667-13.01333333 44.69333334-3.62666667v-347.30666667h2.34666666c4.90666667-13.76 17.70666667-23.68 33.17333334-23.68h473.81333333c15.46666667 0 28.26666667 9.92 33.17333333 23.68h2.34666667v345.6c13.54666667-7.68 30.82666667-6.29333333 42.34666667 5.22666667l150.72 150.4c13.97333333 13.86666667 13.97333333 36.26666667 0.10666666 50.13333333z" horiz-adv-x="1024" />
<glyph glyph-name="three" unicode="&#58948;" d="M861.798876 266.798732C835.998959 320.998557 830.598976 331.29852400000004 806.999052 385.398351c-12.59996 28.799907-38.399877 46.79985-61.899801 52.69983l62.499799 294.499054c9.29997 43.899859-18.299941 86.99972-61.699801 96.39969-43.399861 9.39997-86.099723-18.59994-95.399694-62.499799l-58.099813-273.79912-3.699988 322.598963C587.999756 860.296825 551.599873 896.396709 507.200015 895.99671c-44.499857-0.299999-79.999743-36.999881-79.499744-81.799737l3.499989-304.299022-66.199788 248.999199c-11.499963 43.299861-55.599821 68.999778-98.499683 57.399816-42.899862-11.599963-68.299781-56.199819-56.799818-99.49968L295.000697 395.898317c-62.899798-21.69993-92.899702-43.899859-103.399668-72.899766l-37.999878-108.399652c-8.499973-23.399925 3.19999-75.299758 11.499964-98.799682 39.699872-112.799638 86.399722-187.699397 114.499632-226.699272 4.899984-6.799978 9.099971-12.29996 12.799959-16.899946H760.9992c1.699995 3.09999 3.19999 6.29998 4.499986 9.699969l94.999694 256.299177c22.099929 52.099833 10.799965 108.499651 1.299996 128.599587z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
fonts/iconfont.ttf
View File

Binary file not shown.

BIN
fonts/iconfont.woff
View File

Binary file not shown.

BIN
fonts/iconfont.woff2
View File

Binary file not shown.

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vuepress-theme-reco",
"version": "1.0.0-alpha.10",
"version": "1.0.0-alpha.12",
"description": "this is a vuepress theme",
"main": "index.js",
"scripts": {

55
styles/colorMode/colorMixin.styl Normal file
View File

@ -0,0 +1,55 @@
color-mode(accountColor , colorName)
.reco-theme-{colorName}
input
color accountColor!important;
.search-box input
border-color: accountColor!important;
&:focus
border-color: accountColor!important;
.navbar
box-shadow: 0 1px 6px 0 rgba(32,33,36,.28)
.nav-links a:hover,
.nav-links a.router-link-active,
.nav-links a:hover .iconfont,
.nav-links a.router-link-active .iconfont
color accountColor!important;
.home
.hero
.description
color accountColor!important;
.action-button, img
background-color accountColor!important;
color: #fff!important
.features
.feature
h2, p
color accountColor!important;
.footer
a
color accountColor!important;
.abstract-wrapper .abstract-item .title
a
color accountColor!important;
a:after
background-color accountColor!important;
.back-to-ceiling i
color accountColor!important;
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
border-left: 5px solid accountColor!important;
.tags
.tag-item.active, .tag-item:hover
color accountColor!important;
.timeline-wrapper .year-wrapper li:hover
.title
color accountColor!important;
.date::before
background: accountColor!important;
.date
color accountColor!important;
@media (min-width: 765px)
.nav-item > a:not(.external):hover,
.nav-item > a:not(.external).router-link-active
border-color: accountColor!important;
@media (max-width: 959px)
.search-box input
border-color: transparent!important;

17
styles/colorMode/colorMode.styl Normal file
View File

@ -0,0 +1,17 @@
@require './colorMixin.styl'
$fc-red = #f26d6d
$fc-red-name = 'red'
color-mode($fc-red, $fc-red-name)
$fc-blue = #2196f3
$fc-blue-name = 'blue'
color-mode($fc-blue, $fc-blue-name)
$fc-green = #3eaf7c
$fc-green-name = 'green'
color-mode($fc-green, $fc-green-name)
$fc-orange = #fb9b5f
$fc-orange-name = 'orange'
color-mode($fc-orange, $fc-orange-name)

2
styles/colorMode/index.styl Normal file
View File

@ -0,0 +1,2 @@
@require './nightMode.styl'
@require './colorMode.styl'

36
styles/nightMode.styl → styles/colorMode/nightMode.styl
View File

@ -17,7 +17,7 @@ fc-active() {
color: $fcActive!important
}
.night-mode
.reco-theme-night
bc()
fc()
bdc()
@ -27,11 +27,14 @@ fc-active() {
input
bc()
fc()
.search-box input
bdc()
&:focus
bdc()
.navbar
bc()
box-shadow: 0 2px 20px 0 rgba(255,255,255,0.4);
// border-bottom: 1px solid $bdc
border-bottom: 1px solid $bdc
.site-name, .links
bc()
fc()
@ -40,13 +43,23 @@ fc-active() {
.nav-links a:hover .iconfont,
.nav-links a.router-link-active .iconfont
fc-active()
.tags .tag-item:hover
fc-active()
@media (min-width: 765px)
.nav-item > a:not(.external):hover,
.nav-item > a:not(.external).router-link-active
border-bottom: 2px solid $fcActive;
border-color: $fcActive;
.dropdown-wrapper .nav-dropdown
bc()
box-shadow: 0 2px 20px 0 rgba(255,255,255,0.4);
border: 1px solid $bdc
@media (min-width: 719px)
.nav-item > a:not(.external):hover,
.nav-item > a:not(.external).router-link-active
border-bottom: 2px solid $fcActive!important;
@media (max-width: 959px)
.search-box input
border-color: transparent!important;
.home
.hero
.description
@ -84,5 +97,18 @@ fc-active() {
background: $fc
.year-wrapper li
bdc()
.back-to-ceiling i
fc()
.back-to-ceiling
background-color: lighten($bc, 15%)!important
i
fc()
.color-picker .color-button .iconfont
fc()
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
border-left: 5px solid $fcActive
.timeline-wrapper .year-wrapper li:hover
.title
fc()
.date::before
background: $fcActive
.date
fc()

4
styles/theme.styl
View File

@ -4,19 +4,19 @@
@require './arrow'
@require './wrapper'
@require './toc'
@require './colorMode/index'
@require '../fonts/iconfont.css'
html, body
padding 0
margin 0
background-color #fff
body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
color $textColor
background-color #fff
.page
padding-left $sidebarWidth