bootstrap

.vuepress/styles/index.styl

@@ -47,8 +47,11 @@ p code {
 
 /*Bootstrap*/
 p {
-  margin-bottom: 0;
-  margin-top: 1rem;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 a:hover {
   text-decoration: none !important;
@@ -60,9 +63,6 @@ label {
   line-height: normal;
 }
 
-.nav-item a {
-  padding: 0px;
-}
 .side-nav-item a {
   padding: 2px;
 }

.vuepress/theme/components/NavLink.vue

@@ -0,0 +1,60 @@
+<template>
+  <router-link
+    class="nav-link my-nav-link"
+    :to="link"
+    @focusout.native="focusoutAction"
+    v-if="!isExternal(link)"
+    :exact="exact"
+  >{{ item.text }}</router-link>
+  <a
+    v-else
+    :href="link"
+    @focusout="focusoutAction"
+    class="nav-link my-nav-link external"
+    :target="isMailto(link) || isTel(link) ? null : '_blank'"
+    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
+  >
+    {{ item.text }}
+    <OutboundLink/>
+  </a>
+</template>
+
+<script>
+import { isExternal, isMailto, isTel, ensureExt } from '../util'
+
+export default {
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  computed: {
+    link () {
+      return ensureExt(this.item.link)
+    },
+
+    exact () {
+      if (this.$site.locales) {
+        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
+      }
+      return this.link === '/'
+    }
+  },
+
+  methods: {
+    isExternal,
+    isMailto,
+    isTel,
+    focusoutAction () {
+      this.$emit('focusout')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.my-nav-link {
+  padding: 0px;
+}
+</style>