From 21765183455d0274e2ee9df674054297787cfde3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= <k1pstabug@gmail.com>
Date: Wed, 9 Sep 2020 17:08:31 +0200
Subject: [PATCH] Update designs margins, font-size variable

---
 resources/views/pdf-designs/bold.html     | 273 +++++++++++-----------
 resources/views/pdf-designs/business.html |  21 +-
 resources/views/pdf-designs/clean.html    |  19 +-
 resources/views/pdf-designs/creative.html |  12 +-
 resources/views/pdf-designs/elegant.html  |  31 +--
 resources/views/pdf-designs/hipster.html  |  25 +-
 resources/views/pdf-designs/modern.html   |  45 ++--
 resources/views/pdf-designs/plain.html    |  25 +-
 resources/views/pdf-designs/playful.html  |  25 +-
 9 files changed, 203 insertions(+), 273 deletions(-)
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 3e48b0e257..2d8ca4c86f 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -3,144 +3,147 @@
     <head id="head">
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: '$font-size';
+            }
+
+            @page {
+                margin: 1cm;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin-top: 0;
+                    margin-right: 0;
+                }
+            }
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1.5fr 1fr 1fr;
+                background-color: #2d2c2a;
+                padding: 3rem;
+                color: white;
+            }
+
+            .company-logo {
+                height: 6rem;
+                padding: 2rem;
+                background-color: white;
+                margin: 2rem;
+                margin-top: -4rem;
+            }
+
+            #company-details,
+            #company-address {
+                display: flex;
+                flex-direction: column;
+            }
+
+            #client-details {
+                margin: 2rem;
+                display: flex;
+                flex-direction: column;
+            }
+            #client-details > :first-child {
+                font-weight: bold;
+            }
+
+            .client-entity-wrapper {
+                display: grid;
+                grid-template-columns: 1.5fr 1fr;
+            }
+
+            .entity-details-wrapper {
+                background-color: #35a39a;
+                padding: 1rem;
+            }
+
+            #entity-details {
+                width: 100%;
+                text-align: left;
+                color: white !important;
+            }
+            #entity-details > tr,
+            #entity-details th {
+                font-weight: normal;
+                padding-bottom: 0.5rem;
+            }
+
+            #product-table {
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+                margin-top: 3rem;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                padding: 2rem;
+                font-size: 1.5rem;
+            }
+            #product-table > thead > tr > th:last-child {
+                text-align: right;
+            }
+            #product-table > tbody > tr > td {
+                padding: 1.5rem;
+            }
+            #product-table > tbody > tr > td:last-child {
+                text-align: right;
+            }
+            #product-table > tbody > tr > td:first-child {
+                font-weight: bold;
+            }
+            #product-table > tbody > tr:nth-child(odd) {
+                background-color: #ebebeb;
+            }
+
+            #product-table-footer > * {
+                display: grid;
+                grid-template-columns: 3fr 1fr 1fr;
+                padding-top: 1.2rem;
+                padding-left: 1.2rem;
+                gap: 20px;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due-label'],
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                font-weight: bold;
+                font-size: 1.4rem;
+            }
+            #product-table-footer
+                > *
+                [data-element='product-table-balance-due'] {
+                color: #35a39a;
+            }
+            #product-table-footer > * > :last-child {
+                text-align: right;
+                padding-right: 1.5rem;
+            }
+        </style>
     </head>
 
-    <style id="style">
-        * {
-            margin: 0;
-            padding: 0;
-            font-size: 14px;
-        }
+    <div class="header-wrapper" id="header">
+        <div><!-- Empty space placeholder--></div>
 
-        @page {
-            margin-top: 1cm;
-            margin-bottom: 1cm;
-        }
-
-        body {
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            font-family: Arial, Helvetica, sans-serif;
-        }
-
-        @media print {
-            body {
-                margin-top: 0;
-                margin-right: 0;
-            }
-        }
-        .header-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr 1fr;
-            background-color: #2d2c2a;
-            padding: 3rem;
-            color: white;
-        }
-
-        .company-logo {
-            height: 6rem;
-            padding: 2rem;
-            background-color: white;
-            margin: 2rem;
-            margin-top: -4rem;
-        }
-
-        #company-details,
-        #company-address {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #client-details {
-            margin: 2rem;
-            display: flex;
-            flex-direction: column;
-        }
-        #client-details > :first-child {
-            font-weight: bold;
-        }
-
-        .client-entity-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr;
-        }
-
-        .entity-details-wrapper {
-            background-color: #35a39a;
-            padding: 1rem;
-        }
-
-        #entity-details {
-            width: 100%;
-            text-align: left;
-            color: white !important;
-        }
-        #entity-details > tr,
-        #entity-details th {
-            font-weight: normal;
-            padding-bottom: 0.5rem;
-        }
-
-        #product-table {
-            min-width: 100%;
-            table-layout: fixed;
-            overflow-wrap: break-word;
-            margin-top: 3rem;
-        }
-        #product-table > thead {
-            text-align: left;
-        }
-        #product-table > thead > tr > th {
-            padding: 2rem;
-            font-size: 1.5rem;
-        }
-        #product-table > thead > tr > th:last-child {
-            text-align: right;
-        }
-        #product-table > tbody > tr > td {
-            padding: 1.5rem;
-        }
-        #product-table > tbody > tr > td:last-child {
-            text-align: right;
-        }
-        #product-table > tbody > tr > td:first-child {
-            font-weight: bold;
-        }
-        #product-table > tbody > tr:nth-child(odd) {
-            background-color: #ebebeb;
-        }
-
-        #product-table-footer > * {
-            display: grid;
-            grid-template-columns: 3fr 1fr 1fr;
-            padding-top: 1.2rem;
-            padding-left: 1.2rem;
-            gap: 20px;
-        }
-        #product-table-footer
-            > *
-            [data-element='product-table-balance-due-label'],
-        #product-table-footer > * [data-element='product-table-balance-due'] {
-            font-weight: bold;
-            font-size: 1.4rem;
-        }
-        #product-table-footer > * [data-element='product-table-balance-due'] {
-            color: #35a39a;
-        }
-        #product-table-footer > * > :last-child {
-            text-align: right;
-            padding-right: 1.5rem;
-        }
-    </style>
+        <div id="company-details"></div>
+        <div id="company-address"></div>
+    </div>
 
     <body id="body">
