fix base stylesheet

README.md

@@ -56,11 +56,11 @@ You can also have a custom configuration for your pagedjs needs`: from custom st
 
 where you can add the following.  WARNING: if you want to use this custom make sure to use all the config for now (i’ll improve that asap). To get the default of each of the option, set it as `undefined`.
 
-`content`: is the dom element you want to paginate;
-`stylesheet`: a custom stylesheet you want to use;
-`button`: the button element you want to use to start the script;
+`content`: is the dom element you want to paginate (default is the body);
+`stylesheet`: a custom stylesheet you want to use (default will use the the system fonts)
+`button`: the button element you want to use to start the script; (default will create a new one);
 `features`: the control you want to give to your user. Can be one of more of the following list: , `"pagedSize"`, `"pagedMargins"`, `"fontFamily"`, `"fontSize"`, `"fontLineHeight"`, `"backgroundColor"`, `"textColor`";
-`uicolor`: the color for the UI (the left column);
+`uicolor`: the color for the left column of the UI;
 
 
 ### styles pagedjs buttons and modal

demo/css/print.css

-@page {
+@media print {
+  h2 {
+    string-set: h2title content(text);
+  }
+
+  @page :right  {
+    @bottom-center  {
+      content: string(h2title);
+    }
+    @top-center {
+        content: "lol";
+    }
+  }
 }
- 
 
 body {
 }
\ No newline at end of file

demo/demo.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>example</title>
-    <link rel="stylesheet" href="../css/reset.css">
+    <link rel="stylesheet" href="css/reset.css">
     <script type="module" src="../dist/pagedPreviewer.js"></script>
     <!--   <script>
             window.pagedMakerConfig = {

dist/pagedPreviewer.js

@@ -69,10 +69,10 @@ body, html {
 }
 
 body { 
-    ${pagedMakerConfig.features.includes("fontFamily") ? "font-family: var(--fontBody, sans-serif);" : ""}
-    ${pagedMakerConfig.features.includes("fontSize") ? "font-size: var(--fontSize, 14px);" : ""}
-    ${pagedMakerConfig.features.includes("fontLineHeight") ? "line-height: var(--lineHeight, 1.4);" : ""}
-    ${pagedMakerConfig.features.includes("textColor") ? "color: var(--body-color);" : ""}
+    ${config_default.features.includes("fontFamily") ? "font-family: var(--fontBody, sans-serif);" : ""}
+    ${config_default.features.includes("fontSize") ? "font-size: var(--fontSize, 14px);" : ""}
+    ${config_default.features.includes("fontLineHeight") ? "line-height: var(--lineHeight, 1.4);" : ""}
+    ${config_default.features.includes("textColor") ? "color: var(--body-color);" : ""}
 
     
     
@@ -80,7 +80,7 @@ body {
 } 
  
 @page { 
-    ${pagedMakerConfig.features.includes("backgroundColor") ? "background: var(--background-color);" : ""}
+    ${config_default.features.includes("backgroundColor") ? "background: var(--background-color);" : ""}
     @bottom-right{
         content: counter(page) "/" counter(pages);
     }

js/modules/baseStylesheet.js

+import config from './config.js';
+
 // style for the export that include css variable for the UI;
 export default `
 
@@ -15,19 +17,19 @@ body, html {
 }
 
 body { 
-    ${pagedMakerConfig.features.includes("fontFamily")
+    ${config.features.includes("fontFamily")
         ? "font-family: var(--fontBody, sans-serif);"
         : ""
     }
-    ${pagedMakerConfig.features.includes("fontSize")
+    ${config.features.includes("fontSize")
         ? "font-size: var(--fontSize, 14px);"
         : ""
     }
-    ${pagedMakerConfig.features.includes("fontLineHeight")
+    ${config.features.includes("fontLineHeight")
         ? "line-height: var(--lineHeight, 1.4);"
         : ""
     }
-    ${pagedMakerConfig.features.includes("textColor")
+    ${config.features.includes("textColor")
         ? "color: var(--body-color);"
         : ""
     }
@@ -38,7 +40,7 @@ body {
 } 
  
 @page { 
-    ${pagedMakerConfig.features.includes("backgroundColor")
+    ${config.features.includes("backgroundColor")
         ? "background: var(--background-color);"
         : ""
     }

js/modules/ui.js

-import pagedMakerConfig from './config.js';
+import config from './config.js';
 import logo from "./pagedjsLogo.js";
 
 // dom to modify the output
 
 export default `
-${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''} 
+${(config.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''} 
 
 
 <div class="pagedPreviewer-modal pagedPreviewer-hidden">
@@ -14,7 +14,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
         <figcaption>paged.js <span>previewer</span></figcaption>
     </figure>
         <div class="pagedPreviewer-item pagesize ${
-          pagedMakerConfig.features.includes("pagedSize")
+          config.features.includes("pagedSize")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -29,7 +29,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
         </div>
 
         <div class="pagedPreviewer-item margins ${
-          pagedMakerConfig.features.includes("pagedMargins")
+          config.features.includes("pagedMargins")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -45,7 +45,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
 
         
         <div class="pagedPreviewer-item ${
-          pagedMakerConfig.features.includes("fontFamily")
+          config.features.includes("fontFamily")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -57,7 +57,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
             </select>
         </div>
         <div class="pagedPreviewer-item ${
-          pagedMakerConfig.features.includes("fontSize")
+          config.features.includes("fontSize")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -67,7 +67,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
         </div>
      
         <div class="pagedPreviewer-item ${
-          pagedMakerConfig.features.includes("fontLineHeight")
+          config.features.includes("fontLineHeight")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -75,7 +75,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
             <input class="cssVarUpdate" id="lineHeight" step="0.1" name="lineHeight" data-css-prop="--lineHeight" type="range" min=".8" max="2"  >
         </div>
         <div class="pagedPreviewer-item  ${
-          pagedMakerConfig.features.includes("backgroundColor")
+          config.features.includes("backgroundColor")
             ? ""
             : "pagedMaker-hyde"
         }">
@@ -84,7 +84,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
             value="#ffffff">
         </div>
         <div class="pagedPreviewer-item  ${
-            pagedMakerConfig.features.includes("textColor")
+            config.features.includes("textColor")
               ? ""
               : "pagedMaker-hyde"
           }">