From 4b6129d17b0e262295a5732245c847838f3b7020 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Thu, 26 May 2022 11:45:38 +0200
Subject: [PATCH] print layout improvements

---
 assets/print.scss           |  8 ++++++++
 components/ScrollButton.vue |  2 +-
 components/Submenu.vue      |  2 +-
 routes/blogEntry.vue        | 16 ++++++++++------
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/assets/print.scss b/assets/print.scss
index 5748577a..4f53c24e 100644
--- a/assets/print.scss
+++ b/assets/print.scss
@@ -8,4 +8,12 @@
         background: none;
         background-color: $white;
     }
+    hr {
+        display: block;
+        border: 2px solid $border-color;
+    }
+
+    @page {
+        margin: 1cm;
+    }
 }
diff --git a/components/ScrollButton.vue b/components/ScrollButton.vue
index bb00ed62..a97d5a3f 100644
--- a/components/ScrollButton.vue
+++ b/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>
diff --git a/components/Submenu.vue b/components/Submenu.vue
index ea5133bc..e027d8ca 100644
--- a/components/Submenu.vue
+++ b/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"
diff --git a/routes/blogEntry.vue b/routes/blogEntry.vue
index be4177e1..ca85cd26 100644
--- a/routes/blogEntry.vue
+++ b/routes/blogEntry.vue
@@ -14,12 +14,13 @@
             <Spelling :text="content"/>
         </Twemoji>
 
-        <Separator icon="heart"/>
-        <Support/>
-
-        <section>
-            <Share :title="title"/>
-        </section>
+        <div class="d-print-none">
+            <Separator icon="heart"/>
+            <Support/>
+            <section>
+                <Share :title="title"/>
+            </section>
+        </div>
     </div>
 </template>
 
@@ -50,6 +51,9 @@
     @import "assets/variables";
 
     .blog-post {
+        hyphens: auto;
+        text-align: justify;
+
         img {
             max-width: 100%;
         }