🎨 优化部分细节

theme/components/BlogPosts.vue

@@ -86,6 +86,7 @@ export default {
 <style lang="stylus" module>
 .posts {
     position: relative;
+    margin: 0 10px;
 
     .post {
         position: relative;
@@ -111,6 +112,7 @@ export default {
 
         .summary {
             word-break: break-all;
+            opacity: 0.85;
         }
 
         .info {

theme/components/BlogWrapper.vue

@@ -85,6 +85,7 @@ export default {
     box-shadow: $boxShadow;
     transition: all 0.3s;
     border-radius: $borderRadius;
+    border-left: 0.3rem solid $accentColor;
 
     &:hover {
         box-shadow: $boxShadowHover;

theme/components/Categories.vue

@@ -9,6 +9,7 @@
             <router-link :to="item.path">
                 <span :class="$style.name">{{ item.name }}</span>
                 <span
+                    v-if="!simple"
                     :class="$style.num"
                     :style="customStyle(index, item.name == currentCategory)"
                 >{{ item.pages.length }}</span>
@@ -32,7 +33,7 @@ export default {
             }
             const pages = this.$posts || [];
             return [
-                { name: 'ALL', path: categoriesPath, pages },
+                // { name: 'ALL', path: categoriesPath, pages },
                 ...this.list,
             ];
         },
@@ -78,45 +79,40 @@ export default {
         a {
             display: flex;
             justify-content: space-between;
-            padding: 0.4rem 0.8rem;
+            padding: 0.6rem 0.8rem;
             align-items: center;
+        }
 
-            .name {
-                margin-right: 6px;
-            }
-
-            .num {
-                min-width: 1.2rem;
-                height: 1.2rem;
-                text-align: center;
-                line-height: 1.2rem;
-                border-radius: $borderRadius;
-                background: #eee;
-                font-size: 0.6rem;
-                color: #fff;
-            }
+        .num {
+            min-width: 1.2rem;
+            height: 1.2rem;
+            text-align: center;
+            line-height: 1.2rem;
+            border-radius: $borderRadius;
+            background-color: #eee;
+            font-size: 0.6rem;
+            color: #fff;
+            margin-left: 6px;
         }
 
         &[simple] {
+            vertical-align: middle;
             display: inline-block;
-            margin: 0.4rem;
+            margin: 0.3rem;
+            background-color: darken($accentColor, 60%);
+            font-size: 13px;
 
             a {
-                padding: 0.2rem 0.6rem;
+                padding: 0.3rem 0.6rem;
             }
-        }
-
-        &[simple].active {
-            color: #fff;
-            background-color: lighten($accentColor, 20%);
 
             .name {
                 color: #fff;
             }
+        }
 
-            .num {
-                background: #fff;
-            }
+        &[simple].active {
+            background-color: $accentColor;
         }
     }
 }

theme/components/DropdownLink.vue

@@ -122,6 +122,8 @@ export default {
     }
 
     .nav-dropdown {
+        min-width: 100px;
+
         .dropdown-item {
             color: inherit;
             line-height: 1.7rem;

theme/components/PageInfo.vue

@@ -9,17 +9,29 @@
             <Badge v-if="frontmatter.type" style="margin-left: 5px;" :text="frontmatter.type"></Badge>
         </h1>
         <div :class="$style.rows">
-            <span v-if="frontmatter.categories" :class="$style.tags">
-                <SvgIcon :class="$style.icon" name="category"></SvgIcon>
+            <span v-if="frontmatter.categories" :class="$style.categories">
+                <!-- <SvgIcon :class="$style.icon" name="category"></SvgIcon> -->
                 <span
                     v-for="(subItem, subIndex) in categories"
                     :key="subIndex"
+                    :active="currentCategory === subItem"
+                    :class="$style.categoriesItem"
+                    @click="goCategories(subItem)"
+                >{{subItem}}</span>
+            </span>
+            <span v-if="frontmatter.tags" :class="$style.tags">
+                <!-- <SvgIcon :class="$style.icon" name="tags"></SvgIcon> -->
+                <span
+                    v-for="(subItem, subIndex) in tags"
+                    :key="subIndex"
                     :active="currentTag === subItem"
                     :class="$style.tagItem"
-                    @click="goCategories(subItem)"
+                    @click="goTags(subItem)"
                 >{{subItem}}</span>
             </span>
-            <span v-if="frontmatter.author || $i18nText('author')">
+        </div>
+        <div :class="$style.rows">
+            <span v-if="frontmatter.author || $i18nText('author')" :class="$style.author">
                 <SvgIcon :class="$style.icon" name="author"></SvgIcon>
                 <span>{{ frontmatter.author || $i18nText('author') }}</span>
             </span>
@@ -35,16 +47,6 @@
                 <SvgIcon :class="$style.icon" name="date"></SvgIcon>
                 <span>{{ info.lastUpdatedFormat }}</span>
             </span>
-            <span v-if="frontmatter.tags" :class="$style.tags">
-                <SvgIcon :class="$style.icon" name="tags"></SvgIcon>
-                <span
-                    v-for="(subItem, subIndex) in tags"
-                    :key="subIndex"
-                    :active="currentTag === subItem"
-                    :class="$style.tagItem"
-                    @click="goTags(subItem)"
-                >{{subItem}}</span>
-            </span>
         </div>
     </div>
 </template>
@@ -90,7 +92,10 @@ export default {
             return this.frontmatter.categories;
         },
         currentTag() {
-            return this.$currentTags || this.$currentTag || null;
+            return this.$currentTags && this.$currentTags.key || null;
+        },
+        currentCategory() {
+            return this.$currentCategories && this.$currentCategories.key || null;
         },
     },
     methods: {
@@ -120,7 +125,6 @@ export default {
 }
 
 .title {
-    border-bottom: 1px solid $borderColor;
     padding-bottom: 1rem;
 }
 
@@ -130,26 +134,62 @@ export default {
 }
 
 .rows {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1.5;
+    color: lighten($textColor, 30%);
+    margin-bottom: 0.6rem;
+}
+
+.author {
+    margin-right: 1rem;
+}
 
-    >span {
-        margin-right: 1rem;
+.categories, .tags {
+    line-height: 1;
+    font-size: 13px;
+}
+
+.categoriesItem, .tagItem {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.6rem;
+    margin-bottom: 0.6rem;
+    padding: 0.3rem 0.6rem;
+    cursor: pointer;
+    border: 1px solid lighten($textColor, 60%);
+    border-radius: $borderRadius;
+    transition: all 0.3s;
+}
+
+.tagItem {
+    &:hover, &[active] {
+        color: $accentColor;
+        border-color: $accentColor;
     }
 }
 
-.tags {
-    .tagItem {
-        cursor: pointer;
-        margin-right: 6px;
-        word-break: break-all;
+.categoriesItem {
+    position: relative;
+    border-color: transparent;
+    z-index: 0;
 
-        &:hover {
-            color: $accentColor;
-        }
+    &:after {
+        content: '';
+        background: $accentColor;
+        position: absolute;
+        left: 0;
+        width: 3px;
+        top: 0;
+        bottom: 0;
+        transition: all 0.3s;
+        z-index: -1;
+    }
+
+    &:hover, &[active] {
+        color: #fff;
 
-        &[active] {
-            color: $accentColor;
+        &:after {
+            width: 100%;
         }
     }
 }

theme/components/Sidebar.vue

@@ -10,6 +10,7 @@ export default {
 .sidebar {
     background-color: transparent;
     font-size: 14px;
+    transition: all 0.3s;
 
     .sidebar-sub-headers {
         margin-right: 1rem;
@@ -23,4 +24,8 @@ export default {
         }
     }
 }
+
+.sidebar-open .sidebar {
+    background-color: rgba($backgroundColor, 0.98);
+}
 </style>

theme/layouts/TimeLineLayout.vue

@@ -69,6 +69,11 @@ export default {
 }
 
 .desc {
+    .year {
+        &:before {
+            background: $accentColor;
+        }
+    }
 }
 
 .wrapper {

theme/mixins/index.js

@@ -43,11 +43,13 @@ export default {
                 }
                 return obj;
             }, {});
-            return Object.keys(sortP).sort().map(year => {
-                return {
-                    year, data: sortP[year],
-                };
-            });
+            return Object.keys(sortP)
+                .sort((a, b) => parseInt(b) - parseInt(a))
+                .map(year => {
+                    return {
+                        year, data: sortP[year],
+                    };
+                });
         },
         $blogConfig() {
             return this.$themeConfig.blogConfig || {};

theme/styles/mobile.styl

@@ -0,0 +1,37 @@
+@require '~@default-theme/styles/config'
+
+$mobileSidebarWidth = $sidebarWidth * 0.82
+
+// narrow desktop / iPad
+@media (max-width: $MQNarrow)
+  .sidebar
+    font-size 15px
+    width $mobileSidebarWidth
+  .page
+    padding-left $mobileSidebarWidth
+
+// wide mobile
+@media (max-width: $MQMobile)
+  .sidebar
+    top 0
+    padding-top $navbarHeight
+    transform translateX(-100%)
+    transition transform .2s ease
+  .page
+    padding-left 0
+  .theme-container
+    &.sidebar-open
+      .sidebar
+        transform translateX(0)
+    &.no-navbar
+      .sidebar
+        padding-top: 0
+
+// narrow mobile
+@media (max-width: $MQMobileNarrow)
+  h1
+    font-size 1.9rem
+  {$contentClass}
+    div[class*="language-"]
+      margin 0.85rem auto
+      border-radius 0

theme/styles/palette.styl

@@ -5,6 +5,6 @@ $borderColor = #eaecef
 $codeBgColor = #282c34
 $boxShadow = 0 1px 6px 0 rgba(0, 0, 0, 0.2)
 $boxShadowHover = 0 2px 16px 0 rgba(0, 0, 0, 0.2)
-$borderRadius = 4px;
+$borderRadius = 2px;
 $backgroundColor = #ffffff
 

theme/styles/theme.styl

@@ -191,4 +191,4 @@ th, td
     .page
       padding-left 0
 
-@require '~@default-theme/styles/mobile.styl'
+@require '~@theme/styles/mobile.styl'