Updated views and api

resources/sass/main.scss

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@page {
+    size: 8.5in 14.0in;
+    margin: 0;
+}
+
 html, body {
     @apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
 	font-family: 'Source Sans Pro', sans-serif;
@@ -83,15 +88,23 @@ html, body {
 }
 
 .letter {
-    @apply mx-auto p-1;
-    max-width: 66ch;
-
-    .letter__header {
-        @apply text-center;
-    }
+    @apply mx-auto p-1 text-black w-full;
+    font-size: calc(.5rem + 1vmin);
 
     p {
-        @apply my-2;
+        line-height: 1.1;
+    }
+
+    .letter__header {
+        @apply text-center mt-4;
+
+        img {
+            @apply w-full;
+        }
+    }
+
+    .letter__body-header {
+        @apply text-center;
     }
 
     ol {
@@ -100,10 +113,41 @@ html, body {
 
     table {
         @apply w-full;
+
+        td {
+            @apply align-top pr-2;
+        }
+
+        .strong {
+            @apply font-bold;
+        }
+
+        .special {
+            @apply font-bold tracking-widest text-lg italic;
+        }
+    }
+
+    table.signature {
+        @apply w-auto ml-auto mt-4;
+
+        .letter__sign {
+            width: 79%;
+            height: 4rem;
+            background-image: url('/img/letter-sign.jpg');
+            background-size: contain;
+        }
     }
 }
 
 @screen print {
+    html,body {
+        @apply bg-white;
+    }
+
+    body {
+        margin: 1cm;
+    }
+
     .container > .header, .container > .form, .print-button {
         @apply hidden;
     }
@@ -111,4 +155,19 @@ html, body {
     .container {
         @apply w-full max-w-full m-0 p-0;
     }
+
+    .letter {
+        font-family: 'Calibri', 'Source Sans Pro', sans-serif;
+        font-size: 12px;
+
+        .letter__body-header {
+            font-size: 14px;
+        }
+
+        table.signature {
+            .letter__sign {
+                height: 3.5rem;
+            }
+        }
+    }
 }