Improve download link

content/.vitepress/theme/DownloadLink.vue

@@ -5,27 +5,43 @@
 </script>
 
 <template>
-  <a class="downloadlink" :href="'/bijlagen/' + file">
+  <a class="downloadlink" :href="'/bijlagen/' + file" target="_blank">
     <span>{{ text }}</span>
+    <em>(.pdf)</em>
   </a>
 </template>
 
 <style scoped>
   .downloadlink {
-    display: block;
+    display: inline-block;
+    text-decoration: none;
+    margin: 0 1.75rem 0.5rem 0;
   }
 
   .downloadlink::before {
     display: inline-block;
     content: '';
     background-image: url('./pdf.png');
-    background-size: 2.5em;
-    width: 2.5em;
-    height: 2.5em;
-    vertical-align: -0.75em;
+    background-size: 1.5em 1.875em;
+    width: 1.5em;
+    height: 1.875em;
+    vertical-align: -0.5em;
+    margin-right: .5em;
+  }
+  .downloadlink::after {
+    display: none !important;
   }
 
-  .downloadlink + .downloadlink {
-    margin-top: 8px;
+  .downloadlink span {
+    text-decoration: underline;
+  }
+  .downloadlink:hover span {
+    text-decoration: none;
+  }
+
+  .downloadlink em {
+    font-style: normal;
+    margin-left: 0.5rem;
+    color: var(--vp-c-text-2);
   }
 </style>

content/2023/top30/index.md

@@ -8,7 +8,7 @@ Toen ik dit voor mijzelf verduidelijkt had, ben ik op zoek gegaan naar een nutti
 
 <DownloadLink text="Mijn eigen tipkaart ‘Op de koffie’" file="tipkaart-koffie.pdf" />
 
-<DownloadLink text="Al bestaande tipkaart van Bartiméus" file="tipkaart-inspiratie.pdf" />
+<DownloadLink text="De bestaande van Bartiméus" file="tipkaart-inspiratie.pdf" />
 
 Zo’n tipkaart is wél haalbaar: