experimental

src/components/ArticleFooter.vue

 <template>
   <div class="article_footer">
-      <span  v-if="hasPointer">
-      <button aria-label="Del ordboksartikkel på Facebook" class="share_button" tabindex="0">
-          <ShareNetwork network="facebook"
-              title=""
-              :url="share_link"
-              tabindex="-1">
-              <v-icon dense>$vuetify.icons.facebook</v-icon>
-          </ShareNetwork>
-      </button>
-      <button aria-label="Del del ordboksartikkel på Twitter" class="share_button" tabindex="0">
-          <ShareNetwork
-              network="twitter"
-              :url="share_link"
-              :title="dict_label"
-              hashtags="#ordbøkene"
-              tabindex="-1">
-              <v-icon dense>$vuetify.icons.twitter</v-icon>
-          </ShareNetwork>
-      </button>
-    </span>
-      <button v-if="webShareApiSupported" aria-label="Del ordboksartikkelen med andre" class="share_button" tabindex="0" @click="shareViaWebShare">
-        <span v-if="!hasPointer" class = "share_text">Del ordet</span>
-        <v-icon dense>$vuetify.icons.share</v-icon>
-      </button>
+      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">        
+        <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span>
+      </v-btn>
+
+      <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
+        <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span>
+      </v-btn>
+            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
+        <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
+      </v-btn>
     <div class = "footer_title" tabindex="0">Ordbøkene.no
     </div>
   </div>
@@ -67,19 +53,20 @@ export default {
 </script>
 <style scoped>
 
-.share_text {
-  padding-right: 10px;
-  vertical-align: middle;
+.button-text {
+  padding-left: 3px;
+  font-size: 12px;
+  color: var(--v-primary-base) !important;
+  font-variant: reverse !important;
 }
 
 .v-icon {
   color: var(--v-primary-base) !important;
 }
 
-.share_button {
-  padding-right: 4px;
-  font-weight: bold;
-  font-size: 14px;
+.toolbar-button {
+  margin-right: 3px;
+  font-size: 12px;
 }
 
 

src/components/Header.vue

@@ -19,13 +19,27 @@
         </v-card>
       </v-menu>)
     </span>
-
+      <div class="article-toolbar"> <!--
+        <v-btn x-small depressed class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">        
+        <v-icon small>link</v-icon>
+      </v-btn>
+
+      <v-btn depressed small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
+        <v-icon small>share</v-icon>
+      </v-btn> 
+            <v-btn depressed small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
+        <v-icon small>format_quote</v-icon>
+      </v-btn>-->
+    <v-btn class="show-inflection" rounded depressed small >Vis bøying &nbsp;&#9662;</v-btn>
+    <!--
     <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
       <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary>
       <div class="inflection-canvas">
         <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
       </div>
-    </details>
+    </details>-->
+</div>
+  
   </div>
 </template>
 
@@ -123,6 +137,17 @@ summary {
   text-align: center;
 }
 
+.article-toolbar {
+  margin-top: 6px;
+}
+
+.toolbar-button {
+  color: var(--v-primary-base) !important;
+  margin-right: 3px;
+}
+
+
+
 article h2 {
   padding-top: 4px;
   padding-bottom: 0px;
@@ -244,6 +269,11 @@ article h2.secondary_header {
   font-size: 14px;
 }
 
+.show-inflection {
+  color: var(--v-primary-base) !important;
+  font-weight: bold !important;
+}
+
 .context {
   color: var(--v-primary-lighten4) !important;
 }