feat: ui update, use narrow layout by default

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;
  }