refactor: align nav bar stylings with VuePress

vuejs · Sep 5, 2020 · a7e1b7a · a7e1b7a
1 parent f9ddbc1
commit a7e1b7a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 23 deletions.
diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
@@ -36,6 +36,16 @@
 }
 
 .nav-links {
+  display: flex;
+  align-items: center;
+  height: 35px;
   list-style-type: none;
+  transform: translateY(1px);
+}
+
+@media screen and (max-width: 719px) {
+  .nav-links {
+    display: none;
+  }
 }
 </style>
diff --git a/src/client/theme-default/components/NavBarLink.vue b/src/client/theme-default/components/NavBarLink.vue
@@ -1,35 +1,46 @@
 <template>
-  <a
-    class="nav-link"
-    :class="classes"
-    :href="href"
-    :target="target"
-    :rel="rel"
-    :aria-label="item.ariaLabel"
-  >
-    {{ item.text }}
-    <OutboundLink v-if="isExternalLink" />
-  </a>
+  <div class="nav-item">
+    <a
+      class="nav-link"
+      :class="classes"
+      :href="href"
+      :target="target"
+      :rel="rel"
+      :aria-label="item.ariaLabel"
+    >
+      {{ item.text }}
+      <OutboundLink v-if="isExternalLink" />
+    </a>
+  </div>
 </template>
 
 <script src="./NavBarLink"></script>
 
 <style>
-.nav-link {
-  color: var(--text-color);
+.nav-item {
+  position: relative;
+  display: inline-block;
   margin-left: 1.5rem;
-  font-weight: 600;
+  line-height: 2rem;
+}
+
+.nav-link {
   display: inline-block;
-  height: 1.75rem;
-  line-height: 1.75rem;
+  margin-bottom: -2px;
+  border-bottom: 2px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.4rem;
+  color: var(--text-color);
+  white-space: nowrap;
 }
 
 .nav-link:hover,
 .nav-link.active {
-  border-bottom: 2px solid var(--accent-color);
+  border-bottom-color: var(--accent-color);
 }
 
 .nav-link.external:hover {
-  border-bottom: 0;
+  border-bottom-color: transparent;
 }
 </style>
diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
@@ -1,16 +1,18 @@
 body {
+  padding: 0;
   margin: 0;
+  background-color: #fff;
 }
 
 * {
   box-sizing: border-box;
 }
 
 .theme {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 16px;
   color: var(--text-color);
 }
 
@@ -26,11 +28,12 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1.75rem 0 1.5rem;
+  padding: 0.7rem 1.5rem;
 }
+
 @media screen and (max-width: 719px) {
   header {
-    padding: 0 1.75rem 0 4rem;
+    padding-left: 4rem;
   }
 }
 

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
@@ -1,6 +1,6 @@
 .theme {
   --border-color: rgb(226, 232, 240);
-  --header-height: 4rem;
+  --header-height: 3.6rem;
   --sidebar-width: 20rem;
   --text-color: #2c3e50;
   --text-color-light: #476582;