feat: enhance the styles

vuepress · Jun 5, 2019 · 0a2c067 · 0a2c067
1 parent 6704ede
commit 0a2c067
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 48 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -5,7 +5,8 @@
         <NavLink
           :link="$site.base"
           class="home-link"
-        >{{ $site.title }}</NavLink>
+        >{{ $site.title }}
+        </NavLink>
       </div>
       <div class="header-right-wrap">
         <ul class="nav" v-if="$themeConfig.nav">
@@ -38,7 +39,6 @@
     box-sizing border-box
     // background lighten(#3eaf7c, 90%)
     background-color #FFF
-    font-family Abel, sans-serif
     padding 20px 32px 20px
     margin auto
     border-bottom 1px solid rgba(0, 0, 0, 0.15)
@@ -70,11 +70,13 @@
       margin 0
       letter-spacing 2px
       display block
-      font-weight 900
+      font-family PT Serif, Serif
+
       a
         color #000
+        font-weight 500
         text-decoration none
-  
+    
     .header-right-wrap
       flex 1
       display flex
@@ -86,37 +88,43 @@
         margin 0
         align-items end
         
+        
         .nav-item
           flex 1
           margin-left 20px
           
           a
+            font-family PT Serif, Serif
             font-size 20px
             // color lighten(#3eaf7c, 30%)
             text-decoration none
             transition color .3s
-            
+      
       .search-box
+        font-family PT Serif, Serif
         margin-left 20px
         
         input
           border-radius 5px
           transition all .5s
           border: 1px solid #000
+          
           &:hover
             border: 1px solid $accentColor
             box-shadow 0 0 5px $accentColor
-  
+        
         .suggestions
           border 1px solid #000
           top: 40px
           right 0
+          
           a
             color #000
             text-decoration none
+            
             &.focused
               color $accentColor
-
+  
   @media (max-width: $MQMobile)
     .header-wrapper
       flex-direction column

diff --git a/components/Pagination.vue b/components/Pagination.vue
@@ -5,19 +5,19 @@
   >
     <router-link
       class="prev"
-      title="上一页"
+      title="Previous Page"
       v-if="pagination.hasPrev"
       :to="pagination.prevLink"
     >
-      上一页
+      Prev
     </router-link>
     <router-link
       class="next"
-      title="下一页"
+      title="Next Page"
       v-if="pagination.hasNext"
       :to="pagination.nextLink"
     >
-      下一页
+      Next
     </router-link>
   </div>
 </template>

diff --git a/global-components/BaseListLayout.vue b/global-components/BaseListLayout.vue
@@ -1,20 +1,22 @@
 <template>
   <div id="base-list-layout">
-    <div class="ui-post" v-for="page in pages">
-      <div class="ui-post-title">
-        <NavLink :link="page.path">{{ page.title }}</NavLink>
-      </div>
-      <div class="ui-post-summary">
-        {{ page.frontmatter.summary || page.summary }}
-       <!-- <Content :page-key="page.key" slot-key="intro"/>-->
-      </div>
-      <div class="ui-post-author" v-if="page.frontmatter.author">
-        <NavigationIcon/>
-        <span>{{ page.frontmatter.author }} in {{ page.frontmatter.location }}</span>
-      </div>
-      <div class="ui-post-date" v-if="page.frontmatter.date">
-        <ClockIcon/>
-        <span>{{ new Date(page.frontmatter.date.trim()).toDateString() }}</span>
+    <div class="ui-posts">
+      <div class="ui-post" v-for="page in pages">
+        <div class="ui-post-title">
+          <NavLink :link="page.path">{{ page.title }}</NavLink>
+        </div>
+        <div class="ui-post-summary">
+          {{ page.frontmatter.summary || page.summary }}
+          <!-- <Content :page-key="page.key" slot-key="intro"/>-->
+        </div>
+        <div class="ui-post-author" v-if="page.frontmatter.author">
+          <NavigationIcon/>
+          <span>{{ page.frontmatter.author }} in {{ page.frontmatter.location }}</span>
+        </div>
+        <div class="ui-post-date" v-if="page.frontmatter.date">
+          <ClockIcon/>
+          <span>{{ new Date(page.frontmatter.date.trim()).toDateString() }}</span>
+        </div>
       </div>
     </div>
 
