feat: add dark mode(part.7)

1. Optimize the password page
2. Adapt to dark mode (sidebar\timeline)

Author: reco_luan

components/Common.vue

@@ -270,7 +270,6 @@ export default {
     bottom 0
     left 0
     right 0
-    margin auto
   .hide
     height 100vh
     overflow hidden

components/Password.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="password-shadow" :class="{'is-home': !isPage}">
+  <div class="password-shadow">
     <h3 class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
     <p class="description" v-if="!isPage">{{$site.description || $localeConfig.description}}</p>
     <label class="inputBox" id="box">
@@ -100,37 +100,25 @@ export default {
 
 <style lang="stylus" scoped>
 @require '../styles/mode.styl'
-.theme-container.no-sidebar
-  .password-shadow
-    padding-left 0
-
-.password-shadow.is-home {
-  padding-left 0
-}
 
 .password-shadow {
-  position relative
-  width 100vw;
-  height 100vh;
   overflow hidden
   position relative
-  padding-left: 20rem;
   background #fff
   background var(--background-color)
   box-sizing border-box
   .title {
-    margin 8rem auto 6rem
+    margin 8rem auto 2rem
     width 100%
     text-align center
     font-size 30px
     box-sizing: border-box;
-    // padding: 0 10px;
     text-shadow $textShadow
     color $textColor
     color var(--text-color)
   }
   .description {
-    margin auto
+    margin 0 auto 6rem
     text-align center
     color $textColor
     color var(--text-color)
@@ -193,6 +181,7 @@ export default {
       font-size 30px
     }
     button{
+      overflow hidden
       width:0px;
       height:98px;
       border-radius: $borderRadius
@@ -304,26 +293,13 @@ export default {
     }
     .footer {
       margin-left 0
-      
+
     }
   }
   @media (max-width: $MQNarrow) {
-    // .inputBox{
-    //   padding-left $mobileSidebarWidth
-    // }
     .footer {
-        margin-left 0
-      }
+      margin-left 0
+    }
   }
 }
-
-// narrow desktop / iPad
-@media (max-width: $MQNarrow)
-  .password-shadow
-    padding-left $mobileSidebarWidth
-
-// wide mobile
-@media (max-width: $MQMobile)
-  .password-shadow
-    padding-left 0
 </style>

components/Sidebar.vue

@@ -30,7 +30,7 @@ export default {
     display inline-block
   .nav-links
     display none
-    border-bottom 1px solid $borderColor
+    border-bottom 1px solid var(--border-color)
     padding 0.5rem 0 0.75rem 0
     a
       font-weight 600

example/docs/.vuepress/config.js

@@ -49,7 +49,7 @@ module.exports = {
     // 备案号
     record: 'xxxx',
     // 项目开始时间
-    startYear: '2017'
+    startYear: '2017',
     /**
      * 密钥 (if your blog is private)
      */
@@ -68,6 +68,9 @@ module.exports = {
     //   appId: '...',// your appId
     //   appKey: '...', // your appKey
     // }
+    keyPage: {
+      keys: ['123456']
+    }
   },
   markdown: {
     lineNumbers: true

example/docs/views/other/guide.md

@@ -3,6 +3,8 @@ title: vuepress-theme-reco
 date: 2019-04-09
 categories:
   - other
+keys:
+  - '123' 
 ---
 
 ![vuepress](https://img.shields.io/badge/vuepress-0.14.8-brightgreen.svg)

layouts/TimeLines.vue

@@ -123,7 +123,7 @@ export default {
   }
   .desc, .year {
     position: relative;
-    color #666
+    color var(--text-color);
     font-size 16px
     &:before {
       content: " ";
@@ -142,7 +142,7 @@ export default {
   }
   .year {
     margin: 80px 0 0px;
-    color #555
+    color var(--text-color);
     font-weight: 700;
     font-size 26px
   }
@@ -168,7 +168,7 @@ export default {
       .date {
         width 40px
         line-height 30px
-        color: #555;
+        color $textColorSub
         font-size 12px
         &::before {
           content: " ";
@@ -186,7 +186,7 @@ export default {
       }
       .title {
         line-height 30px
-        color: #555;
+        color $textColorSub
         font-size 16px
         cursor pointer
       }

styles/arrow.styl

@@ -7,16 +7,16 @@
   &.up
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-bottom 6px solid $arrowBgColor
+    border-bottom 6px solid $textColorSub
   &.down
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-top 6px solid $arrowBgColor
+    border-top 6px solid $textColorSub
   &.right
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-left 6px solid $arrowBgColor
+    border-left 6px solid $textColorSub
   &.left
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-right 6px solid $arrowBgColor
+    border-right 6px solid $textColorSub

styles/mobile.styl

@@ -7,10 +7,8 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
   .sidebar
     font-size 15px
     width $mobileSidebarWidth
-  .page
-    padding-left $mobileSidebarWidth
-  .password-shadow
-    padding-left $mobileSidebarWidth  
+  .page, .password-wrapper-in
+    margin-left $mobileSidebarWidth
 
 // wide mobile
 @media (max-width: $MQMobile)
@@ -19,8 +17,8 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
     padding-top $navbarHeight
     transform translateX(-100%)
     transition transform .2s ease
-  .page
-    padding-left 0
+  .page, .password-wrapper-in
+    margin-left 0
   .theme-container
     &.sidebar-open
       .sidebar
@@ -29,7 +27,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
       .sidebar
         padding-top: 0
   .password-shadow
-    padding-left 0      
+    padding-left 0
 
 // narrow mobile
 @media (max-width: $MQMobileNarrow)

styles/theme.styl

@@ -17,9 +17,9 @@ body
   color var(--text-color)
   background-color var(--background-color)
 
-.page
+.page, .password-wrapper-in
   overflow-x: hidden
-  padding-left $sidebarWidth
+  margin-left $sidebarWidth
 
 .navbar
   position fixed
@@ -181,8 +181,8 @@ th, td
   .theme-container.no-sidebar
     .sidebar
       display none
-    .page
-      padding-left 0
+    .page, .password-wrapper-in
+      margin-left 0
 
 @require 'mobile.styl'