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

Merge pull request #64 from vuepress-reco/feature/reco

Browse Source 
Feature/reco
This commit is contained in:
reco_luan 2019-10-17 14:29:30 +08:00 committed by GitHub
commit cac8269194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 120 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/AlgoliaSearchBox.vue
View File

@ -60,6 +60,7 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../styles/recoConfig.styl'
.algolia-search-wrapper .algolia-search-wrapper
& > span & > span
vertical-align middle vertical-align middle
@ -68,7 +69,7 @@ export default {
.ds-dropdown-menu .ds-dropdown-menu
background-color #fff background-color #fff
border 1px solid #999 border 1px solid #999
border-radius 4px border-radius $borderRadius
font-size 16px font-size 16px
margin 6px 0 0 margin 6px 0 0
padding 4px padding 4px

6
components/DropdownLink.vue
View File

@ -80,6 +80,8 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../styles/recoConfig.styl'
.dropdown-wrapper .dropdown-wrapper
cursor pointer cursor pointer
.dropdown-title .dropdown-title
@ -173,9 +175,9 @@ export default {
right 0 right 0
background-color #fff background-color #fff
padding 0.6rem 0 padding 0.6rem 0
box-shadow: 0 4px 20px 0 rgba(0,0,0,.2); box-shadow: $boxShadow;
text-align left text-align left
border-radius 0.25rem border-radius $borderRadius
white-space nowrap white-space nowrap
margin 0 margin 0
</style> </style>

3
components/Home.vue
View File

@ -98,6 +98,7 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../styles/recoConfig.styl'
@require '../styles/loadMixin.styl' @require '../styles/loadMixin.styl'
.home { .home {
@ -127,7 +128,7 @@ export default {
color: #fff; color: #fff;
background-color: $accentColor; background-color: $accentColor;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border-radius: 4px; border-radius: $borderRadius
transition: background-color 0.1s ease; transition: background-color 0.1s ease;
box-sizing: border-box; box-sizing: border-box;
load-start() load-start()

13
components/HomeBlog.vue
View File

@ -148,7 +148,6 @@ export default {
} }
}, },
mounted () { mounted () {
console.log(this)
this.recoShow = true this.recoShow = true
}, },
methods: { methods: {
@ -186,6 +185,7 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../styles/recoConfig.styl'
@require '../styles/loadMixin.styl' @require '../styles/loadMixin.styl'
.home-blog { .home-blog {
@ -236,11 +236,12 @@ export default {
margin-left 15px; margin-left 15px;
flex 0 0 300px flex 0 0 300px
height auto; height auto;
box-shadow 0 2px 10px rgba(0,0,0,0.2); box-shadow $boxShadow;
border-radius $borderRadius
box-sizing border-box box-sizing border-box
padding 0 15px padding 0 15px
&:hover { &:hover {
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2); box-shadow: $boxShadowHover;
} }
.personal-img { .personal-img {
display block display block
@ -279,8 +280,8 @@ export default {
margin-bottom .4rem margin-bottom .4rem
padding: .4rem .8rem; padding: .4rem .8rem;
transition: all .5s transition: all .5s
border-radius 2px border-radius $borderRadius
box-shadow 0 1px 4px 0 rgba(0,0,0,0.2) box-shadow $boxShadow
&:not(:first-child) { &:not(:first-child) {
border-top: none; border-top: none;
} }
@ -302,7 +303,7 @@ export default {
height 1.6rem height 1.6rem
text-align center text-align center
line-height 1.6rem line-height 1.6rem
border-radius 4px border-radius $borderRadius
background #eee background #eee
font-size .6rem font-size .6rem
color $textColor color $textColor

4
components/Navbar.vue
View File

@ -87,13 +87,15 @@ function css (el, property) {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../styles/recoConfig.styl'
$navbar-vertical-padding = 0.7rem $navbar-vertical-padding = 0.7rem
$navbar-horizontal-padding = 1.5rem $navbar-horizontal-padding = 1.5rem
.navbar .navbar
padding $navbar-vertical-padding $navbar-horizontal-padding padding $navbar-vertical-padding $navbar-horizontal-padding
line-height $navbarHeight - 1.4rem line-height $navbarHeight - 1.4rem
box-shadow 0 1px 6px 0 rgba(32,33,36,.28) box-shadow $boxShadow
a, span, img a, span, img
display inline-block display inline-block
.logo .logo

7
components/NoteAbstract.vue
View File

@ -26,6 +26,7 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
.abstract-wrapper .abstract-wrapper
width 100% width 100%
@ -34,13 +35,13 @@ export default {
padding: 16px 20px; padding: 16px 20px;
width 100% width 100%
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: $borderRadius
box-shadow: 0 2px 10px rgba(0,0,0,0.2); box-shadow: $boxShadow;
box-sizing: border-box; box-sizing: border-box;
transition all .3s transition all .3s
background-color $bgColor background-color $bgColor
&:hover &:hover
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2); box-shadow: $boxShadowHover
.title .title
position: relative; position: relative;
font-size: 1.28rem; font-size: 1.28rem;

4
components/Page.vue
View File

@ -228,7 +228,7 @@ function flatten (items, res) {
@require '../styles/loadMixin.styl' @require '../styles/loadMixin.styl'
.page .page
padding-top 6rem padding-top 5rem
padding-bottom 2rem padding-bottom 2rem
display block display block
#time-line { #time-line {
@ -238,7 +238,7 @@ function flatten (items, res) {
.page-title .page-title
max-width: 740px; max-width: 740px;
margin: 0 auto; margin: 0 auto;
padding: 0rem 2.5rem; padding: 1rem 2.5rem;
.page-edit .page-edit
@extend $wrapper @extend $wrapper
padding-top 1rem padding-top 1rem

15
components/Password.vue
View File

@ -94,6 +94,7 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
.theme-container.no-sidebar .theme-container.no-sidebar
.password-shadow .password-shadow
padding-left 0 padding-left 0
@ -119,7 +120,7 @@ export default {
font-size 30px font-size 30px
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
text-shadow 0 2px 10px rgba(0,0,0,0.2); text-shadow $textShadow
} }
.description { .description {
position: absolute; position: absolute;
@ -132,13 +133,13 @@ export default {
font-size 22px font-size 22px
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
text-shadow 0 2px 10px rgba(0,0,0,0.2); text-shadow $textShadow
} }
.inputBox{ .inputBox{
max-width:700px; max-width:700px;
height: 100px; height: 100px;
background: $accentColor; background: $accentColor;
border-radius: 2px; border-radius: $borderRadius
position: absolute; position: absolute;
left 0 left 0
right 0 right 0
@ -191,7 +192,7 @@ export default {
button{ button{
width:0px; width:0px;
height:98px; height:98px;
border-radius: 2px; border-radius: $borderRadius
position: absolute; position: absolute;
border 1px solid $accentColor border 1px solid $accentColor
right:1px; right:1px;
@ -229,7 +230,7 @@ export default {
max-width:700px; max-width:700px;
height: 60px; height: 60px;
background: $accentColor; background: $accentColor;
border-radius: 2px; border-radius: $borderRadius
position: absolute; position: absolute;
left 0 left 0
right 0 right 0
@ -282,7 +283,7 @@ export default {
button{ button{
width:0px; width:0px;
height:58px; height:58px;
border-radius: 2px; border-radius: $borderRadius
position: absolute; position: absolute;
border 1px solid $accentColor border 1px solid $accentColor
right:1px; right:1px;
@ -311,4 +312,4 @@ export default {
@media (max-width: $MQMobile) @media (max-width: $MQMobile)
.password-shadow .password-shadow
padding-left 0 padding-left 0
</style> </style>

8
components/TagList.vue
View File

@ -45,6 +45,8 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
.tags .tags
margin 30px 0 margin 30px 0
span span
@ -53,14 +55,14 @@ export default {
padding: 4px 8px; padding: 4px 8px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border-radius: 2px; border-radius: $borderRadius
background: #fff; background: #fff;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
box-shadow 0 1px 4px 0 rgba(0,0,0,0.2) box-shadow $boxShadow
transition: all .5s transition: all .5s
&:hover &:hover
transform scale(1.04) transform scale(1.04)
&.active &.active
transform scale(1.2) transform scale(1.2)
</style> </style>

11
components/Theme/ThemeOptions.vue
View File

@ -65,6 +65,7 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../../styles/recoConfig.styl'
.color-theme-options { .color-theme-options {
display: flex; display: flex;
@ -72,21 +73,13 @@ export default {
li { li {
width: 20%; width: 20%;
text-align: center; text-align: center;
a { a {
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 2px; border-radius: $borderRadius
&.default-theme { &.default-theme {
background-color: $accentColor; background-color: $accentColor;
} }
for key, value in $themePicker {
&.{key}-theme {
background-color: value;
}
}
} }
} }
} }

3
components/Theme/index.vue
View File

@ -41,6 +41,7 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@require '../../styles/recoConfig.styl'
.color-picker { .color-picker {
position: relative; position: relative;
@ -64,7 +65,7 @@ export default {
margin: 0; margin: 0;
padding: 1em; padding: 1em;
border: 1px solid $borderColor; border: 1px solid $borderColor;
border-radius: 4px; border-radius: $borderRadius
transform: translateX(-50%); transform: translateX(-50%);
z-index: 150; z-index: 150;

5
global-components/Badge.vue
View File

@ -24,19 +24,20 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
.badge .badge
display inline-block display inline-block
font-size 14px font-size 14px
height 18px height 18px
line-height 18px line-height 18px
border-radius 3px border-radius $borderRadius
padding 0 6px padding 0 6px
color white color white
background-color #42b983 background-color #42b983
&.tip, &.green &.tip, &.green
background-color #42b983 background-color #42b983
&.error &.error
background-color #DA5961 //#f66 background-color #DA5961
&.warning, &.warn, &.yellow &.warning, &.warn, &.yellow
background-color darken(#ffe564, 35%) background-color darken(#ffe564, 35%)
& + & & + &

9
layouts/Category.vue
View File

@ -95,6 +95,7 @@ export default {
<style src="../styles/theme.styl" lang="stylus"></style> <style src="../styles/theme.styl" lang="stylus"></style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
@require '../styles/loadMixin.styl' @require '../styles/loadMixin.styl'
.categories-wrapper .categories-wrapper
max-width: 740px; max-width: 740px;
@ -108,9 +109,9 @@ export default {
margin: 4px 8px 10px; margin: 4px 8px 10px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border-radius: 2px; border-radius: $borderRadius
font-size: 13px; font-size: 13px;
box-shadow 0 1px 4px 0 rgba(0,0,0,0.2) box-shadow $boxShadow
transition: all .5s transition: all .5s
&:hover, &.active { &:hover, &.active {
background $accentColor background $accentColor
@ -136,7 +137,7 @@ export default {
height 1.2rem height 1.2rem
text-align center text-align center
line-height 1.2rem line-height 1.2rem
border-radius 4px border-radius $borderRadius
background #eee background #eee
font-size .7rem font-size .7rem
} }
@ -168,4 +169,4 @@ export default {
font-size .8em font-size .8em
float none float none
text-align left text-align left
</style> </style>

2
styles/colorMixin.styl
View File

@ -14,7 +14,7 @@ color-mode(accountColor , colorName)
&:focus &:focus
border-color: accountColor!important; border-color: accountColor!important;
.navbar .navbar
box-shadow: 0 1px 6px 0 rgba(32,33,36,.28) box-shadow: $boxShadow
.nav-links a:hover, .nav-links a:hover,
.nav-links a.router-link-active, .nav-links a.router-link-active,
.nav-links a:hover .iconfont, .nav-links a:hover .iconfont,

6
styles/recoConfig.styl
View File

@ -1,10 +1,14 @@
// colors // colors
$accentColor = #424242 $accentColor = #424242
$textColor = #232321 $textColor = #232321
$boxShadow = 0 1px 6px 0 rgba(0, 0, 0, 0.2)
$boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
$textShadow = 0 2px 4px rgba(0, 0, 0, 0.2);
$borderRadius = .25rem
$themePicker = { $themePicker = {
red: #f26d6d, red: #f26d6d,
blue: #2196f3, blue: #2196f3,
green: #3eaf7c, green: #3eaf7c,
orange: #fb9b5f orange: #fb9b5f
} }

73
styles/theme.styl
View File

@ -10,6 +10,7 @@
html, body html, body
padding 0 padding 0
margin 0 margin 0
text-shadow: $textShadow
body body
font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased -webkit-font-smoothing antialiased
@ -113,7 +114,7 @@ h1, h2, h3, h4, h5, h6
padding-top ($navbarHeight + 1rem) padding-top ($navbarHeight + 1rem)
margin-bottom 0 margin-bottom 0
&:first-child &:first-child
margin-top -1.5rem margin-top -3.5rem
margin-bottom 1rem margin-bottom 1rem
+ p, + pre, + .custom-block + p, + pre, + .custom-block
margin-top 2rem margin-top 2rem
@ -121,7 +122,7 @@ h1, h2, h3, h4, h5, h6
opacity: 1 opacity: 1
h1 h1
font-size 2.2rem font-size 1.95rem
h2 h2
font-size 1.65rem font-size 1.65rem
@ -196,7 +197,7 @@ th, td
/************** 滚动条 **************/ /************** 滚动条 **************/
::-webkit-scrollbar ::-webkit-scrollbar
width: 5px; width: 6px;
height: 5px; height: 5px;
::-webkit-scrollbar-track-piece ::-webkit-scrollbar-track-piece
@ -211,11 +212,11 @@ th, td
::-webkit-scrollbar-thumb:horizontal ::-webkit-scrollbar-thumb:horizontal
width: 5px; width: 5px;
background-color: rgba(125, 125, 125, 0.7); background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
/************** 流程图的滚动条 **************/ /************** 流程图的滚动条 **************/
.vuepress-flowchart .vuepress-flowchart
overflow: auto overflow: auto
/************** 腾讯 404 公益 **************/ /************** 腾讯 404 公益 **************/
@ -228,11 +229,67 @@ th, td
padding: 6px 20px!important padding: 6px 20px!important
text-decoration: none!important text-decoration: none!important
border-radius: 4px border-radius: 4px
} }
} }
@media screen and (max-width: 720px) { @media screen and (max-width: 720px) {
.mod_404 .desc { .mod_404 .desc {
margin: 50px 0 margin: 50px 0
} }
} }
/************** 评论功能 **************/
.comments-wrapper
.valine-wrapper
#valine.v
.vwrap
background: #f2f2f2
box-shadow: $boxShadow
.vcontrol
.vsubmit
background: #fff
.vinfo
padding-left: .6rem
.vlist
padding: 0 .6rem
border-radius: $borderRadius
.vcard
.vimg
border-radius: $borderRadius
box-shadow: $boxShadow
border: none
.vh
.vhead
.vsys
box-shadow: $boxShadow
.vmeta
.vat
background: #f2f2f2
box-shadow: $boxShadow
border-radius: $borderRadius
padding: 0 .4rem
color: #313131
border: 1px solid #ededed
.vcontent
background: #f2f2f2
box-shadow: $boxShadow
border-radius: $borderRadius
margin-right: 3.6rem
padding-top: .1rem
padding-left: .6rem
padding-right: .6rem
padding-bottom: 0.05rem
p .at
color: #1abc9c
.info
padding-right: .6rem
/************** 分页 **************/
.pagation
.pagation-list
.jump, .jumpinp input
box-shadow: $boxShadow
.search-box input
border-radius: $borderRadius