improving print styles

src/components/ShardQrCode.vue

@@ -6,12 +6,12 @@
         You need {{ requiredShards - 1 }} more QR {{ pluralizeCode }} like this
         to reconstruct the secret
       </h3>
-      <h4>
-        Please go to <a href="https://bs.parity.io">https://bs.parity.io</a> to
-        download the reconstruction webapp, if you don't have one already
-      </h4>
     </div>
-    <qriously class="print-only" v-bind:value="shard" v-bind:size="600" />
+    <qriously
+      class="qr-code print-only"
+      v-bind:value="shard"
+      v-bind:size="600"
+    />
     <qriously class="screen-only" v-bind:value="shard" v-bind:size="200" />
     <div class="print-only">
       <div class="recovery-field">
@@ -19,8 +19,10 @@
         <div class="recovery-blank" />
       </div>
       <p class="version">
-        This has been generated by BananaSplit version {{ version }}, git
-        revision {{ gitRevision }}
+        Please go to <a href="https://bs.parity.io">bs.parity.io</a> to download
+        the reconstruction webapp, if you don't have one already. This has been
+        generated by BananaSplit version {{ version }}, git revision
+        {{ gitRevision }}
       </p>
     </div>
   </div>
@@ -72,28 +74,67 @@ export default {
   .qr-tile {
     page-break-after: always;
   }
+
+  canvas {
+    height: min(80vw, 80vh);
+    width: min(80vw, 80vh) !important;
+  }
+
+  @page {
+    margin: 0;
+    padding: 0;
+  }
 }
+/*
+@media print and (min-width: 20cm) {
+  .qr-tile {
+    text-align: left !important;
+  }
+
+  .print-only {
+    padding: 0 10% 0 50% !important;
+  }
+
+  .qr-code {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 5% !important;
+  }
+
+  canvas {
+    height: min(75vw, 75vh) !important;
+    width: min(75vw, 75vh) !important;
+  }
+} */
 
 .qr-tile {
+  position: relative;
   font-family: "Avenir Next Condensed", "Avenir", Helvetica, Arial, sans-serif;
-  margin: 0.1cm;
-  padding: 0.5cm;
-  border: dotted 1px rgba(0, 0, 0, 0.25);
+  margin: 0 auto;
+  padding: 0;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
 }
 
 h1 {
   font-weight: 600;
-  font-size: 2em;
+  font-size: 1.5em;
 }
 
 canvas {
   margin: 0 auto;
+  display: block;
 }
 
 h3,
 h4 {
   font-weight: 400;
+  margin: 0.25em 0 0 0;
 }
 
 .recovery-field {
@@ -109,7 +150,8 @@ h4 {
 }
 
 .version {
-  font-style: italic;
+  font-weight: 500;
+  font-size: 75%;
   color: darkgray;
 }
 </style>

src/views/Share.vue

@@ -147,6 +147,11 @@ textarea:disabled {
   color: #99928f;
 }
 
+input[type="number"] {
+  width: 48px;
+  text-align: center;
+}
+
 textarea {
   min-height: 80px;
 }