From e0c3e70dd6997c0019cd32616720cdb682c90b09 Mon Sep 17 00:00:00 2001 From: EGOIST <0x142857@gmail.com> Date: Thu, 3 Oct 2019 18:47:31 +0800 Subject: [PATCH] feat: ui update, use narrow layout by default --- src/components/Header.vue | 5 +- src/components/HeaderNav.vue | 32 ++++++-- src/components/Sidebar.vue | 19 ++--- src/components/SidebarItem.vue | 2 +- src/components/UniLink.vue | 17 +++- src/css/main.css | 3 +- src/css/page-content.css | 7 +- src/css/prism.css | 139 +++++++++++++-------------------- src/store.js | 2 +- src/utils/cssVariables.js | 38 +++++---- src/views/Home.vue | 4 +- website/index.js | 5 +- 12 files changed, 136 insertions(+), 137 deletions(-) diff --git a/src/components/Header.vue b/src/components/Header.vue index c82f3e66..43535fe5 100644 --- a/src/components/Header.vue +++ b/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 { diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue index 478b253a..2e88a805 100644 --- a/src/components/HeaderNav.vue +++ b/src/components/HeaderNav.vue @@ -3,7 +3,8 @@
- {{ item.title }} + {{ item.title }} +
@@ -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); + } } } } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 3c620067..c857a390 100644 --- a/src/components/Sidebar.vue +++ b/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)" />
@@ -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); diff --git a/src/components/SidebarItem.vue b/src/components/SidebarItem.vue index 8a2f4055..c8fc2ab0 100644 --- a/src/components/SidebarItem.vue +++ b/src/components/SidebarItem.vue @@ -116,7 +116,7 @@ export default { font-size: 0.875rem; - & a { + & /deep/ a { color: var(--sidebar-link-color); &:hover { diff --git a/src/components/UniLink.vue b/src/components/UniLink.vue index 51d18bbb..a4c4fb97 100644 --- a/src/components/UniLink.vue +++ b/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'}) ] diff --git a/src/css/main.css b/src/css/main.css index 152ae02d..19b0e871 100644 --- a/src/css/main.css +++ b/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 { diff --git a/src/css/page-content.css b/src/css/page-content.css index 9a2bde4c..a9c3a017 100644 --- a/src/css/page-content.css +++ b/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; } diff --git a/src/css/prism.css b/src/css/prism.css index 892987cb..c7700e02 100644 --- a/src/css/prism.css +++ b/src/css/prism.css @@ -1,120 +1,89 @@ + +/* https://github.com/SaraVieira/prism-theme-night-owl */ + .token.comment, -.token.block-comment, .token.prolog, -.token.doctype, .token.cdata { - color: #7D8B99; + color: rgb(99, 119, 119); + font-style: italic; } .token.punctuation { - color: #5F6364; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.function-name, -.token.constant, -.token.symbol, -.token.deleted { - color: #c92c2c; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.function, -.token.builtin, -.token.inserted { - color: #2f9c0a; + color: rgb(199, 146, 234); } -.token.operator, -.token.entity, -.token.url, -.token.variable { - color: #a67f59; - background: transparent; +.namespace { + color: rgb(178, 204, 214); } -.token.atrule, -.token.attr-value, -.token.keyword, -.token.class-name { - color: #1990b8; +.token.deleted { + color: rgba(239, 83, 80, 0.56); + font-style: italic; } -.token.regex, -.token.important { - color: #e90; +.token.symbol, +.token.property { + color: rgb(128, 203, 196); } -.language-css .token.string, -.style .token.string { - color: #a67f59; - background: rgba(255, 255, 255, 0.5); +.token.tag, +.token.operator, +.token.keyword { + color: rgb(127, 219, 202); } -.token.important { - font-weight: normal; +.token.boolean { + color: rgb(255, 88, 116); } -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; +.token.number { + color: rgb(247, 140, 108); } -.token.entity { - cursor: help; +.token.constant, +.token.function, +.token.builtin, +.token.char { + color: rgb(130, 170, 255); } -.namespace { - opacity: .7; +.token.selector, +.token.doctype { + color: rgb(199, 146, 234); + font-style: italic; } -@media screen and (max-width: 767px) { - pre[class*="language-"]:before, - pre[class*="language-"]:after { - bottom: 14px; - box-shadow: none; - } - +.token.attr-name, +.token.inserted { + color: rgb(173, 219, 103); + font-style: italic; } -/* Plugin styles */ -.token.tab:not(:empty):before, -.token.cr:before, -.token.lf:before { - color: #e0d7d1; +.token.string, +.token.url, +.token.entity, +.language-css .token.string, +.style .token.string { + color: rgb(173, 219, 103); } -/* Plugin styles: Line Numbers */ -pre[class*="language-"].line-numbers.line-numbers { - padding-left: 0; +.token.class-name, +.token.atrule, +.token.attr-value { + color: rgb(255, 203, 139); } -pre[class*="language-"].line-numbers.line-numbers code { - padding-left: 3.8em; +.token.regex, +.token.important, +.token.variable { + color: rgb(214, 222, 235); } -pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows { - left: 0; +.token.important, +.token.bold { + font-weight: bold; } -/* Plugin styles: Line Highlight */ -pre[class*="language-"][data-line] { - padding-top: 0; - padding-bottom: 0; - padding-left: 0; -} -pre[data-line] code { - position: relative; - padding-left: 4em; -} -pre .line-highlight { - margin-top: 0; +.token.italic { + font-style: italic; } diff --git a/src/store.js b/src/store.js index 5842290f..af704c02 100644 --- a/src/store.js +++ b/src/store.js @@ -45,7 +45,7 @@ const store = new Vuex.Store({ mutations: { SET_CONFIG(state, config = {}) { - config.layout = config.layout || 'wide' + config.layout = config.layout || 'narrow' // TODO: remove `centerContent` in next major version if (config.centerContent) { config.layout = 'narrow' diff --git a/src/utils/cssVariables.js b/src/utils/cssVariables.js index 09ed4c27..1637ad3e 100644 --- a/src/utils/cssVariables.js +++ b/src/utils/cssVariables.js @@ -1,14 +1,16 @@ const defaultCssVariables = { - pageBackground: 'white', - headerBackground: 'white', + accentColor: '#009688', + pageBackground: '#fff', + headerBackground: '#fff', + headerTextColor: 'var(--text-color)', textColor: '#000', - linkColor: '#000', - accentColor: '#3eaf7c', + linkColor: 'var(--accent-color)', sidebarWidth: '280px', - sidebarBackground: 'white', + sidebarBackground: 'var(--page-background)', sidebarLinkColor: '#444', sidebarLinkActiveColor: '#000', sidebarLinkArrowColor: '#999', + mainBackground: 'var(--page-background)', borderColor: '#eaeaea', headerHeight: '55px', codeFont: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', @@ -17,14 +19,16 @@ const defaultCssVariables = { warningColor: '#ff9800', dangerColor: 'rgb(255, 0, 31)', navLinkColor: '#2c3e50', + navLinkBorderColor: '#fff', navLinkHoverBorderColor: '#e2e2e2', - codeBlockBackground: '#fdfaf6', - codeBlockShadowColor: '#faede5', - codeBlockShadowWidth: '1px', - highlightedLineBackground: '#faede5', - highlightedLineBorderColor: '#f1beb6', - inlineCodeColor: 'inherit', - inlineCodeBackground: '#fdfaf6', + codeBlockBackground: '#011627', + codeBlockTextColor: 'white', + codeBlockShadowColor: '#333', + codeBlockShadowWidth: '0px', + highlightedLineBackground: '#022a4b', + highlightedLineBorderColor: '#ffa7c4', + inlineCodeColor: 'rgb(116, 66, 16)', + inlineCodeBackground: 'rgb(254, 252, 191)', loaderPrimaryColor: '#f3f3f3', loaderSecondaryColor: '#ecebeb', tableHeaderBackground: '#fafafa', @@ -38,18 +42,12 @@ const defaultCssVariables = { const darkCssVariables = { ...defaultCssVariables, - pageBackground: '#2f3136', - headerBackground: '#2f3136', - sidebarBackground: '#2f3136', + headerBackground: 'var(--page-background)', sidebarLinkColor: 'var(--text-color)', sidebarLinkActiveColor: 'var(--text-color)', textColor: 'hsla(0,0%,100%,0.88)', - accentColor: '#0096cf', - linkColor: 'currentColor', + pageBackground: '#2f3136', navLinkColor: 'var(--text-color)', - codeBlockBackground: '#011627', - codeBlockShadowColor: '#333', - codeBlockShadowWidth: '0px', borderColor: '#3e4147', highlightedLineBackground: '#022a4b', highlightedLineBorderColor: '#ffa7c4', diff --git a/src/views/Home.vue b/src/views/Home.vue index 0ed40c13..994e309a 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -184,8 +184,10 @@ export default {