print layout improvements

assets/print.scss

@@ -8,4 +8,12 @@
         background: none;
         background-color: $white;
     }
+    hr {
+        display: block;
+        border: 2px solid $border-color;
+    }
+
+    @page {
+        margin: 1cm;
+    }
 }

components/ScrollButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="scroll-btn" @click.prevent="scroll" :style="`opacity: ${shown ? 1 : 0}`">
+    <div class="scroll-btn d-print-none" @click.prevent="scroll" :style="`opacity: ${shown ? 1 : 0}`">
         <SquareButton link="#" :colour="colour" :aria-label="$t('table.scrollUp')">
             <Icon v="arrow-alt-up"/>
         </SquareButton>

components/Submenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="mt-4 mt-lg-0">
+    <section class="mt-4 mt-lg-0 d-print-none">
         <div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
             <router-link v-for="{name, icon, iconInverse, route, routesExtra, condition} in links" :key="name"
                          v-if="condition === undefined || condition === true"

routes/blogEntry.vue

@@ -14,13 +14,14 @@
             <Spelling :text="content"/>
         </Twemoji>
 
+        <div class="d-print-none">
             <Separator icon="heart"/>
             <Support/>
-
             <section>
                 <Share :title="title"/>
             </section>
         </div>
+    </div>
 </template>
 
 <script>
@@ -50,6 +51,9 @@
     @import "assets/variables";
 
     .blog-post {
+        hyphens: auto;
+        text-align: justify;
+
         img {
             max-width: 100%;
         }