feature (#201): design iteration (#202)

* feature (#201): increase weight on nav links

* feature (#201): Update BetaBanner to be thinner and less intrusive to the reading experience

* feature (#201): update font weights to 500

* feature (#201): update weights on headings

* Update index.styl

Co-authored-by: Evan You <yyx990803@gmail.com>

Author: bencodezen

src/.vuepress/components/BetaBanner.vue

@@ -5,17 +5,18 @@ export default {}
 <template>
   <aside class="beta-banner">
     <p>
-      ⚠️ Beta Version: Docs are still under development and are subject to
-      change.
+      ⚠️ Beta Version: Docs are in development and subject to change.
     </p>
   </aside>
 </template>
 
 <style lang="scss" scoped>
+@import '../theme/styles/mixins.scss';
+
 .beta-banner {
   position: fixed;
   z-index: 20;
-  top: 3.6rem;
+  top: 0;
   left: 0;
   right: 0;
   display: flex;
@@ -24,14 +25,22 @@ export default {}
   background-color: #fffedb;
   box-sizing: border-box;
   border-bottom: 1px solid #eaecef;
-  font-weight: bold;
   text-align: center;
   padding: 10px 20px;
   box-sizing: border-box;
 
   p {
     margin: 0;
     line-height: 1.4;
+    font-size: 0.7rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include breakpoint(700px) {
+      font-size: 0.8rem;
+    }
   }
 }
 </style>

src/.vuepress/config.js

@@ -159,7 +159,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Inter:300,400,600|Open+Sans:400,600;display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],

src/.vuepress/theme/components/NavLinks.vue

@@ -1,22 +1,9 @@
 <template>
-  <nav
-    v-if="userLinks.length || repoLink"
-    class="nav-links"
-  >
+  <nav v-if="userLinks.length || repoLink" class="nav-links">
     <!-- user links -->
-    <div
-      v-for="item in userLinks"
-      :key="item.link"
-      class="nav-item"
-    >
-      <DropdownLink
-        v-if="item.type === 'links'"
-        :item="item"
-      />
-      <NavLink
-        v-else
-        :item="item"
-      />
+    <div v-for="item in userLinks" :key="item.link" class="nav-item">
+      <DropdownLink v-if="item.type === 'links'" :item="item" />
+      <NavLink v-else :item="item" />
     </div>
 
     <!-- repo link -->
@@ -47,11 +34,11 @@ export default {
   },
 
   computed: {
-    userNav () {
+    userNav() {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
     },
 
-    nav () {
+    nav() {
       const { locales } = this.$site
       if (locales && Object.keys(locales).length > 1) {
         const currentLink = this.$page.path
@@ -62,7 +49,8 @@ export default {
           ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
           items: Object.keys(locales).map(path => {
             const locale = locales[path]
-            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            const text =
+              (themeLocales[path] && themeLocales[path].label) || locale.lang
             let link
             // Stay on the current page
             if (locale.lang === this.$lang) {
@@ -83,25 +71,23 @@ export default {
       return this.userNav
     },
 
-    userLinks () {
+    userLinks() {
       return (this.nav || []).map(link => {
         return Object.assign(resolveNavLinkItem(link), {
           items: (link.items || []).map(resolveNavLinkItem)
         })
       })
     },
 
-    repoLink () {
+    repoLink() {
       const { repo } = this.$site.themeConfig
       if (repo) {
-        return /^https?:/.test(repo)
-          ? repo
-          : `https://github.com/${repo}`
+        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
       }
       return null
     },
 
-    repoLabel () {
+    repoLabel() {
       if (!this.repoLink) return
       if (this.$site.themeConfig.repoLabel) {
         return this.$site.themeConfig.repoLabel
@@ -128,6 +114,7 @@ export default {
   a
     line-height 1.4rem
     color inherit
+    font-weight 500
     &:hover, &.router-link-active
       color $accentColor
   .nav-item

src/.vuepress/theme/components/Sidebar.vue

@@ -42,7 +42,7 @@ export default {
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
   & > .sidebar-links
-    padding calc(1.5rem + 3rem) 0 // add $betaBannerHeight
+    padding 1.5rem 0
     & > li > a.sidebar-link
       font-size 1.1em
       line-height 1.7

src/.vuepress/theme/styles/index.styl

@@ -23,7 +23,7 @@ body
 .navbar
   position fixed
   z-index 20
-  top 0
+  top 37px
   left 0
   right 0
   height $navbarHeight
@@ -110,7 +110,7 @@ strong
   font-weight 600
 
 h1, h2, h3, h4, h5, h6
-  font-weight 600
+  font-weight 500
   line-height 1.25
 
   {$contentClass}:not(.custom) > &
@@ -135,6 +135,7 @@ h1, h2, h3, h4, h5, h6
 
 h1
   font-size 2.2rem
+  font-weight 600
 
 h2
   font-size 1.65rem