tweak edit link style

lib/default-theme/NavLinks.vue

@@ -13,18 +13,17 @@
       class="github-link"
       target="_blank">
       Github
-      <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
-        <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
-        <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
-      </svg>
+      <OutboundLink/>
     </a>
   </div>
 </template>
 
 <script>
+import OutboundLink from './OutboundLink.vue'
 import { isActive, ensureExt } from './util'
 
 export default {
+  components: { OutboundLink },
   computed: {
     userLinks () {
       return (this.$site.themeConfig.nav || []).map(item => ({
@@ -58,9 +57,4 @@ export default {
     &:hover, &.active
       margin-bottom -2px
       border-bottom 2px solid lighten($accentColor, 10%)
-  .github-link .icon
-    color #aaa
-    display inline-block
-    position relative
-    top .1rem
 </style>

lib/default-theme/OutboundLink.vue

+<template functional>
+  <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
+    <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
+    <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+  </svg>
+</template>
+
+<style lang="stylus">
+.icon.outbound
+  color #aaa
+  display inline-block
+</style>

lib/default-theme/Page.vue

@@ -3,6 +3,7 @@
     <Content :custom="false"/>
     <div class="content edit-link" v-if="editLink">
       <a :href="editLink" target="_blank">Edit this page</a>
+      <OutboundLink/>
     </div>
     <div class="content page-nav" v-if="prev || next">
       <p class="inner">
@@ -22,9 +23,11 @@
 </template>
 
 <script>
+import OutboundLink from './OutboundLink.vue'
 import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
 
 export default {
+  components: { OutboundLink },
   computed: {
     prev () {
       const prev = this.$page.frontmatter.prev
@@ -63,9 +66,7 @@ export default {
   padding-bottom 0 !important
   a
     color lighten($textColor, 25%)
-    text-decoration underline
-    &:hover
-      color $accentColor
+    margin-right 0.25rem
 
 .page-nav.content
   min-height 2.2rem