pagedjs layout
parent
a2bb4ae6b8
commit
30a86597bd
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg class="icon-book" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1,0,0,1,-746.27,0)">
|
||||||
|
<g id="book" transform="matrix(1,0,0,1,746.27,0)">
|
||||||
|
<rect x="0" y="0" width="477.867" height="477.867" style="fill:none;"/>
|
||||||
|
<clipPath id="_clip1">
|
||||||
|
<rect x="0" y="0" width="477.867" height="477.867"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip1)">
|
||||||
|
<g transform="matrix(1.07692,0,0,0.885123,1.88354e-05,39.9185)">
|
||||||
|
<path d="M436.139,54.036C371.791,11.007 288.455,8.744 221.867,48.216C155.278,8.744 71.942,11.007 7.595,54.036C2.849,57.202 -0.001,62.531 0,68.236L0,406.446C-0.009,412.748 3.456,418.541 9.011,421.516C14.563,424.487 21.301,424.159 26.538,420.663C82.776,383.032 156.156,383.032 212.394,420.663C212.616,420.817 212.872,420.851 213.094,420.987C213.316,421.124 213.555,421.362 213.811,421.516C214.407,421.771 215.017,421.993 215.637,422.182C216.257,422.464 216.896,422.703 217.548,422.899C218.491,423.117 219.45,423.26 220.415,423.326C220.91,423.326 221.371,423.531 221.866,423.531L222.293,423.531C222.866,423.489 223.435,423.415 224,423.309C224.864,423.222 225.72,423.068 226.56,422.848C227.141,422.658 227.711,422.436 228.267,422.182C228.796,421.96 229.359,421.841 229.871,421.568C230.11,421.431 230.298,421.227 230.537,421.073C230.776,420.919 231.049,420.868 231.288,420.715C287.526,383.084 360.906,383.084 417.144,420.715C424.966,425.975 435.57,423.898 440.83,416.076C442.743,413.231 443.755,409.876 443.734,406.447L443.734,68.236C443.734,62.531 440.884,57.202 436.139,54.036ZM204.8,377.279C150.735,351.93 88.198,351.93 34.133,377.279L34.133,77.656C86.731,46.406 152.202,46.406 204.8,77.656L204.8,377.279ZM409.6,377.279C355.535,351.93 292.998,351.93 238.933,377.279L238.933,77.656C291.53,46.406 357.002,46.406 409.6,77.656L409.6,377.279Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg class="icon-printer" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<path d="M460.8,119.467L375.467,119.467L375.467,17.067C375.467,7.641 367.826,0 358.4,0L119.467,0C110.041,0 102.4,7.641 102.4,17.067L102.4,119.467L17.067,119.467C7.641,119.467 0,127.108 0,136.533L0,358.4C0,367.826 7.641,375.467 17.067,375.467L102.4,375.467L102.4,460.8C102.4,470.226 110.041,477.867 119.467,477.867L358.4,477.867C367.826,477.867 375.467,470.226 375.467,460.8L375.467,375.467L460.8,375.467C470.226,375.467 477.867,367.826 477.867,358.4L477.867,136.533C477.867,127.108 470.226,119.467 460.8,119.467ZM136.533,34.133L341.333,34.133L341.333,119.466L136.533,119.466L136.533,34.133ZM341.333,443.733L136.533,443.733L136.533,290.133L341.333,290.133L341.333,443.733ZM443.733,341.333L375.466,341.333L375.466,290.133L392.533,290.133C401.959,290.133 409.6,282.492 409.6,273.066C409.6,263.64 401.959,256 392.533,256L85.333,256C75.907,256 68.266,263.641 68.266,273.067C68.266,282.493 75.907,290.134 85.333,290.134L102.4,290.134L102.4,341.334L34.133,341.334L34.133,153.6L443.733,153.6L443.733,341.333Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M409.6,187.733L392.533,187.733C383.107,187.733 375.466,195.374 375.466,204.8C375.466,214.226 383.107,221.867 392.533,221.867L409.6,221.867C419.026,221.867 426.667,214.226 426.667,204.8C426.667,195.374 419.026,187.733 409.6,187.733Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M290.133,324.267L187.733,324.267C178.307,324.267 170.666,331.908 170.666,341.334C170.666,350.76 178.307,358.401 187.733,358.401L290.133,358.401C299.559,358.401 307.2,350.76 307.2,341.334C307.2,331.908 299.559,324.267 290.133,324.267Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M290.133,375.467L187.733,375.467C178.307,375.467 170.666,383.108 170.666,392.534C170.666,401.96 178.307,409.601 187.733,409.601L290.133,409.601C299.559,409.601 307.2,401.96 307.2,392.534C307.2,383.108 299.559,375.467 290.133,375.467Z" style="fill-rule:nonzero;"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1,0,0,1,-1354.1,0)">
|
||||||
|
<g transform="matrix(1,0,0,1,1354.1,0)">
|
||||||
|
<rect x="0" y="0" width="477.867" height="477.867" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,1.07337,0,-33.9207)">
|
||||||
|
<path d="M1831.97,109.874C1831.97,92.35 1816.72,78.144 1797.91,78.144L1388.16,78.144C1369.35,78.144 1354.1,92.35 1354.1,109.874L1354.1,335.203C1354.1,352.727 1369.35,366.933 1388.16,366.933L1797.91,366.933C1816.72,366.933 1831.97,352.727 1831.97,335.203L1831.97,109.874ZM1798.97,109.874C1798.97,109.33 1798.5,108.889 1797.91,108.889L1388.16,108.889C1387.58,108.889 1387.1,109.33 1387.1,109.874L1387.1,335.203C1387.1,335.747 1387.58,336.189 1388.16,336.189L1797.91,336.189C1798.5,336.189 1798.97,335.747 1798.97,335.203L1798.97,109.874Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,1,8.36,-15)">
|
||||||
|
<path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(2.2952e-17,0.374835,-1,6.12323e-17,1985.13,-209.918)">
|
||||||
|
<path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(2.2952e-17,0.374835,-1,6.12323e-17,2076.04,-209.918)">
|
||||||
|
<path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,1,0,-7)">
|
||||||
|
<path d="M1375.99,306.195L1812.22,306.195C1821.33,306.195 1828.72,298.802 1828.72,289.695C1828.72,280.588 1821.33,273.195 1812.22,273.195L1375.99,273.195C1366.88,273.195 1359.49,280.588 1359.49,289.695C1359.49,298.802 1366.88,306.195 1375.99,306.195Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
|
||||||
|
.pagedjs_page{
|
||||||
|
--pagedjs-baseline: 11px;
|
||||||
|
--pagedjs-baseline-position: -4px;
|
||||||
|
--pagedjs-baseline-color: cyan;
|
||||||
|
background: linear-gradient( var(--color-paper) 0%, var(--color-paper) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
|
||||||
|
background-size: 100% var(--pagedjs-baseline);
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
background-position-y: var(--pagedjs-baseline-position);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
body{
|
||||||
|
--header-w-close: 78px;
|
||||||
|
--header-w-open: 220px;
|
||||||
|
--color-icon-select: rgb(8, 38, 92);
|
||||||
|
--color-icon: rgb(85, 109, 175);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#header-pagedjs{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#header-pagedjs{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
position: fixed;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 10px;
|
||||||
|
right: 40px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#header-pagedjs button {
|
||||||
|
display: flex;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 18px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--color-icon);
|
||||||
|
background-color: rgb(225, 225, 225);
|
||||||
|
border: 3px solid rgb(225, 225, 225);
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#header-pagedjs button svg {
|
||||||
|
width: 100%;
|
||||||
|
fill: var(--color-icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#header-pagedjs button::before{
|
||||||
|
content: attr(data-text);
|
||||||
|
color: var(--color-icon-select)!important;
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
left: -216px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 18px;
|
||||||
|
display: none;
|
||||||
|
font-weight: bold;
|
||||||
|
/* background-color: rgba(225, 225, 225, 0.3);
|
||||||
|
padding: 3px 8px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* checked */
|
||||||
|
#input-screen:checked ~ #button-screen,
|
||||||
|
#input-print:checked ~ #button-print-preview { border: 3px solid var(--color-icon); }
|
||||||
|
|
||||||
|
/* disabled */
|
||||||
|
button:disabled { cursor: none; }
|
||||||
|
#button-print:disabled svg{ cursor: none; fill: #bbb!important; }
|
||||||
|
|
||||||
|
/* hover */
|
||||||
|
#header-pagedjs button:hover svg{ fill: var(--color-icon-select); }
|
||||||
|
#header-pagedjs button:hover{ border: 3px solid var(--color-icon-select)!important; }
|
||||||
|
#header-pagedjs button:hover::before{ display: block!important; }
|
||||||
|
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
#header-pagedjs{ display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
|
||||||
|
|
||||||
|
/* Change the look */
|
||||||
|
:root{
|
||||||
|
--color-background: whitesmoke;
|
||||||
|
--color-pageBox: #666;
|
||||||
|
--color-paper: white;
|
||||||
|
--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(--pagedjs-width) * 2);
|
||||||
|
flex: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.pagedjs_page {
|
||||||
|
background-color: var(--color-paper);
|
||||||
|
box-shadow: 0 0 0 1px var(--color-pageBox);
|
||||||
|
margin: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
margin-top: 10mm;
|
||||||
|
}
|
||||||
|
.pagedjs_first_page {
|
||||||
|
margin-left: var(--pagedjs-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagedjs_page:last-of-type{
|
||||||
|
margin-bottom: 10mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* show the margin-box */
|
||||||
|
|
||||||
|
.pagedjs_margin-top-left-corner-holder,
|
||||||
|
.pagedjs_margin-top,
|
||||||
|
.pagedjs_margin-top-left,
|
||||||
|
.pagedjs_margin-top-center,
|
||||||
|
.pagedjs_margin-top-right,
|
||||||
|
.pagedjs_margin-top-right-corner-holder,
|
||||||
|
.pagedjs_margin-bottom-left-corner-holder,
|
||||||
|
.pagedjs_margin-bottom,
|
||||||
|
.pagedjs_margin-bottom-left,
|
||||||
|
.pagedjs_margin-bottom-center,
|
||||||
|
.pagedjs_margin-bottom-right,
|
||||||
|
.pagedjs_margin-bottom-right-corner-holder,
|
||||||
|
.pagedjs_margin-right,
|
||||||
|
.pagedjs_margin-right-top,
|
||||||
|
.pagedjs_margin-right-middle,
|
||||||
|
.pagedjs_margin-right-bottom,
|
||||||
|
.pagedjs_margin-left,
|
||||||
|
.pagedjs_margin-left-top,
|
||||||
|
.pagedjs_margin-left-middle,
|
||||||
|
.pagedjs_margin-left-bottom{
|
||||||
|
box-shadow: 0 0 0 1px inset var(--color-marginBox);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
@media screen {
|
||||||
|
|
||||||
|
.pagedjs_pages {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagedjs_first_page {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagedjs_page {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
/* INTERFACE ------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* paged js interface and screen view css */
|
||||||
|
@import "interface/interface.css";
|
||||||
|
|
||||||
|
/* uncomment for recto/verso book : */
|
||||||
|
/* @import "interface/recto-verso.css"; */
|
||||||
|
|
||||||
|
/* uncomment to see the baseline : */
|
||||||
|
/* @import "interface/baseline.css"; */
|
||||||
|
|
||||||
|
@import "interface/header.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,449 @@
|
|||||||
|
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in
|
||||||
|
* IE on Windows Phone and in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
// line-height: 1.15; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
main { /* 1 */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct margin in IE 8.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the gray background on active links in IE 10.
|
||||||
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent; /* 1 */
|
||||||
|
-webkit-text-decoration-skip: objects; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font style in Android 4.3-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct background and color in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in iOS 4-7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the overflow in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers (opinionated).
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
|
* controls in Android 4.
|
||||||
|
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html [type="button"], /* 1 */
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct display in IE 9-.
|
||||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10-.
|
||||||
|
* 2. Remove the padding in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details, /* 1 */
|
||||||
|
menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scripting
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hidden
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,296 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
src: url(./fonts/Millimetre-Light_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Light_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Regular";
|
||||||
|
src: url(./fonts/Millimetre-Regular_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Regular_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Bold";
|
||||||
|
src: url(./fonts/Millimetre-Bold_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Bold_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Extrablack";
|
||||||
|
src: url(./fonts/Millimetre-Extrablack_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Extrablack_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@media print {
|
||||||
|
/* Size and marin for all pages ------------- */
|
||||||
|
@page {
|
||||||
|
size: 148mm 210mm;
|
||||||
|
margin-top: 15mm;
|
||||||
|
margin-bottom: 15mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LEFT PAGES -------------------------------- */
|
||||||
|
|
||||||
|
@page :left {
|
||||||
|
margin-left: 20mm;
|
||||||
|
margin-right: 20mm;
|
||||||
|
@bottom-left {
|
||||||
|
content: counter(page);
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
font-size: 8pt;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
@bottom-center {
|
||||||
|
content: "chatty, messy, sticky, tsss";
|
||||||
|
text-align: left;
|
||||||
|
margin-left: -5mm;
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
font-size: 8pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RIGHT PAGES -------------------------------- */
|
||||||
|
|
||||||
|
@page :right {
|
||||||
|
margin-left: 20mm;
|
||||||
|
margin-right: 20mm;
|
||||||
|
@bottom-right {
|
||||||
|
content: counter(page);
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
font-size: 8pt;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
@bottom-center {
|
||||||
|
content: string(chapTitle);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
break-after: always;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter h1 {
|
||||||
|
string-set: chapTitle content(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BLANK PAGES -------------------------------- */
|
||||||
|
|
||||||
|
@page: blank {
|
||||||
|
@bottom-left {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
@bottom-center {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
@bottom-right {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* COUVERTURE -------------------------------- */
|
||||||
|
|
||||||
|
@page: first {
|
||||||
|
margin: 10mm 10mm;
|
||||||
|
/* background-color: rgb(20, 121, 253); */
|
||||||
|
@bottom-right {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#cover {
|
||||||
|
font-family: "Millimetre-Light", sans-serif;
|
||||||
|
display: block;
|
||||||
|
/* break-before: none; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#titletext {
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
font-size: 20pt;
|
||||||
|
margin-top: -2.5mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms {
|
||||||
|
width: 80%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.cms p {
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 14pt;
|
||||||
|
}
|
||||||
|
.diary {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
column-gap: 10px;
|
||||||
|
row-gap: 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.part {
|
||||||
|
background-color: blanchedalmond;
|
||||||
|
}
|
||||||
|
|
||||||
|
.part p {
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 14pt;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 2mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.part2,
|
||||||
|
.part3 {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.part2 img,
|
||||||
|
.part3 img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.part3 img {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition p {
|
||||||
|
font-family: "Millimetre-Extrablack";
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cartoon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* margin-top: 5mm; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 2.5mm;
|
||||||
|
background-color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#firstintro {
|
||||||
|
margin-bottom: 8.5mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro2 {
|
||||||
|
break-before: always;
|
||||||
|
}
|
||||||
|
|
||||||
|
#expl_buchimgae img {
|
||||||
|
float: right;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms p,
|
||||||
|
.text p,
|
||||||
|
.intro p {
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro h4 {
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro p {
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 14pt;
|
||||||
|
border: 1px dashed black;
|
||||||
|
padding: 0 2mm;
|
||||||
|
}
|
||||||
|
#tsss {
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cut {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 10mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: blanchedalmond;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-left: -5mm;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text p,
|
||||||
|
.part p {
|
||||||
|
padding: 0 2mm;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 14pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #adjustgap1,
|
||||||
|
#adjustgap2 {
|
||||||
|
margin-bottom: 7.5mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
#adjustgap3 {
|
||||||
|
margin-top: -2.5mm;
|
||||||
|
} */
|
||||||
|
#photo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Buchimgae {
|
||||||
|
text-decoration: dotted underline;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Buchimgaepic {
|
||||||
|
display: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Buchimgaepic img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ani img,
|
||||||
|
.enrico img,
|
||||||
|
.bindtogether img,
|
||||||
|
.chaepic img,
|
||||||
|
.compopic img,
|
||||||
|
.bilbi img {
|
||||||
|
width: 80%;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enrico,
|
||||||
|
.bindtogether,
|
||||||
|
.chaepic,
|
||||||
|
.bilbi {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SECTION BREAKS -------------------------------- */
|
||||||
|
|
||||||
|
section {
|
||||||
|
/* break-before: right; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CONTENT --------------------------------------- */
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Light";
|
||||||
|
src: url(./fonts/Millimetre-Light_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Light_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Regular";
|
||||||
|
src: url(./fonts/Millimetre-Regular_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Regular_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Bold";
|
||||||
|
src: url(./fonts/Millimetre-Bold_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Bold_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Millimetre-Extrablack";
|
||||||
|
src: url(./fonts/Millimetre-Extrablack_web.woff2) format("woff2"),
|
||||||
|
url(./fonts/Millimetre-Extrablack_web.woff) format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cover h1 {
|
||||||
|
font-family: "Millimetre-Regular";
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
@ -0,0 +1,347 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<title>chatty, messy, sticky, tsss...In Habitat</title>
|
||||||
|
<!-- <link rel="stylesheet" href="index.css" media="only screen" /> -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)"
|
||||||
|
href="./laptop_s.css"
|
||||||
|
/>
|
||||||
|
<script type="module" src="js/script.js"></script>
|
||||||
|
<script type="module" src="js/handlers.js"></script>
|
||||||
|
<script
|
||||||
|
type="module"
|
||||||
|
id="module-reload"
|
||||||
|
src="js/reload-in-place.js"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<link href="css/pagedjs/reset.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="css/pagedjs/pagedjs.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link
|
||||||
|
id="style-screen"
|
||||||
|
href="css/style-screen.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- FONTES -->
|
||||||
|
<link
|
||||||
|
href="fonts/open-sans/stylesheet.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section id = "cover">
|
||||||
|
<div class = "titletext">
|
||||||
|
<h1 class = "title">chatty, messy, sticky, <span id="tsss" class = "title">tsss</span>...</h1>
|
||||||
|
<h4>A diary from Habitat (Tredozio, IT), August 2022</h4>
|
||||||
|
<p>By Chaeyoung Kim and Nami Kim</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id = "introduction">
|
||||||
|
<div class = "cms"><p>
|
||||||
|
Hello, we are two artists, Nami and Chaeyoung.
|
||||||
|
chatty, messy, sticky, ___ is a series of a performative publishing project, attempting to embrace diverse formats of collective workshop.
|
||||||
|
chatty, messy, sticky, tsss... is the first experiment that took place in Habitat, a co-living/co-working space in Tredozio (IT) on August 2022.
|
||||||
|
This book is a framgmental documentation of the workshop.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="diary" data-chapter="1">
|
||||||
|
<div class="part part1" >
|
||||||
|
<p>
|
||||||
|
"Yesterday I published something. Ah wait, not 'I', I mean 'we'. I
|
||||||
|
was with 11 other people and we made our own little book then bound
|
||||||
|
everything together. Pfff... it was not easy to bind all the
|
||||||
|
different pieces into one, because everyone made various contents
|
||||||
|
with different intentions. We were so chatty thus it was chaotic.
|
||||||
|
But we persistently and stubbornly stayed together. In the end, what
|
||||||
|
we created was a heavy-fat-ugly-cute book thingy."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="part part2">
|
||||||
|
<img src="./img/book1_1024.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="part part3" >
|
||||||
|
<img src="./img/pancake.jpg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="part part4">
|
||||||
|
<p>
|
||||||
|
"3, 2, 1, Yayyyy! We
|
||||||
|
cheered and celebrated our collaborative Buchimgae (Korean pancake)
|
||||||
|
cooking. Sharing one Buchimage altogether, we tore it into pieces.
|
||||||
|
It was GOOD. The pancake batter was a glue, as it hugged all the
|
||||||
|
ingredients. Looking back, cooking was also a glue, because we
|
||||||
|
became closer in the end. Tssss... the sizzle, the chatty and the
|
||||||
|
festive sounds still lingers in my ears..."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class = "transition"data-chapter="2"><p>.</p><p>.</p><p>.</p></section>
|
||||||
|
|
||||||
|
<section class="cartoon" data-chapter="3" >
|
||||||
|
<div class="cut cut1">
|
||||||
|
<div class="ani"><img src="./img/ex.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...<br>
|
||||||
|
Our journey from the Netherlands to Italy was made through winding roads. When we landed to <a href ="https://habitattt.it/">Habitat</a>,
|
||||||
|
the sky was colored into orange.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut2">
|
||||||
|
<div class="ani"><img src="./img/bibi_768.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Our friend Jacopo (a.k.a Pongie) and a kitten Bilbi, a mascot of Habitat, welcomed us with open arms.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut cut3">
|
||||||
|
<div class="ani"><img src="./img/wasp_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Ah yea, a group of wasps as well! </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut3a">
|
||||||
|
<div class="ani"><img src="./img/habitat_process2.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Our first workshop <i>chatty, messy, sticky, tsss...</i> was planned to happen two days later.
|
||||||
|
What we wanted to do with artists in Habitat is creating a temporary platform to make collective publications into two different formats;
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut3aa">
|
||||||
|
<div class="ani"><img src="./img/habitat_process2.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>1) a format of a book through relay binding<br>
|
||||||
|
2) a format of a dish: <span id="Buchimgae">Buchimgae, Korean pancake.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="intro intro1" id = "firstintro">
|
||||||
|
<h4>The collective book binding (step-by-step):</h4>
|
||||||
|
<p>
|
||||||
|
a-1) introduce what we're going to do; part one relay book binding (10-15m):<br>
|
||||||
|
|
||||||
|
Start from our title and unpack the (background) story of the workshop idea. Let participants know that the workshop will recorded as soundscape and ask if they're okay with it.<br><br>
|
||||||
|
|
||||||
|
|
||||||
|
a-2) Play around with tools: (15m)<br>
|
||||||
|
Before get into the binding session, participants have 15 minutes to play around with the prepared tools. They can touch and use a few of them and will have the sense of materiality.
|
||||||
|
Participants sit around a table and each of them has a specific role. (e.g. Person A cuts papers, person B punches holes, person C tapes, person D folds, etc). Through the relayed tasks, they will make collaborative publication(s). During the session, they will share their thoughts and discuss the collective values in the action of binding.
|
||||||
|
<br><br>
|
||||||
|
a-3) Select a tool for each person and explain why they chose it. (10m)<br>
|
||||||
|
Give them a few minutes to select a tool/a role they want, and have a short round to listen to the reasons.
|
||||||
|
Have a brief overview for the outcome and share thoughts.<br><br>
|
||||||
|
a-4) A brief discussion for the arrangement of seat positions (10-20m)
|
||||||
|
: Let them think about orders/mechanisms they want to have<br><br>
|
||||||
|
a-5)The relay binding moment! (45m) While waiting for one's turn, there will be continuous daily conversation.<br><br>
|
||||||
|
a-6) Wrap up (10m):<br>
|
||||||
|
A round of feeling and touching the outcome. Then have a 3 minutes of cool-down moment to think how they want to name/define the outcome. Then let them write it down on sticky notes/paper (prepared by the hosts) and put them on the outcome (pub).
|
||||||
|
|
||||||
|
[BREAK] The 1st session done! 30mins tea-time / prepare the next workshop; Buchimgae making
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "cut cut3b">
|
||||||
|
<div class="ani"><img src = "./img/workshop_pic.jpg"></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
It's the D-day! The 28th Aug 2022, 5PM<br>Participants were very respectfully listening to our introduction.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "cut cut3c">
|
||||||
|
<div class="ani" id = "taping">
|
||||||
|
<img src = "./img/taping-recording_1024.jpg">
|
||||||
|
</div>
|
||||||
|
<div class = "enrico">
|
||||||
|
<img src = "./img/binding_pic.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p> Tssssss...... Taping sounds!<br>
|
||||||
|
People were busy with making their own page!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut4">
|
||||||
|
<div class="ani"><img src="./img/binding_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Yea...We remeber... The rustle of papers being cut, torn out, sticked....
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut5">
|
||||||
|
<div class="ani" id = "collectivebind">
|
||||||
|
<img src="./img/binding-2_1024.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
When it seemed that people almost finishsed making their pages, we wanted to start the relay binding.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut5b">
|
||||||
|
<div class="ani" id = "collectivebind">
|
||||||
|
<img src ="./img/thickbook.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Starting from a page, it was becoming a book. Getting thicker and thicker...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut6">
|
||||||
|
<div class="ani"><img src="./img/tada.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Tada!!! Completed!<br>
|
||||||
|
We asked for the participants to label how they want to name/call it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut6">
|
||||||
|
<div class="ani"><img src="./img/label_book_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>Tada!!! Completed!<br>
|
||||||
|
We asked for the participants to label how they want to name/call it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="intro intro2">
|
||||||
|
<h4>Cooking Buchimgae together (step-by-step):</h4>
|
||||||
|
<p>
|
||||||
|
b-1) Ask ppl to explain what ingredients they brought (if they haven't brought any, then grab whatever in the fridge and ask them why they chose it)<br>
|
||||||
|
b-2) Introduce what we're going to do; what is Buchimgae,<BR> In Korea, we count the number of Buchimgae as if we count paper. We call it like Buchimgae 1 jang (=page), 2 jang...<br>
|
||||||
|
|
||||||
|
b-3) Split into a few groups. Each group makes their own Buchimgae, mixing various ingredients.<br>
|
||||||
|
b-4) When mixing the ingredients, use batter that the hosts prepared. They will be mingled together.<br>
|
||||||
|
b-4) Have a special ceremony to eat Buchimgae, which is tearing it all together :) (Normally a page of Buchimgae is supposed to be had together.<br>
|
||||||
|
b-5) Just enjoying it!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "intro" id = "expl_buchimgae">
|
||||||
|
<p>Buchimage is Korean pancake.</span>, mixing (= gluing = binding) various ingredients.</p>
|
||||||
|
<img src="./img/buchimgae_m.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut7">
|
||||||
|
<div class="ani" ><img src="./img/chae-explain_768.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Before the cooking session, we introduced what Buchimgae is. We let them know why the pancake can be an experimental format of a publication.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut cut7a">
|
||||||
|
<div class="ani"><img src="./img/chae_pic2.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
We explained that in Korea, the number of Buchimgae is counted as a page of a book. Like Buchimgae 1,2,3 jang (=page)...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="cut cut7b">
|
||||||
|
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Floor, one of the participants, were cutting a tomato! That was juicy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut8" id = "adjustgap1">
|
||||||
|
<div class="ani"><img src="./img/floorpongie.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Floor and Pongie were discussing composition of their pancake... What a passion!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut9" id = "adjustgap2">
|
||||||
|
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Another group created a concept of their pancake as a scenery of Tredozio. The orange sky and green fields...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut10" id = "adjustgap3">
|
||||||
|
<div class="ani" ><img src="./img/compositing_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Their pancake was elegant. It was just like a plate served from a high-end fine dining restaurant.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut11">
|
||||||
|
<div class="ani"><img src="./img/print_bibi-pancake_1204.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Haha, Lino and Illo's pancake had the face of Bilbi! Would Bilbi know this?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cut cut12">
|
||||||
|
<div class="ani"><img src="./img/print_lino-ilo_1024.jpg" /></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
Another pancake with their names written! It was quite a statement :)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "cut cut13">
|
||||||
|
<div class = "ani"><img src = "./img/pongie-explaining_1024.jpg"></div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
After every group finished cooking, we gathered into a dining room. Pongie addressed the meaning of the dinner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "cut cut14">
|
||||||
|
<div class = "ani">
|
||||||
|
<img src = "./img/tearing-sharing_1024.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<p>
|
||||||
|
3, 2, 1, Yayyyyy!!!! We tored a pancake together!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import {Handler, registerHandlers} from './paged.esm.js';
|
||||||
|
|
||||||
|
class myHandler extends Handler {
|
||||||
|
|
||||||
|
afterPageLayout(pageElement, page, breakToken){
|
||||||
|
// console.log(pageElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
registerHandlers(myHandler);
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,128 @@
|
|||||||
|
// Reload-in-place v1.3, specific for multiple view of same content (screen + print)
|
||||||
|
// Julie Blanc - 2022
|
||||||
|
// Based on : Reload-in-place v1.3 / Nicolas Taffin + Sameh Chafik - 2020
|
||||||
|
// MIT License https://opensource.org/licenses/MIT
|
||||||
|
// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload.
|
||||||
|
// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
|
||||||
|
|
||||||
|
import {Handler, registerHandlers} from './paged.esm.js';
|
||||||
|
|
||||||
|
|
||||||
|
// separate human / machine scroll
|
||||||
|
var machineScroll = false;
|
||||||
|
|
||||||
|
// check pagedJS ended compilation
|
||||||
|
var pagedjsEnd = false;
|
||||||
|
|
||||||
|
class pagedjsEnded extends Handler {
|
||||||
|
constructor(chunker, polisher, caller) {
|
||||||
|
super(chunker, polisher, caller);
|
||||||
|
}
|
||||||
|
afterRendered(pages) {
|
||||||
|
pagedjsEnd = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
registerHandlers(pagedjsEnded);
|
||||||
|
|
||||||
|
// set a "unique" filename based on title element, in case several books are opened
|
||||||
|
var fileTitle = document.getElementsByTagName("title")[0].text;
|
||||||
|
|
||||||
|
function getDocHeight() {
|
||||||
|
var D = document;
|
||||||
|
return Math.max(
|
||||||
|
D.body.scrollHeight, D.documentElement.scrollHeight,
|
||||||
|
D.body.offsetHeight, D.documentElement.offsetHeight,
|
||||||
|
D.body.clientHeight, D.documentElement.clientHeight
|
||||||
|
)
|
||||||
|
}
|
||||||
|
function saveAmountScrolled(){
|
||||||
|
var scrollArray = [];
|
||||||
|
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
|
||||||
|
if (!machineScroll) {
|
||||||
|
var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
|
||||||
|
scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
|
||||||
|
// console.log("Saved ", scrollArray);
|
||||||
|
localStorage[fileTitle] = JSON.stringify(scrollArray);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Specify you reload in place only when view = print
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
let view = localStorage.getItem('view')
|
||||||
|
if(view == "print"){
|
||||||
|
reloadInPlace();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// on Load, blur or opacify the page, and try to join ASAP
|
||||||
|
// last saved position, or at least last compiled page
|
||||||
|
|
||||||
|
|
||||||
|
function reloadInPlace(){
|
||||||
|
machineScroll= true;
|
||||||
|
var styleEl = document.createElement('style');
|
||||||
|
document.head.appendChild(styleEl);
|
||||||
|
var styleSheet = styleEl.sheet;
|
||||||
|
// uncomment one of the two options :
|
||||||
|
// nice but high calculation usage : blur until scrolled
|
||||||
|
styleSheet.insertRule('.pagedjs_pages { filter: blur(4px); }', 0);
|
||||||
|
// less power consumption: low opacity until scrolled
|
||||||
|
//styleSheet.insertRule('.pagedjs_pages { opacity: 0.3; }', 0);
|
||||||
|
var savedData = localStorage.getItem(fileTitle);
|
||||||
|
if (savedData) {
|
||||||
|
var scrollArray = JSON.parse(savedData);
|
||||||
|
var scrollTop = scrollArray[0].Y;
|
||||||
|
var scrollLeft = scrollArray[0].X;
|
||||||
|
} else {
|
||||||
|
var scrollTop = 0;
|
||||||
|
var scrollLeft = 0;
|
||||||
|
}
|
||||||
|
var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
|
||||||
|
window.currentInterval = setInterval(function(){
|
||||||
|
var docheight = getDocHeight();
|
||||||
|
|
||||||
|
if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {
|
||||||
|
window.scrollTo(scrollLeft,docheight);
|
||||||
|
} else {
|
||||||
|
window.scrollTo(scrollLeft,scrollTop);
|
||||||
|
clearInterval(window.currentInterval);
|
||||||
|
setTimeout(function(){
|
||||||
|
window.scrollTo(scrollLeft,scrollTop);
|
||||||
|
machineScroll = false;
|
||||||
|
styleSheet.deleteRule(0);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// slow down a bit save position pace
|
||||||
|
|
||||||
|
var slowSave = debounce(function() {
|
||||||
|
if(!machineScroll) {
|
||||||
|
saveAmountScrolled();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
function debounce(func, wait, immediate) {
|
||||||
|
var timeout;
|
||||||
|
return function() {
|
||||||
|
var context = this, args = arguments;
|
||||||
|
var later = function() {
|
||||||
|
timeout = null;
|
||||||
|
if (!immediate) func.apply(context, args);
|
||||||
|
};
|
||||||
|
var callNow = immediate && !timeout;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(later, wait);
|
||||||
|
if (callNow) func.apply(context, args);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Scroll triggers save, but not immediately on load
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
window.addEventListener('scroll', slowSave);
|
||||||
|
}, 1000);
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
// import { Previewer } from 'https://unpkg.com/pagedjs@0.1.38/dist/paged.esm.js';
|
||||||
|
import { Previewer, Handler } from '../js/paged.esm.js';
|
||||||
|
|
||||||
|
let iconScreen = '<svg width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-1354.1,0)"><g transform="matrix(1,0,0,1,1354.1,0)"><rect x="0" y="0" width="477.867" height="477.867" style="fill:none;"/></g><g transform="matrix(1,0,0,1.07337,0,-33.9207)"><path d="M1831.97,109.874C1831.97,92.35 1816.72,78.144 1797.91,78.144L1388.16,78.144C1369.35,78.144 1354.1,92.35 1354.1,109.874L1354.1,335.203C1354.1,352.727 1369.35,366.933 1388.16,366.933L1797.91,366.933C1816.72,366.933 1831.97,352.727 1831.97,335.203L1831.97,109.874ZM1798.97,109.874C1798.97,109.33 1798.5,108.889 1797.91,108.889L1388.16,108.889C1387.58,108.889 1387.1,109.33 1387.1,109.874L1387.1,335.203C1387.1,335.747 1387.58,336.189 1388.16,336.189L1797.91,336.189C1798.5,336.189 1798.97,335.747 1798.97,335.203L1798.97,109.874Z"/></g><g transform="matrix(1,0,0,1,8.36,-15)"><path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/></g><g transform="matrix(2.2952e-17,0.374835,-1,6.12323e-17,1985.13,-209.918)"><path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/></g><g transform="matrix(2.2952e-17,0.374835,-1,6.12323e-17,2076.04,-209.918)"><path d="M1473.79,454.14L1695.55,454.14C1704.66,454.14 1712.05,446.747 1712.05,437.64C1712.05,428.533 1704.66,421.14 1695.55,421.14L1473.79,421.14C1464.68,421.14 1457.29,428.533 1457.29,437.64C1457.29,446.747 1464.68,454.14 1473.79,454.14Z"/></g><g transform="matrix(1,0,0,1,0,-7)"><path d="M1375.99,306.195L1812.22,306.195C1821.33,306.195 1828.72,298.802 1828.72,289.695C1828.72,280.588 1821.33,273.195 1812.22,273.195L1375.99,273.195C1366.88,273.195 1359.49,280.588 1359.49,289.695C1359.49,298.802 1366.88,306.195 1375.99,306.195Z"/></g></g></svg>';
|
||||||
|
let iconBook = '<svg class="icon-book" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-746.27,0)"><g transform="matrix(1,0,0,1,746.27,0)"><rect x="0" y="0" width="477.867" height="477.867" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0" width="477.867" height="477.867"/></clipPath><g clip-path="url(#_clip1)"><g transform="matrix(1.07692,0,0,0.885123,1.88354e-05,39.9185)"><path d="M436.139,54.036C371.791,11.007 288.455,8.744 221.867,48.216C155.278,8.744 71.942,11.007 7.595,54.036C2.849,57.202 -0.001,62.531 0,68.236L0,406.446C-0.009,412.748 3.456,418.541 9.011,421.516C14.563,424.487 21.301,424.159 26.538,420.663C82.776,383.032 156.156,383.032 212.394,420.663C212.616,420.817 212.872,420.851 213.094,420.987C213.316,421.124 213.555,421.362 213.811,421.516C214.407,421.771 215.017,421.993 215.637,422.182C216.257,422.464 216.896,422.703 217.548,422.899C218.491,423.117 219.45,423.26 220.415,423.326C220.91,423.326 221.371,423.531 221.866,423.531L222.293,423.531C222.866,423.489 223.435,423.415 224,423.309C224.864,423.222 225.72,423.068 226.56,422.848C227.141,422.658 227.711,422.436 228.267,422.182C228.796,421.96 229.359,421.841 229.871,421.568C230.11,421.431 230.298,421.227 230.537,421.073C230.776,420.919 231.049,420.868 231.288,420.715C287.526,383.084 360.906,383.084 417.144,420.715C424.966,425.975 435.57,423.898 440.83,416.076C442.743,413.231 443.755,409.876 443.734,406.447L443.734,68.236C443.734,62.531 440.884,57.202 436.139,54.036ZM204.8,377.279C150.735,351.93 88.198,351.93 34.133,377.279L34.133,77.656C86.731,46.406 152.202,46.406 204.8,77.656L204.8,377.279ZM409.6,377.279C355.535,351.93 292.998,351.93 238.933,377.279L238.933,77.656C291.53,46.406 357.002,46.406 409.6,77.656L409.6,377.279Z" style="fill-rule:nonzero;"/></g></g></g></g></svg>';
|
||||||
|
let iconPrinter = '<svg class="icon-printer" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M460.8,119.467L375.467,119.467L375.467,17.067C375.467,7.641 367.826,0 358.4,0L119.467,0C110.041,0 102.4,7.641 102.4,17.067L102.4,119.467L17.067,119.467C7.641,119.467 0,127.108 0,136.533L0,358.4C0,367.826 7.641,375.467 17.067,375.467L102.4,375.467L102.4,460.8C102.4,470.226 110.041,477.867 119.467,477.867L358.4,477.867C367.826,477.867 375.467,470.226 375.467,460.8L375.467,375.467L460.8,375.467C470.226,375.467 477.867,367.826 477.867,358.4L477.867,136.533C477.867,127.108 470.226,119.467 460.8,119.467ZM136.533,34.133L341.333,34.133L341.333,119.466L136.533,119.466L136.533,34.133ZM341.333,443.733L136.533,443.733L136.533,290.133L341.333,290.133L341.333,443.733ZM443.733,341.333L375.466,341.333L375.466,290.133L392.533,290.133C401.959,290.133 409.6,282.492 409.6,273.066C409.6,263.64 401.959,256 392.533,256L85.333,256C75.907,256 68.266,263.641 68.266,273.067C68.266,282.493 75.907,290.134 85.333,290.134L102.4,290.134L102.4,341.334L34.133,341.334L34.133,153.6L443.733,153.6L443.733,341.333Z" style="fill-rule:nonzero;"/><path d="M409.6,187.733L392.533,187.733C383.107,187.733 375.466,195.374 375.466,204.8C375.466,214.226 383.107,221.867 392.533,221.867L409.6,221.867C419.026,221.867 426.667,214.226 426.667,204.8C426.667,195.374 419.026,187.733 409.6,187.733Z" style="fill-rule:nonzero;"/><path d="M290.133,324.267L187.733,324.267C178.307,324.267 170.666,331.908 170.666,341.334C170.666,350.76 178.307,358.401 187.733,358.401L290.133,358.401C299.559,358.401 307.2,350.76 307.2,341.334C307.2,331.908 299.559,324.267 290.133,324.267Z" style="fill-rule:nonzero;"/><path d="M290.133,375.467L187.733,375.467C178.307,375.467 170.666,383.108 170.666,392.534C170.666,401.96 178.307,409.601 187.733,409.601L290.133,409.601C299.559,409.601 307.2,401.96 307.2,392.534C307.2,383.108 299.559,375.467 290.133,375.467Z" style="fill-rule:nonzero;"/></svg>'
|
||||||
|
|
||||||
|
|
||||||
|
async function load_home(){
|
||||||
|
let allContent = document.querySelectorAll(".added-content");
|
||||||
|
|
||||||
|
for (let content of allContent) {
|
||||||
|
let name = content.id;
|
||||||
|
let path = 'src/' + name + '/content.html'
|
||||||
|
content.innerHTML = await (await fetch(path)).text();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('load', async() => {
|
||||||
|
|
||||||
|
await load_home();
|
||||||
|
|
||||||
|
// 1. Get content
|
||||||
|
let content = document.body.innerHTML;
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
|
||||||
|
// 2. Move content into #content + build header
|
||||||
|
document.body.innerHTML = '\
|
||||||
|
<header id="header-pagedjs">\
|
||||||
|
<div id="header-container">\
|
||||||
|
<input type="radio" id="input-screen" name="toggle-input" value="screen" hidden checked/>\
|
||||||
|
<input type="radio" id="input-print" name="toggle-input" value="print" hidden/>\
|
||||||
|
<button id="button-screen" data-text="Version numérique">' + iconScreen + '</button>\
|
||||||
|
<button id="button-print-preview" data-text="Aperçu impression">' + iconBook + '</button>\
|
||||||
|
<button id="button-print" data-text="Imprimer">' + iconPrinter + '</button>\
|
||||||
|
</div>\
|
||||||
|
</header>\
|
||||||
|
<div id="renderbook"></div>\
|
||||||
|
<div id="content">\
|
||||||
|
' + content + '</div>';
|
||||||
|
|
||||||
|
|
||||||
|
// 3. Add onclick event
|
||||||
|
document.querySelector('#button-print-preview').addEventListener('click', printPreview);
|
||||||
|
document.querySelector('#button-screen').addEventListener('click', screenReload);
|
||||||
|
document.querySelector('#button-print').addEventListener('click', printPdf);
|
||||||
|
|
||||||
|
// 4. Display the correct view
|
||||||
|
let view = localStorage.getItem('view');
|
||||||
|
if(view == "print"){
|
||||||
|
printPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* PREVIEW ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
function printPreview() {
|
||||||
|
|
||||||
|
localStorage.setItem('view', 'print');
|
||||||
|
|
||||||
|
let inputPrint = document.getElementById("input-print");
|
||||||
|
document.getElementById("button-print").disabled = true;
|
||||||
|
|
||||||
|
if(inputPrint.checked){
|
||||||
|
document.getElementById("button-print").disabled = false;
|
||||||
|
}else{
|
||||||
|
document.getElementById("style-screen").remove();
|
||||||
|
let bookcontent = document.querySelector("#content");
|
||||||
|
let content = bookcontent.innerHTML;
|
||||||
|
bookcontent.innerHTML = "";
|
||||||
|
|
||||||
|
// 1. Create Previewer
|
||||||
|
let previewer = new Previewer();
|
||||||
|
|
||||||
|
// 2. Register Handlers
|
||||||
|
previewer.registerHandlers(
|
||||||
|
class PreviewHandler extends Handler {
|
||||||
|
afterPreview() {
|
||||||
|
document.getElementById("button-print").disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 3. Render
|
||||||
|
previewer.preview(
|
||||||
|
content,
|
||||||
|
["css/print.css"],
|
||||||
|
document.querySelector("#renderbook")
|
||||||
|
);
|
||||||
|
|
||||||
|
inputPrint.checked = "true";
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* SCREEN ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
function screenReload() {
|
||||||
|
localStorage.setItem('view', 'screen');
|
||||||
|
window.location.reload(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* PRINT ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
function printPdf() {
|
||||||
|
let inputPrint = document.getElementById("input-print");
|
||||||
|
if(inputPrint.checked){
|
||||||
|
window.print();
|
||||||
|
}else{
|
||||||
|
document.getElementById("style-screen").remove();
|
||||||
|
let bookcontent = document.querySelector("#content");
|
||||||
|
let content = bookcontent.innerHTML;
|
||||||
|
bookcontent.innerHTML = "";
|
||||||
|
|
||||||
|
// 1. Create Previewer
|
||||||
|
let previewer = new Previewer();
|
||||||
|
|
||||||
|
// 2. Register Handlers
|
||||||
|
previewer.registerHandlers(
|
||||||
|
class PrintHandler extends Handler {
|
||||||
|
afterPreview () {
|
||||||
|
window.print();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 3. Render
|
||||||
|
previewer.preview(
|
||||||
|
content,
|
||||||
|
["css/print.css"],
|
||||||
|
document.querySelector("#renderbook")
|
||||||
|
);
|
||||||
|
document.getElementById("input-print").checked = "true";
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue