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

6
components/DropdownLink.vue
View File

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

3
components/Home.vue
View File

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

13
components/HomeBlog.vue
View File

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

4
components/Navbar.vue
View File

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

7
components/NoteAbstract.vue
View File

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

4
components/Page.vue
View File

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

15
components/Password.vue
View File

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

8
components/TagList.vue
View File

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

11
components/Theme/ThemeOptions.vue
View File

@ -65,6 +65,7 @@ export default {
</script>
<style lang="stylus">
@require '../../styles/recoConfig.styl'
.color-theme-options {
display: flex;
@ -72,21 +73,13 @@ export default {
li {
width: 20%;
text-align: center;
a {
width: 15px;
height: 15px;
border-radius: 2px;
border-radius: $borderRadius
&.default-theme {
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>
<style lang="stylus">
@require '../../styles/recoConfig.styl'
.color-picker {
position: relative;
@ -64,7 +65,7 @@ export default {
margin: 0;
padding: 1em;
border: 1px solid $borderColor;
border-radius: 4px;
border-radius: $borderRadius
transform: translateX(-50%);
z-index: 150;

5
global-components/Badge.vue
View File

@ -24,19 +24,20 @@ export default {
</script>
<style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
.badge
display inline-block
font-size 14px
height 18px
line-height 18px
border-radius 3px
border-radius $borderRadius
padding 0 6px
color white
background-color #42b983
&.tip, &.green
background-color #42b983
&.error
background-color #DA5961 //#f66
background-color #DA5961
&.warning, &.warn, &.yellow
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 lang="stylus" scoped>
@require '../styles/recoConfig.styl'
@require '../styles/loadMixin.styl'
.categories-wrapper
max-width: 740px;
@ -108,9 +109,9 @@ export default {
margin: 4px 8px 10px;
display: inline-block;
cursor: pointer;
border-radius: 2px;
border-radius: $borderRadius
font-size: 13px;
box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
box-shadow $boxShadow
transition: all .5s
&:hover, &.active {
background $accentColor
@ -136,7 +137,7 @@ export default {
height 1.2rem
text-align center
line-height 1.2rem
border-radius 4px
border-radius $borderRadius
background #eee
font-size .7rem
}
@ -168,4 +169,4 @@ export default {
font-size .8em
float none
text-align left
</style>
</style>

2
styles/colorMixin.styl
View File

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

6
styles/recoConfig.styl
View File

@ -1,10 +1,14 @@
// colors
$accentColor = #424242
$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 = {
red: #f26d6d,
blue: #2196f3,
green: #3eaf7c,
orange: #fb9b5f
}
}

73
styles/theme.styl
View File

@ -10,6 +10,7 @@
html, body
padding 0
margin 0
text-shadow: $textShadow
body
font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
@ -113,7 +114,7 @@ h1, h2, h3, h4, h5, h6
padding-top ($navbarHeight + 1rem)
margin-bottom 0
&:first-child
margin-top -1.5rem
margin-top -3.5rem
margin-bottom 1rem
+ p, + pre, + .custom-block
margin-top 2rem
@ -121,7 +122,7 @@ h1, h2, h3, h4, h5, h6
opacity: 1
h1
font-size 2.2rem
font-size 1.95rem
h2
font-size 1.65rem
@ -196,7 +197,7 @@ th, td
/************** 滚动条 **************/
::-webkit-scrollbar
width: 5px;
width: 6px;
height: 5px;
::-webkit-scrollbar-track-piece
@ -211,11 +212,11 @@ th, td
::-webkit-scrollbar-thumb:horizontal
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
/************** 流程图的滚动条 **************/
.vuepress-flowchart
overflow: auto
overflow: auto
/************** 腾讯 404 公益 **************/
@ -228,11 +229,67 @@ th, td
padding: 6px 20px!important
text-decoration: none!important
border-radius: 4px
}
}
}
@media screen and (max-width: 720px) {
.mod_404 .desc {
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