-        <div class="header-wrapper" id="header">
-            <div><!-- Empty space placeholder--></div>
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-
         <img
             class="company-logo"
             src="$company.logo"
@@ -158,7 +161,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index fe60a31a5d..12ef2d18a4 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -6,23 +6,14 @@
 
         <style id="style">
             body {
-                margin: 2rem;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
                 font-family: Arial, Helvetica, sans-serif;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
+                margin: 1cm;
             }
 
             .header-container {
@@ -172,8 +163,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-container" id="header">
+        <div class="header-container">
             <img
                 src="$company.logo"
                 class="company-logo"
@@ -196,7 +189,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index accd0535ba..31e9740901 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -7,23 +7,16 @@
 
         <style id="style">
             body {
-                margin: 2rem;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
                 font-family: Arial, Helvetica, sans-serif;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                margin: 1cm;
             }
 
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
             .header-container {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -134,8 +127,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-container" id="header">
+        <div class="header-container">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -157,7 +152,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index dd7247d537..45a0a843bf 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -6,9 +6,7 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
@@ -128,8 +126,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <div id="client-details"></div>
 
             <div class="company-info-wrapper">
@@ -156,7 +156,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index 60f1a4a4ca..5c4d4a7afc 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                margin: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .company-logo-wrapper {
                 display: flex;
                 flex-direction: row;
@@ -147,8 +134,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="company-logo-wrapper" id="header">
+        <div class="company-logo-wrapper">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -181,10 +170,10 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer">
-            <p class="thanks-label">$thanks_label!</p>
-            <hr class="double-border" />
-        </footer>
     </body>
+    
+    <footer id="footer">
+        <p class="thanks-label">$thanks_label!</p>
+        <hr class="double-border" />
+    </footer>
 </html>
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index ca8060534f..9ee520dff0 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                margin: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1.2fr 1.8fr;
@@ -151,8 +138,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <div class="header-left-side-wrapper">
                 <p class="header-text-label">$from_label:</p>
 
@@ -205,7 +194,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index 53ea63eaa9..db91d2de43 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -6,14 +6,7 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                font-size: '$font-size';
             }
 
             body {
@@ -22,12 +15,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
             .header-container {
                 background-color: #f46521;
                 color: white;
@@ -100,8 +87,6 @@
 
             .footer-wrapper {
                 display: grid;
-                position: fixed;
-                bottom: 0;
                 width: 100%;
                 padding: 1.5rem;
                 grid-template-columns: 2fr 1fr 1fr;
@@ -151,13 +136,13 @@
         </style>
     </head>
 
+    <div class="header-container" id="header">
+        <h1 class="company-name">$company.name</h1>
+
+        <table id="entity-details" cellspacing="0"></table>
+    </div>
+
     <body id="body">
-        <div class="header-container" id="header">
-            <h1 class="company-name">$company.name</h1>
-
-            <table id="entity-details" cellspacing="0"></table>
-        </div>
-
         <div class="logo-client-wrapper">
             <img
                 class="company-logo"
@@ -173,16 +158,14 @@
 
             <div id="product-table-footer" cellspacing="0"></div>
         </div>
+    </body>
 
-        <div class="footer-wrapper">
-            <div>
-                <!-- Placeholder for offset -->
-            </div>
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
+    <div class="footer-wrapper" id="footer">
+        <div>
+            <!-- Placeholder for offset -->
         </div>
 
-        <footer id="footer"></footer>
-    </body>
+        <div id="company-details"></div>
+        <div id="company-address"></div>
+    </div>
 </html>
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 2f93018527..f9efcb7f3b 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                margin: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -115,8 +102,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <p>$company.name</p>
 
             <div id="company-address"></div>
@@ -137,7 +126,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index ef8bdc3a3a..0350c646c7 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -6,14 +6,11 @@
 
         <style id="style">
             * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
+                font-size: '$font-size';
             }
 
             @page {
-                margin-top: 1cm;
-                margin-bottom: 1cm;
+                margin: 1cm;
             }
 
             body {
@@ -22,16 +19,6 @@
                 font-family: Arial, Helvetica, sans-serif;
             }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
             .header-wrapper {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
@@ -152,8 +139,10 @@
         </style>
     </head>
 
+    <div id="header"></div>
+
     <body id="body">
-        <div class="header-wrapper" id="header">
+        <div class="header-wrapper">
             <img
                 class="company-logo"
                 src="$company.logo"
@@ -188,7 +177,7 @@
         <table id="product-table" cellspacing="0"></table>
 
         <div id="product-table-footer" cellspacing="0"></div>
-
-        <footer id="footer"></footer>
     </body>
+    
+    <div id="footer"><!-- Your footer content here --></div>
 </html>