@@ -44,29 +46,36 @@
       padding-bottom 80px
   
   .ui-post
-    margin-bottom 50px
-    
+    padding-bottom 25px
+    margin-bottom 25px
+    border-bottom 1px solid #f1f1f1
+    &:last-child
+      border-bottom 0px
+      margin-bottom 0px
+  
     p
       margin 0
   
   .ui-post-title
-    font-weight bold
-    font-size 24px
+    font-family PT Serif, Serif
+    font-size 28px
     border-bottom 0
     
     a
       cursor pointer
       color #000
       transition all .2s
+      font-weight bold
       text-decoration none
       
       &:hover
         text-decoration underline
   
   .ui-post-summary
     font-size 14px
-    margin-bottom 10px
+    margin-bottom 15px
     color rgba(0, 0, 0, 0.54)
+    font-weight 200
   
   .ui-post-author
     display flex
@@ -75,6 +84,7 @@
     line-height 12px
     color rgba(0, 0, 0, 0.84)
     margin-bottom 3px
+    font-weight 400
     
     svg
       margin-right 5px
@@ -86,7 +96,8 @@
     align-items center
     font-size 12px
     color rgba(0, 0, 0, 0.54)
-    
+    font-weight 200
+  
     svg
       margin-right 5px
       width 14px

diff --git a/index.js b/index.js
@@ -81,7 +81,6 @@ module.exports = (themeConfig, ctx) => {
    */
   if (themeConfig.summary) {
     config.extendPageData = function (pageCtx) {
-      console.log('extendPageData', pageCtx.path)
       const strippedContent = pageCtx._strippedContent
       if (!strippedContent) {
         return

diff --git a/layouts/GlobalLayout.vue b/layouts/GlobalLayout.vue
@@ -11,7 +11,7 @@
 <script>
   import GlobalLayout from '@app/components/GlobalLayout.vue'
   import Header from '@theme/components/Header.vue'
-  import Footer from '@theme/components/Header.vue'
+  import Footer from '@theme/components/Footer.vue'
   
   export default {
     components: {
@@ -25,7 +25,8 @@
 <style lang="stylus">
   .content-wrapper
     padding-top 160px
-    min-height calc(100vh - 80px - 60px)
+    min-height calc(100vh - 80px - 60px - 160px)
     max-width 740px
     padding-left 20vw
+    padding-bottom 80px
 </style>
diff --git a/layouts/Post.vue b/layouts/Post.vue
@@ -19,7 +19,7 @@
   .vuepress-blog-theme-content
     font-size 16px
     letter-spacing 0px
-    font-family PT Serif
+    font-family PT Serif, Serif
     color #2c3e50
     position relative
     box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.07);

diff --git a/layouts/Tags.vue b/layouts/Tags.vue
@@ -3,12 +3,3 @@
     <BlogTags :tags="$tag.list"/>
   </div>
 </template>
-
-<script>
-  export default {
-    created() {
-      console.log(this.$tag.list)
-    }
-  }
-</script>
-
diff --git a/styles/index.styl b/styles/index.styl
@@ -114,17 +114,17 @@ strong
   font-weight 600
 
 h1, h2, h3, h4, h5, h6
-  font-family Abel, sans-serif
   font-weight 600
   line-height 1.25
+  font-family PT Serif
 
   {$contentClass}:not(.custom) > &
     margin-top (0.5rem - $navbarHeight)
     padding-top ($navbarHeight + 1rem)
     margin-bottom 0
 
     &:first-child
-      margin-top -1.5rem
+      margin-top -4rem
       margin-bottom 1rem
 
       + p, + pre, + .custom-block

diff --git a/styles/palette.styl b/styles/palette.styl
@@ -1,4 +1,4 @@
-$accentColor = lighten(#4a154b, 20%)
+$accentColor = lighten(#4a154b, 50%)
 $textColor = #2c3e50
 $borderColor = rgba(0,0,0,.05)
 $codeBgColor = #000