diff --git a/css/pagedjs/icons/publishing-book.svg b/css/pagedjs/icons/publishing-book.svg
new file mode 100755
index 0000000..0ec3f74
--- /dev/null
+++ b/css/pagedjs/icons/publishing-book.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/pagedjs/icons/publishing-printer.svg b/css/pagedjs/icons/publishing-printer.svg
new file mode 100755
index 0000000..8ab2d79
--- /dev/null
+++ b/css/pagedjs/icons/publishing-printer.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/css/pagedjs/icons/publishing-screen.svg b/css/pagedjs/icons/publishing-screen.svg
new file mode 100755
index 0000000..51aefea
--- /dev/null
+++ b/css/pagedjs/icons/publishing-screen.svg
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/pagedjs/interface/baseline.css b/css/pagedjs/interface/baseline.css
new file mode 100755
index 0000000..9b28b20
--- /dev/null
+++ b/css/pagedjs/interface/baseline.css
@@ -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);
+ }
+
+
+}
\ No newline at end of file
diff --git a/css/pagedjs/interface/header.css b/css/pagedjs/interface/header.css
new file mode 100755
index 0000000..6f9278a
--- /dev/null
+++ b/css/pagedjs/interface/header.css
@@ -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; }
+}
+
diff --git a/css/pagedjs/interface/interface.css b/css/pagedjs/interface/interface.css
new file mode 100755
index 0000000..42dade4
--- /dev/null
+++ b/css/pagedjs/interface/interface.css
@@ -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);
+ }
+
+}
+
+
+
diff --git a/css/pagedjs/interface/recto-verso.css b/css/pagedjs/interface/recto-verso.css
new file mode 100755
index 0000000..bc628ab
--- /dev/null
+++ b/css/pagedjs/interface/recto-verso.css
@@ -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;
+ }
+
+}
\ No newline at end of file
diff --git a/css/pagedjs/pagedjs.css b/css/pagedjs/pagedjs.css
new file mode 100755
index 0000000..d4e6fde
--- /dev/null
+++ b/css/pagedjs/pagedjs.css
@@ -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";
+
+
+
+
diff --git a/css/pagedjs/reset.css b/css/pagedjs/reset.css
new file mode 100755
index 0000000..73e998f
--- /dev/null
+++ b/css/pagedjs/reset.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;
+}
+
+
diff --git a/css/print.css b/css/print.css
new file mode 100755
index 0000000..7f294aa
--- /dev/null
+++ b/css/print.css
@@ -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 --------------------------------------- */
+}
diff --git a/css/style-screen.css b/css/style-screen.css
new file mode 100755
index 0000000..7a6eb50
--- /dev/null
+++ b/css/style-screen.css
@@ -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;
+}
diff --git a/img/.DS_Store b/img/.DS_Store
index bf7396f..19417b2 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/chae_pic2.jpg b/img/chae_pic2.jpg
new file mode 100644
index 0000000..6623112
Binary files /dev/null and b/img/chae_pic2.jpg differ
diff --git a/img/compositing_1024.jpg b/img/compositing_1024.jpg
new file mode 100644
index 0000000..02f5bd6
Binary files /dev/null and b/img/compositing_1024.jpg differ
diff --git a/img/floorpongie.jpg b/img/floorpongie.jpg
new file mode 100644
index 0000000..149d1d0
Binary files /dev/null and b/img/floorpongie.jpg differ
diff --git a/img/onlylabel_1024.jpg b/img/onlylabel_1024.jpg
new file mode 100644
index 0000000..387907d
Binary files /dev/null and b/img/onlylabel_1024.jpg differ
diff --git a/img/print_bibi-pancake_1204.jpg b/img/print_bibi-pancake_1204.jpg
new file mode 100644
index 0000000..3686a6f
Binary files /dev/null and b/img/print_bibi-pancake_1204.jpg differ
diff --git a/img/print_lino-ilo_1024.jpg b/img/print_lino-ilo_1024.jpg
new file mode 100644
index 0000000..2b3bb49
Binary files /dev/null and b/img/print_lino-ilo_1024.jpg differ
diff --git a/img/print_lino-ilo_768.jpg b/img/print_lino-ilo_768.jpg
new file mode 100644
index 0000000..5d6cf35
Binary files /dev/null and b/img/print_lino-ilo_768.jpg differ
diff --git a/img/tada.jpg b/img/tada.jpg
new file mode 100644
index 0000000..bb8e637
Binary files /dev/null and b/img/tada.jpg differ
diff --git a/img/tearing-sharing_1024.jpg b/img/tearing-sharing_1024.jpg
index ba390f7..9a13beb 100644
Binary files a/img/tearing-sharing_1024.jpg and b/img/tearing-sharing_1024.jpg differ
diff --git a/img/tearing-sharing_768.jpg b/img/tearing-sharing_768.jpg
deleted file mode 100644
index ed0b514..0000000
Binary files a/img/tearing-sharing_768.jpg and /dev/null differ
diff --git a/img/thickbook.jpg b/img/thickbook.jpg
new file mode 100644
index 0000000..27d3215
Binary files /dev/null and b/img/thickbook.jpg differ
diff --git a/indexprint.html b/indexprint.html
new file mode 100644
index 0000000..523b3c3
--- /dev/null
+++ b/indexprint.html
@@ -0,0 +1,347 @@
+
+
+
+
+
+
+ chatty, messy, sticky, tsss...In Habitat
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
chatty, messy, sticky, tsss ...
+
A diary from Habitat (Tredozio, IT), August 2022
+
By Chaeyoung Kim and Nami Kim
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ "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."
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "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..."
+
+
+
+
+
+
+
+
+
+
+
Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...
+ Our journey from the Netherlands to Italy was made through winding roads. When we landed to Habitat ,
+ the sky was colored into orange.
+
+
+
+
+
+
+
+ Our friend Jacopo (a.k.a Pongie) and a kitten Bilbi, a mascot of Habitat, welcomed us with open arms.
+
+
+
+
+
+
+
Ah yea, a group of wasps as well!
+
+
+
+
+
+
+
Our first workshop chatty, messy, sticky, tsss... 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;
+
+
+
+
+
+
+
+
1) a format of a book through relay binding
+ 2) a format of a dish: Buchimgae, Korean pancake.
+
+
+
+
+
+
The collective book binding (step-by-step):
+
+ a-1) introduce what we're going to do; part one relay book binding (10-15m):
+
+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.
+
+
+a-2) Play around with tools: (15m)
+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.
+
+a-3) Select a tool for each person and explain why they chose it. (10m)
+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.
+a-4) A brief discussion for the arrangement of seat positions (10-20m)
+: Let them think about orders/mechanisms they want to have
+a-5)The relay binding moment! (45m) While waiting for one's turn, there will be continuous daily conversation.
+a-6) Wrap up (10m):
+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
+
+
+
+
+
+
+
+ It's the D-day! The 28th Aug 2022, 5PM Participants were very respectfully listening to our introduction.
+
+
+
+
+
+
+
+
+
+
+
+
+
Tssssss...... Taping sounds!
+ People were busy with making their own page!
+
+
+
+
+
+
+
+
+ Yea...We remeber... The rustle of papers being cut, torn out, sticked....
+
+
+
+
+
+
+
+
+
+
+ When it seemed that people almost finishsed making their pages, we wanted to start the relay binding.
+
+
+
+
+
+
+
+
+
+
+ Starting from a page, it was becoming a book. Getting thicker and thicker...
+
+
+
+
+
+
+
+
Tada!!! Completed!
+ We asked for the participants to label how they want to name/call it.
+
+
+
+
+
+
+
+
Tada!!! Completed!
+ We asked for the participants to label how they want to name/call it.
+
+
+
+
+
+
Cooking Buchimgae together (step-by-step):
+
+ 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)
+ b-2) Introduce what we're going to do; what is Buchimgae, In Korea, we count the number of Buchimgae as if we count paper. We call it like Buchimgae 1 jang (=page), 2 jang...
+
+ b-3) Split into a few groups. Each group makes their own Buchimgae, mixing various ingredients.
+ b-4) When mixing the ingredients, use batter that the hosts prepared. They will be mingled together.
+ 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.
+ b-5) Just enjoying it!
+
+
+
+
+
Buchimage is Korean pancake., mixing (= gluing = binding) various ingredients.
+
+
+
+
+
+
+
+ Before the cooking session, we introduced what Buchimgae is. We let them know why the pancake can be an experimental format of a publication.
+
+
+
+
+
+
+
+
+ We explained that in Korea, the number of Buchimgae is counted as a page of a book. Like Buchimgae 1,2,3 jang (=page)...
+
+
+
+
+
+
+
+
+
+ Floor, one of the participants, were cutting a tomato! That was juicy.
+
+
+
+
+
+
+
+
+ Floor and Pongie were discussing composition of their pancake... What a passion!
+
+
+
+
+
+
+
+
+ Another group created a concept of their pancake as a scenery of Tredozio. The orange sky and green fields...
+
+
+
+
+
+
+
+
+ Their pancake was elegant. It was just like a plate served from a high-end fine dining restaurant.
+
+
+
+
+
+
+
+
+ Haha, Lino and Illo's pancake had the face of Bilbi! Would Bilbi know this?
+
+
+
+
+
+
+
+
+ Another pancake with their names written! It was quite a statement :)
+
+
+
+
+
+
+
+
+
+ After every group finished cooking, we gathered into a dining room. Pongie addressed the meaning of the dinner.
+
+
+
+
+
+
+
+
+
+
+ 3, 2, 1, Yayyyyy!!!! We tored a pancake together!
+
+
+
+
+
+
+