Merge pull request #20 from recoluan/feature/0.x

Feature/0.x

components/Valine/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="valine-wrapper">
-    <div id="valine" v-show="isComment"></div>
+  <div class="valine-wrapper" v-show="isComment">
+    <div id="valine"></div>
   </div>
 </template>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "this is a vuepress theme",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/recoluan/vuepress-theme-reco/issues"
   },
-  "homepage": "https://recoluan.gitlab.io",
+  "homepage": "https://recoluan.gitlab.io/vuepress-theme-reco-doc/",
   "_from": "vuepress-theme-reco@0.2.1",
   "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
   "dependencies": {

pages/Home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home" :class="recoShow?'reco-show': 'reco-hide'">
     <div class="hero">
       <img v-if="data.heroImage" :style="heroImageStyle" :src="$withBase(data.heroImage)" alt="hero">
 
@@ -19,12 +19,12 @@
       </div>
     </div>
 
-    <Content custom/>
+    <Content class="home-center" custom/>
 
     <div class="footer">
       <span>
         <i class="iconfont reco-theme"></i>
-        <a target="blank" href="https://recoluan.gitlab.io/vuepress-theme-reco-doc/">vuePress-theme-reco</a>
+        <a target="blank" href="https://recoluan.gitlab.io/vuepress-theme-reco-doc/">VuePress-theme-reco</a>
       </span>
       <span>
         <i class="iconfont reco-other"></i>
@@ -47,6 +47,11 @@ import AccessNumber from '../../components/Valine/AccessNumber'
 
 export default {
   components: { NavLink, AccessNumber },
+  data () {
+    return {
+      recoShow: false
+    }
+  },
   computed: {
     year () {
       return new Date().getFullYear()
@@ -68,12 +73,16 @@ export default {
         margin: '6rem auto 1.5rem'
       }
     }
+  },
+  mounted () {
+    this.recoShow = true
   }
 };
 </script>
 
 <style lang="stylus">
 @import '../../styles/config.styl';
+@import '../../styles/loadMixin.styl';
 
 .home {
   padding: $navbarHeight 2rem 0;
@@ -83,6 +92,9 @@ export default {
   .hero {
     text-align: center;
 
+    img {
+      background-color: $accentColor;
+    }
     h1 {
       font-size: 2.5rem;
     }
@@ -95,7 +107,7 @@ export default {
       max-width: 35rem;
       font-size: 1.6rem;
       line-height: 1.3;
-      color: lighten($textColor, 40%);
+      color: lighten($textColor, 20%);
     }
 
     .action-button {
@@ -107,6 +119,7 @@ export default {
       border-radius: 4px;
       transition: background-color 0.1s ease;
       box-sizing: border-box;
+      load-start()
 
       &:hover {
         background-color: lighten($accentColor, 10%);
@@ -139,7 +152,7 @@ export default {
     }
 
     p {
-      color: lighten($textColor, 25%);
+      color: lighten($textColor, 20%);
     }
 
     &:hover {
@@ -152,6 +165,7 @@ export default {
     border-top: 1px solid $borderColor;
     text-align: center;
     color: lighten($textColor, 25%);
+    load-start()
     > span {
       margin-left 1rem
       > i {
@@ -159,6 +173,58 @@ export default {
       } 
     }
   }
+
+  &.reco-hide {
+    .hero {
+      img {
+        load-start()
+      }
+      .h1 {
+        load-start()
+      }
+      .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)
+      }
+    }
+    .features {
+      load-end(0.40s)
+    }
+    .home-center {
+      load-end(0.48s)
+    }
+    .footer {
+      load-end(0.56s)
+    }
+  }
 }
 
 @media (max-width: $MQMobile) {

pages/Page/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page" :class="recoShow?'reco-show': 'reco-hide'">
     <slot name="top"/>
     <div class="page-title" v-if="!(isCategories || isTags || isTimeLine)">
       <h1>{{$page.title}}</h1>
@@ -72,7 +72,8 @@ export default {
   data () {
     return {
       currentTag: '',
-      currentPage: 1
+      currentPage: 1,
+      recoShow: false
     }
   },
   props: ['sidebarItems'],
@@ -155,6 +156,9 @@ export default {
       )
     },
   },
+  mounted () {
+    this.recoShow = true
+  },
   beforeUpdate () {
     this.$page.currentPage = 1
   },
@@ -225,14 +229,16 @@ function find (page, items, offset) {
 
 <style lang="stylus" scoped>
 @import '../../styles/config.styl'
-@require '../../styles/wrapper.styl'
+@import '../../styles/wrapper.styl'
+@import '../../styles/loadMixin.styl';
 
 .page
+  padding-top 6rem
   padding-bottom 2rem
 
 .page-title
   max-width: 740px;
-  margin: 6rem auto 0;
+  margin: 0 auto;
 
 .page-edit
   @extend $wrapper
@@ -267,6 +273,13 @@ function find (page, items, offset) {
   .next
     float right
 
+.reco-hide.page {
+  load-start()
+}
+.reco-show.page {
+  load-end(0.08s)
+}
+
 @media (max-width: $MQMobile)
   .page-edit
     .edit-link

styles/config.styl

@@ -1,6 +1,6 @@
 // colors
-$accentColor = #fb9b5f
-$textColor = #2c3e50
+$accentColor = #424242
+$textColor = #232321
 $borderColor = #eaecef
 $codeBgColor = #282c34
 $arrowBgColor = #ccc

styles/custom-blocks.styl

@@ -10,11 +10,11 @@
   &.tip
     background-color #f3f5f7
     border-color #67cc86
-    color darken(#67cc86, 70%)
+    // color darken(#67cc86, 70%)
   &.warning
     background-color #fbf0ea
     border-color #fb9b5f
-    color darken(#ffe564, 70%)
+    // color darken(#ffe564, 70%)
     .custom-block-title
       color darken(#ffe564, 50%)
     a
@@ -22,7 +22,7 @@
   &.danger
     background-color #fceaea
     border-color #f26d6d
-    color darken(red, 70%)
+    // color darken(red, 70%)
     .custom-block-title
       color darken(red, 40%)
     a

styles/loadMixin.styl

@@ -0,0 +1,11 @@
+load-start(){
+  transition:all .25s;
+  transform:translateY(-20px);
+  opacity 0
+}
+
+load-end($delayTime){
+  transform:translateY(0);
+  transition-delay: $delayTime
+  opacity 1
+}

styles/theme.styl

@@ -119,7 +119,7 @@ h1, h2, h3, h4, h5, h6
     padding-top ($navbarHeight + 1rem)
     margin-bottom 0
     &:first-child
-      margin-top -1.5rem
+      margin-top -6.5rem
       margin-bottom 1rem
       + p, + pre, + .custom-block
         margin-top 2rem