Update css & font

fgregorio · Oct 15, 2017 · 8f7811b · 8f7811b
1 parent 9573666
commit 8f7811b
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 70 deletions.
diff --git a/preview/index.html b/preview/index.html
@@ -6,73 +6,8 @@
     <link rel="stylesheet" href="../static/css/bootstrap.min.css" >
     <link rel="stylesheet" href="../static/css/ionicons.min.css" >
     <link rel="stylesheet" href="../static/css/general.css" >
-    <style>
-      /* Montserrat */
-      @font-face {
-        font-family: 'Montserrat';
-        src:
-        local('Montserrat'),
-        url(../static/fonts/Montserrat/Montserrat-Light.ttf),
-        format('truetype');
-        font-weight: 300;
-      }
-
-      @font-face {
-        font-family: 'Montserrat';
-        src:
-        local('Montserrat'),
-        url(../static/fonts/Montserrat/Montserrat.ttf),
-        format('truetype');
-        font-weight: 400;
-      }
-
-      @font-face {
-        font-family: 'Montserrat';
-        src:
-        local('Montserrat'),
-        url(../static/fonts/Montserrat/Montserrat-Medium.ttf),
-        format('truetype');
-        font-weight: 500;
-      }
-
-      /* Source Serif Pro */
-      @font-face {
-        font-family: 'Source Serif Pro';
-        src:
-        local('Source Serif Pro'),
-        url(../static/fonts/SourceSerifPro/SourceSerifPro-Regular.ttf),
-        format('truetype');
-        font-weight: 400;
-      }
-      @page {
-        size: A4;
-        margin: 0;
-      }
-      @media print {
-        body * {
-          visibility: hidden;
-        }
-        .print-area,
-        .print-area * {
-          visibility: visible;
-        }
-        .print-area {
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-        .page {
-          margin: 0;
-          border: initial;
-          border-radius: initial;
-          width: initial;
-          min-height: initial;
-          box-shadow: initial;
-          background: initial;
-          page-break-after: always;
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="../static/css/preview/font.css" >
+    <link rel="stylesheet" href="../static/css/preview/print.css" >
   </head>
   <body>
     <div id="root"></div>

diff --git a/preview/templates/minimal/components/Header.jsx b/preview/templates/minimal/components/Header.jsx
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 const Heading = styled.h1`
-  font-family: 'Source Serif Pro', serif;
+  font-family: 'Lora', serif;
   font-size: 2.1em;
   font-weight: 400;
   margin-bottom: 1em;
@@ -37,7 +37,6 @@ function Header({invoice, company, configs}) {
           })}
         </h4>
         <p>Created {format(invoice.created_at, 'DD/MM/YYYY')}</p>
-
         {invoice.dueDate && (
           <p>Due {moment(invoice.dueDate).format('DD/MM/YYYY')}</p>
         )}

diff --git a/preview/templates/minimal/components/Main.jsx b/preview/templates/minimal/components/Main.jsx
@@ -39,7 +39,7 @@ const ItemsHeader = styled.tr`
 const ItemsList = styled.tbody`
   margin: 1.5em -2.5em;
   padding: 1em 2.5em;
-  font-family: 'Source Serif Pro', serif;
+  font-family: 'Lora', serif;
   font-size: .95em;
   color: #000000;
   background: #F9FAFA;

diff --git a/static/css/preview/font.css b/static/css/preview/font.css
@@ -0,0 +1,47 @@
+/* Montserrat */
+@font-face {
+  font-family: 'Montserrat';
+  src:
+    local('Montserrat'),
+    url(../static/fonts/Montserrat/Montserrat-Light.ttf),
+    format('truetype');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src:
+    local('Montserrat'),
+    url(../static/fonts/Montserrat/Montserrat.ttf),
+    format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src:
+    local('Montserrat'),
+    url(../static/fonts/Montserrat/Montserrat-Medium.ttf),
+    format('truetype');
+  font-weight: 500;
+}
+
+/* Source Serif Pro */
+@font-face {
+  font-family: 'Source Serif Pro';
+  src:
+    local('Source Serif Pro'),
+    url(../static/fonts/SourceSerifPro/SourceSerifPro-Regular.ttf),
+    format('truetype');
+  font-weight: 400;
+}
+
+/* Lora */
+@font-face {
+  font-family: 'Lora';
+  src:
+    local('Lora'),
+    url(../static/fonts/Lora/Lora-Regular.ttf),
+    format('truetype');
+  font-weight: 400;
+}
diff --git a/static/css/preview/print.css b/static/css/preview/print.css
@@ -0,0 +1,28 @@
+@page {
+  size: A4;
+  margin: 0;
+}
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  .print-area,
+  .print-area * {
+    visibility: visible;
+  }
+  .print-area {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .page {
+    margin: 0;
+    border: initial;
+    border-radius: initial;
+    width: initial;
+    min-height: initial;
+    box-shadow: initial;
+    background: initial;
+    page-break-after: always;
+  }
+}
diff --git a/static/fonts/Lora/Lora-Regular.ttf b/static/fonts/Lora/Lora-Regular.ttf