Merge branch 'master' of gitlab.pagedmedia.org:tools/experiments

4543f4e7 · Julie Blanc · 237e28e1 · eaa7cbae · 4543f4e7 · 4543f4e7
Commit 4543f4e7 authored Nov 23, 2018 by Julie Blanc
16 changed files
--- a/bleeds/css/bleed-v1.css
+++ b/bleeds/css/bleed-v1.css
+
+.paged-marks > div {
+  /* the offset is the location is the space between the crop mark and the page */
+  --offset: 2.11mm;
+  position: absolute;
+  background: transparent;
+  content: " ";
+  width: calc(var(--bleed) + 1px);
+  height: calc(var(--bleed) + 1px);
+}
+
+.paged_crop-tlv {
+
+  top: calc(var(--offset) * -1);
+  border-right: 1px solid var(--cropmark-color);
+  height: 10px;
+}
+
+.paged_crop-tlh {
+  left: calc(var(--offset) * -1);
+  border-bottom: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-trv {
+  top: calc(var(--offset) * -1);
+  right: 0;
+  border-left: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-trh {
+  right: calc(var(--offset) * -1);
+  border-bottom: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-blv {
+  bottom: calc(var(--offset) * -1);
+  border-right: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-blh {
+  left: calc(var(--offset) * -1);
+  bottom: 0;
+  border-top: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-brv {
+  bottom: calc(var(--offset) * -1);
+  right: 0;
+  border-left: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-brh {
+  bottom: 0;
+  right: calc(var(--offset) * -1);
+  border-top: 1px solid var(--cropmark-color);
+}
\ No newline at end of file
--- a/bleeds/css/bleed-v2.css
+++ b/bleeds/css/bleed-v2.css
+
+.paged-marks > div {
+  /* the offset is the location is the space between the crop mark and the page */
+  --offset: 2.11mm;
+  position: absolute;
+  background: transparent;
+  content: " ";
+  width: calc(var(--bleed) + 1px);
+  height: calc(var(--bleed) + 1px);
+}
+
+.paged_crop-tlv {
+
+  top: calc(var(--offset) * -1);
+  border-right: 1px solid var(--cropmark-color);
+  height: 10px;
+}
+
+.paged_crop-tlh {
+  left: calc(var(--offset) * -1);
+  border-bottom: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-trv {
+  top: calc(var(--offset) * -1);
+  right: 0;
+  border-left: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-trh {
+  right: calc(var(--offset) * -1);
+  border-bottom: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-blv {
+  bottom: calc(var(--offset) * -1);
+  border-right: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-blh {
+  left: calc(var(--offset) * -1);
+  bottom: 0;
+  border-top: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-brv {
+  bottom: calc(var(--offset) * -1);
+  right: 0;
+  border-left: 1px solid var(--cropmark-color);
+}
+
+.paged_crop-brh {
+  bottom: 0;
+  right: calc(var(--offset) * -1);
+  border-top: 1px solid var(--cropmark-color);
+}
\ No newline at end of file
--- a/bleeds/css/bleeds.css
+++ b/bleeds/css/bleeds.css
--- a/bleeds/css/interface.css
+++ b/bleeds/css/interface.css
+:root {
+
+  /* color for the interface */
+  --color-background: white;
+  --color-marginBox: red;
+  --color-pageBox: transparent;
+  --color-paper: white;
+  --color-baseline: cyan;
+    --margin-interface: 300px;
+
+  /* list variables */
+  --font-size: 12px;
+  --font-lineHeight: 16px;
+  
+
+  /* test bleed */
+  --bleed: 0in;
+}
+
+@media print {
+  --color-marginBox: transparent;
+}
+
+
+
+/* To define how the book look on the screen: */
+@media screen {
+  body {
+      background-color: var(--color-background);
+  }
+  .pagedjs_pages {
+      display: flex;
+      width: calc(var(--width) * 2);
+      flex: 0;
+      flex-wrap: wrap;
+      margin: 0 auto;
+  }
+  .pagedjs_page {
+      background-color: var(--color-paper);
+      box-shadow: 0 0 0 2px var(--color-pageBox);
+      margin: 0;
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-top: var(--maring-interface);
+  }
+  .pagedjs_first_page {
+      margin-left: var(--width);
+  }
+
+
+  /* show the margin-box */
+
+  .pagedjs_margin-content
+      {
+      box-shadow: 0 0 0 1px inset var(--color-marginBox);
+  }
+
+  
+  /* uncomment for recto/verso book. 
+  --------------------------------------------------- */
+ .pagedjs_pages {
+      flex-direction: column;
+      width: 100%;
+  }
+
+  .pagedjs_first_page {
+      margin-left: 0;
+  }
+
+  .pagedjs_page {
+      margin: 0 auto;
+      margin-top: 10mm;
+  } 
+
+}
+
+
+
+
+
+/*  to see margins */
+.pagedjs_margin-top-left-corner-holder,
+.pagedjs_margin-top-right-corner-holder,
+.pagedjs_margin-bottom-left-corner-holder,
+.pagedjs_margin-bottom-right-corner-holder,
+.pagedjs_margin-bottom, 
+.pagedjs_margin-left, 
+.pagedjs_margin-right, 
+.pagedjs_margin-top {
+    background: lightgray;
+}
+
+.pagedjs_page  {
+    background: gray;
+}
+
+.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
+  background: repeating-linear-gradient(transparent 0, transparent 50%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
+    background-size: 100% 36px;
+}
--- a/bleeds/css/main.css
+++ b/bleeds/css/main.css
+
+
+
+@page {
+    size: 150mm 210mm;
+    margin: 2cm 1.8cm  4cm  3cm;
+}
+
+.page {
+    --bleed: 6mm;
+}
+
+
+/* :root {
+    --bleed: 6pt;
+} */
+/* 
+section {
+    break-before: page;
+    font-size: 10px;
+}
+
+.cover {
+  page: cover;
+}
+
+@page cover {
+  background: lightskyblue;
+} */
+
+
+.pagedjs_page {
+    /* background: red; */
+}
\ No newline at end of file
--- a/bleeds/js/bleeds.js
+++ b/bleeds/js/bleeds.js
+const pageHeight = window.getComputedStyle(document.body).getPropertyValue('--height');
+const pagedWidth = window.getComputedStyle(document.body).getPropertyValue('--width');
+const pagedBleed = window.getComputedStyle(document.body).getPropertyValue('--bleed');
+
+
+const pagedPages = document.querySelectorAll('.pagedjs_page');
+pagedPages.forEach(page => {
+  // get the properties for the margin for the page
+  const pagedMarginTop = window.getComputedStyle(page).getPropertyValue('--margin-top');
+  page.style.setProperty('--margin-top', 'calc var(--margin-top) + var(--bleed) + var(--bleed));')
+  const pagedMarginBottom = window.getComputedStyle(page).getPropertyValue('--margin-bottom');
+  const pagedMarginLeft = window.getComputedStyle(page).getPropertyValue('--margin-left');
+  const pagedMarginRight = window.getComputedStyle(page).getPropertyValue('--margin-right');
+
+})
+
--- a/bleeds/js/paged.polyfill.js
+++ b/bleeds/js/paged.polyfill.js
--- a/bleeds/pageVars.html
+++ b/bleeds/pageVars.html
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="UTF-8">
+  <meta lang="en-US">
+  <!-- <link href="css/bleeds.css" rel="stylesheet"> -->
+  <!-- <link href="css/interface.css" rel="stylesheet">
+  <link href="css/main.css" rel="stylesheet">
+
+  <link href="css/bleeds.css" rel="stylesheet"> -->
+
+
+
+
+
+<style>
+ /* size can take calc in chromium */
+
+ :root {
+ }
+@page {
+  size: calc(100mm + 1in) 400mm;
+}
+
+
+
+
+</style> 
+</head>
+
+
+
+
+<body>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
+</body>
+
+</html>
\ No newline at end of file
--- a/bleeds/sources/cropMark.pdf
+++ b/bleeds/sources/cropMark.pdf
--- a/bleeds/sources/cropMark.svg
+++ b/bleeds/sources/cropMark.svg
+<svg width="100px" height="100px" viewBox="0 0 100 100" class="visually-hidden">
+  <circle id="template" cx="50" cy="50" r="50">
+</svg>
+  
\ No newline at end of file
--- a/bleeds/sources/letter-6pt-noCropMark.pdf
+++ b/bleeds/sources/letter-6pt-noCropMark.pdf
--- a/bleeds/sources/letter-noBleed-0.125in.pdf
+++ b/bleeds/sources/letter-noBleed-0.125in.pdf
--- a/bleeds/sources/letter-noBleed.pdf
+++ b/bleeds/sources/letter-noBleed.pdf
--- a/bleeds/sources/letter.pdf
+++ b/bleeds/sources/letter.pdf
--- a/bleeds/static.html
+++ b/bleeds/static.html
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="UTF-8">
+  <meta lang="en-US">
+  <!-- <link href="css/bleeds.css" rel="stylesheet"> -->
+  <link href="css/interface.css" rel="stylesheet">
+  <link href="css/main.css" rel="stylesheet">
+  <link href="css/bleeds.css" rel="stylesheet">
+</head>
+
+
+
+
+<!-- <script src="js/paged.polyfill.js"></script> -->
+
+<body>
+  <div class="pagedjs_pages">
+      <div class="pagedjs_page pagedjs_first_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
+          <div class="paged-marks">
+              <div class="paged_crop-tlv"></div>
+          <div class="paged_crop-tlh"></div>
+          <div class="paged_crop-blv"></div>
+          <div class="paged_crop-blh"></div>
+          <div class="paged_crop-trv"></div>
+          <div class="paged_crop-trh"></div>
+          <div class="paged_crop-brv"></div>
+          <div class="paged_crop-brh"></div>
+          </div>
+      
+        <div class="pagedjs_margin-top-left-corner-holder">
+          <div class="pagedjs_margin pagedjs_margin-top-left-corner">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-top">
+          <div class="pagedjs_margin pagedjs_margin-top-left">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-top-center">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-top-right">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-top-right-corner-holder">
+          <div class="pagedjs_margin pagedjs_margin-top-right-corner">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-right">
+          <div class="pagedjs_margin pagedjs_margin-right-top">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-right-middle">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-right-bottom">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-left">
+          <div class="pagedjs_margin pagedjs_margin-left-top">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-left-middle">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-left-bottom">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-bottom-left-corner-holder">
+          <div class="pagedjs_margin pagedjs_margin-bottom-left-corner">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-bottom">
+          <div class="pagedjs_margin pagedjs_margin-bottom-left">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-bottom-center">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+          <div class="pagedjs_margin pagedjs_margin-bottom-right">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_margin-bottom-right-corner-holder">
+          <div class="pagedjs_margin pagedjs_margin-bottom-right-corner">
+            <div class="pagedjs_margin-content"></div>
+          </div>
+        </div>
+        <div class="pagedjs_area">
+           
+          <div class="pagedjs_page_content" style="column-width: 250px; column-gap: calc(var(--margin-right) + var(--margin-left));">
+
+            <div>
+              <section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover"> </section>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagedjs_page pagedjs_first_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
+          <div class="pagedjs_margin-top-left-corner-holder">
+            <div class="pagedjs_margin pagedjs_margin-top-left-corner">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-top">
+            <div class="pagedjs_margin pagedjs_margin-top-left">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-top-center">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-top-right">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-top-right-corner-holder">
+            <div class="pagedjs_margin pagedjs_margin-top-right-corner">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-right">
+            <div class="pagedjs_margin pagedjs_margin-right-top">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-right-middle">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-right-bottom">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-left">
+            <div class="pagedjs_margin pagedjs_margin-left-top">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-left-middle">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-left-bottom">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-bottom-left-corner-holder">
+            <div class="pagedjs_margin pagedjs_margin-bottom-left-corner">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-bottom">
+            <div class="pagedjs_margin pagedjs_margin-bottom-left">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-bottom-center">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+            <div class="pagedjs_margin pagedjs_margin-bottom-right">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_margin-bottom-right-corner-holder">
+            <div class="pagedjs_margin pagedjs_margin-bottom-right-corner">
+              <div class="pagedjs_margin-content"></div>
+            </div>
+          </div>
+          <div class="pagedjs_area">
+            <div class="pagedjs_page_content" style="column-width: 250px; column-gap: calc(var(--margin-right) + var(--margin-left));">
+  
+              <div>
+                <section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover"> </section>
+              </div>
+            </div>
+          </div>
+        </div>
+  
+    </div>
+</body>
+
+</html>
\ No newline at end of file
--- a/bleeds/working.html
+++ b/bleeds/working.html
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="UTF-8">
+  <meta lang="en-US">
+  <!-- <link href="css/bleeds.css" rel="stylesheet"> -->
+  <link href="css/interface.css" rel="stylesheet">
+  
+  <!-- <link href="css/bleeds.css" rel="stylesheet">  -->
+  <link href="css/main.css" rel="stylesheet">
+</head>
+
+
+
+
+ <script src="http://localhost:9090/dist/paged.polyfill.js"></script> 
+
+<body>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
+  <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
+  <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum</p>
+  <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+ <p>Lorem ipsum dolor</p>
+ <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
+</body>
+
+</html>
\ No newline at end of file