feat: ui update, use narrow layout by default

Author: egoist

src/components/Header.vue

@@ -81,6 +81,7 @@ export default {
   z-index: 33;
   border-bottom: 1px solid var(--border-color);
   background: var(--header-background);
+  color: var(--header-text-color);
 
   @media print {
     position: static;
@@ -100,7 +101,7 @@ export default {
   white-space: nowrap;
 
   & a {
-    color: var(--text-color);
+    color: inherit;
     text-decoration: none;
   }
 }
@@ -126,7 +127,7 @@ export default {
   position: absolute;
   right: 20px;
   top: 0;
-  height: calc(var(--header-height) - 1px);
+  height: 100%;
   background: var(--header-background);
 
   @media print {

src/components/HeaderNav.vue

@@ -3,7 +3,8 @@
     <div class="header-nav-item" v-for="(item, index) in nav" :key="index">
       <div class="dropdown-wrapper" v-if="item.children">
         <span class="dropdown-trigger">
-          {{ item.title }} <span class="arrow"></span>
+          {{ item.title }}
+          <span class="arrow"></span>
         </span>
         <ul class="dropdown-list" v-if="item.children">
           <li
@@ -14,6 +15,7 @@
             <uni-link
               :to="childItem.link"
               :openInNewTab="childItem.openInNewTab"
+              :externalLinkIcon="false"
               >{{ childItem.title }}</uni-link
             >
           </li>
@@ -24,6 +26,7 @@
         v-if="!item.children"
         :to="item.link"
         :openInNewTab="item.openInNewTab"
+        :externalLinkIcon="false"
         >{{ item.title }}</uni-link
       >
     </div>
@@ -56,7 +59,7 @@ export default {
 .header-nav {
   display: flex;
   align-items: center;
-  font-size: 0.9rem;
+  font-size: 1rem;
 
   @media (max-width: 768px) {
     display: none;
@@ -68,21 +71,34 @@ export default {
 }
 
 .header-nav-item {
+  height: 100%;
+
   &:not(:first-child) {
     margin-left: 25px;
   }
 
   & > /deep/ a {
-    border-bottom: 2px solid transparent;
-    display: inline-block;
+    display: flex;
+    align-items: center;
     line-height: 1.4;
+    height: 100%;
+    position: relative;
 
-    &:not(.is-external-link):hover {
-      border-color: var(--nav-link-hover-border-color);
+    &:after {
+      content: '';
+      height: 2px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: block;
     }
 
-    &:not(.is-external-link).router-link-exact-active {
-      border-color: var(--accent-color);
+    &.router-link-exact-active {
+      &:after {
+        background-color: var(--nav-link-border-color);
+      }
     }
   }
 }

src/components/Sidebar.vue

@@ -14,7 +14,7 @@
         v-for="(item, index) in $store.getters.sidebar"
         :key="index"
         :item="item"
-        :open="openItems.indexOf(index) !== -1"
+        :open="closedItems.indexOf(index) === -1"
         @toggle="toggleItem(index)"
       />
     </div>
@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      openItems: []
+      closedItems: []
     }
   },
   watch: {
@@ -52,15 +52,15 @@ export default {
   },
   methods: {
     openItem(index) {
-      if (this.openItems.indexOf(index) === -1) {
-        this.openItems.push(index)
+      if (this.closedItems.indexOf(index) > -1) {
+        this.closedItems = this.closedItems.filter(v => v !== index)
       }
     },
     toggleItem(index) {
-      if (this.openItems.indexOf(index) === -1) {
-        this.openItems.push(index)
+      if (this.closedItems.indexOf(index) === -1) {
+        this.closedItems.push(index)
       } else {
-        this.openItems = this.openItems.filter(v => v !== index)
+        this.closedItems = this.closedItems.filter(v => v !== index)
       }
     },
     getCurrentIndex(currentPath, sidebarItems) {
@@ -91,9 +91,8 @@ export default {
   bottom: 0;
   z-index: 9;
   overflow-y: auto;
-  padding: 30px 0;
+  padding: 40px 0 30px 0;
   word-break: break-word;
-  border-right: 1px solid var(--border-color);
 
   & a {
     text-decoration: none;
@@ -105,6 +104,8 @@ export default {
     transform: translateX(-100%);
     width: 80%;
     transition: transform 0.5s cubic-bezier(0.5, 0.32, 0.01, 1);
+    padding: 30px 0;
+    border-right: 1px solid var(--border-color);
 
     &.isShown {
       transform: translateX(0);

src/components/SidebarItem.vue

@@ -116,7 +116,7 @@ export default {
 
   font-size: 0.875rem;
 
-  & a {
+  & /deep/ a {
     color: var(--sidebar-link-color);
 
     &:hover {

src/components/UniLink.vue

@@ -4,10 +4,19 @@ import {isExternalLink} from '../utils'
 export default {
   functional: true,
 
-  render(h, {data, children}) {
+  props: ['openInNewTab', 'externalLinkIcon'],
+
+  render(
+    h,
+    {
+      data,
+      children,
+      props: {openInNewTab, externalLinkIcon}
+    }
+  ) {
     const attrs = {...data.attrs}
-    const {to, openInNewTab} = attrs
-    delete attrs.openInNewTab
+    const {to} = attrs
+
     if (isExternalLink(to)) {
       delete attrs.to
       delete attrs.prefetchFiles
@@ -24,7 +33,7 @@ export default {
         },
         [
           ...children,
-          openInNewTab === false
+          openInNewTab === false || externalLinkIcon === false
             ? null
             : h('external-link-icon', {class: 'external-link-icon'})
         ]

src/css/main.css

@@ -17,7 +17,6 @@ a {
 }
 
 .Content a {
-  color: var(--accent-color);
   &:hover {
     text-decoration: underline;
   }
@@ -33,7 +32,7 @@ a {
 }
 
 .Wrap {
-  max-width: 1060px;
+  max-width: 1180px;
 }
 
 .layout-wide .Wrap {

src/css/page-content.css

@@ -94,13 +94,16 @@
       font-size: 12px;
       color: #cacaca;
     }
+
+    & code {
+      color: var(--code-block-text-color);
+    }
   }
 
   & pre,
   & .code-mask {
     overflow: auto;
     position: relative;
-    font-size: 13px;
     margin: 0;
     z-index: 2;
     font-family: var(--code-font);
@@ -111,7 +114,7 @@
       margin: 0;
       padding: 0;
       border: none;
-      font-size: 100%;
+      font-size: 1em;
       background: transparent;
     }