Adapt the invoice design to Oriol’s

web/static/invoice.css

@@ -8,27 +8,33 @@
     padding: 0 1rem 0 0;
     display: block;
     background: initial;
-    border-right: 2px dashed lightgray;
+    border-right: 1px solid black;
 }
 
 .invoice h1 {
     font-size: 1.6rem;
 }
 
-.invoice .invoicer {
-    margin-top: 20rem;
-}
-
 .invoice > div {
-    display: flex;
-    flex-direction: column;
     flex: 3;
     padding: 0 0 0 2.5rem;
-    align-items: flex-end;
 }
 
 .invoice .invoicee, .invoice .invoicer {
-    min-width: 18rem;
+    font-style: normal;
+}
+
+.invoice header > div {
+    margin-top: 2em;
+}
+
+.invoice .invoicer {
+    margin-top: 9rem;
+}
+
+.invoice .invoicee {
+    margin-top: 1em;
+    text-align: right;
 }
 
 .invoice table {
@@ -42,7 +48,7 @@
 
 .invoice thead th {
     text-align: left;
-    border-bottom: 2px solid black;
+    border-bottom: 1px solid black;
 }
 
 .invoice .tfoot th, .invoice .numeric {
@@ -79,13 +85,20 @@
 }
 
 .invoice .legal {
-    margin-top: 16rem;
     font-size: 1.2rem;
+    text-align: justify;
+}
+
+@media screen {
+    .invoice .legal {
+        margin-top: 16rem;
+    }
 }
 
 @media print {
     @page {
         size: A4;
+        margin: 64px 48px;
     }
 
     *, *::before, *::after {
@@ -126,7 +139,16 @@
         display: none;
     }
 
-    .invoice {
-        height: 100vh;
+    .invoice header {
+        height: 260mm;
+    }
+    
+    .invoice .legal {
+        position: absolute;
+        width: 40em;
+        left: 0;
+        top: 0;
+        transform-origin: top left;
+        transform: translateY(260mm) rotate(-90deg);
     }
 }

web/template/invoices/view.gohtml

@@ -14,8 +14,10 @@
     <link rel="stylesheet" type="text/css" href="/static/invoice.css">
     <article class="invoice">
         <header>
-            <h1>{{ .Number | printf ( pgettext "Invoice %s" "title" )}}</h1>
-            <p class="date">{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}</p>
+            <div>
+                <h1>{{ .Number | printf ( pgettext "Invoice %s" "title" )}}</h1>
+                <p class="date">{{( pgettext "Date" "title" )}} {{ .Date | formatDate }}</p>
+            </div>
 
             <address class="invoicer">
                 {{ .Invoicer.Name }}<br>
@@ -92,7 +94,6 @@
                     {{ end }}
                     </tbody>
                 {{- end }}
-
             </table>
 
             {{ if .Notes -}}