adding the poster version

call.css

@@ -1,138 +1,45 @@
-html{
-	background:
-	/*
-	The following is a pattern you will see a ⸰ lot ⸰—in this page and likely in future pages as well.
-	Because we are working with a ⸰ very ⸰ limited palette (8 greys and 8 colours), we can use “hatching” to simulate “in‐between” colours.
-	You will see this same technique invoked by very old webpages which tried to limit themselves to the “web safe” colour set—they used bitmap images, and, very rarely, you will see modern ones trying to pull of the same effect with SVGs.
-	We use linear gradients, because theyʼre compact, easy to read, and get the job done.
-
-	When the angle of our gradient lines up with the pixel grid (a multiple of 90°), we can use “hard” stops and exact pixel values.
-	The rest of the time, we need to apply a little bit of gradient between stops as a form of anti‐aliasing.
-	*/
-	repeating-linear-gradient(
-		45deg,
-		transparent 0,
-/*		transparent 1.2px,*/
-/*		purple 1.42px,*/
-		#7a57f7 2.62px,
-		transparent 2.84px
-	),
-	repeating-linear-gradient(
-		-45deg,
-		transparent 0,
-/*		transparent 1.2px,*/
-/*		purple 1.42px,*/
-		#7a57f7 2.62px,
-		transparent 2.84px
-	),
-	#c6c6c6;
-}
 body{
-	width: 100%;
+	background-color: #ffc0fb;
-	text-align: center;
+	background: url("sticker-background.svg");
-	margin: 0;
 }
 div#wrapper{
-	position: relative;
+	display: block;
-	display: inline-block;
-	width: 650px;
-	background-color: white;
-	text-align: left;
-	line-height: 1.4;
-	color: #4B2DF7;
 	margin: 3em auto;
-	border: ;
+	padding: 2em;
-	padding: 1.5em;
+	background-color: black;
-	border-top: 5px outset magenta;
+	color: white;
-	border-left: 5px outset magenta;
+	width: 750px;
-	border-right: 5px outset green;
+	font-family: "custom";
-	border-bottom: 5px outset green;
-}
-pre, 
-div#head,
-div#call,
-div#footer{
-	margin:1em;
-}
-pre{
-	font-size: 14px;
-	font-weight: bold;
-	color: green;
-}
-div#call span.phrase span.media{
-	font-style: italic;
-}
-div#call span.phrase:after{
-	content: "&&";
-	display: inline-block;
-	vertical-align: bottom;
-	width: 50px;
-	height: 1em;
-	background: repeating-linear-gradient(-45deg, #faf8f7 0, #faf8f7 .6px, #f56e97 .71px, #f56e97 1.34px, #faf8f7 1.41px ), #f56e97;
-	border: 1px solid red;
-	border-radius: 2px;
-	color: red;
-	padding: 0 0 0.25em 0;
-	text-align: center;
-	font-family: monospace;
-	font-size: 16px;
-}
-div#call span.phrase:last-of-type:after{
-	content: "";
-	display: unset;
-	border: unset;
-	width: unset;
-	height: unset;
-	background: unset;
-	padding: unset;
-}
-div#footer p.link{
-	margin-top: 2em;
-	margin-bottom: 3em;
 }
-div#stickers{
+div#call span.phrase:last-of-type span.comma{
 	display: none;
 }
-div#stickers > img{
+strong{
-	position: absolute;
+	color: magenta;
-}
-div#stickers > img:nth-child(1){
-	top: 380px;
-	transform: rotate(6deg);
-	left: 680px;
-}
-div#stickers > img:nth-child(2){
-	top: 210px;
-	transform: rotate(-3deg);
-	left: -162px;
-}
-div#stickers > img:nth-child(3){
-	top: 620px;
-	transform: rotate(6deg);
-	left: 680px;
-}
-div#stickers > img:nth-child(4){
-	top: 20px;
-	transform: rotate(6deg);
-	left: -170px;
-}
-div#stickers > img:nth-child(5){
-	top: 640px;
-	transform: rotate(-18deg);
-	left: 210px;
 }
 hr{
-	border: 0;
+	border: unset;
-	border-top: double green;
+	border-bottom: double white;
 }
-strong {
+a{
-	color: green;
+	color: white;
-	border-top: double green;
-	border-bottom: double green;
-	padding: 0 0.2em;
 }
-a, 
+
-span.highlight{
+@font-face{
-	color: inherit;
+	font-family: "custom";
-	text-decoration: none;
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Regular.ttf");
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face{
+	font-family: "custom";
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Italic.ttf");
+	font-weight: normal;
+	font-style: italic;
+}
+@font-face{
+	font-family: "custom";
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Bold.ttf");
+	font-weight: bold;
+	font-style: normal;
 }

call.html

@@ -4,30 +4,40 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <title>XPUB call</title>
+
+  <!-- 
+    To switch between the WEB and POSTER version,
+    you can enable/disable the stylesheets below
+    and the paged.polyfill.js script at the bottom.
+  -->
+
+  <!-- --------------------------------------------- -->
+  <!-- WEB VERSION -->
   <link rel="stylesheet" href="call.css" />
+  <!-- --------------------------------------------- -->
+  
+  <!-- --------------------------------------------- -->
+  <!-- POSTER VERSION -->
+  <!-- <link rel="stylesheet" href="paged.interface.css" /> -->
+  <!-- <link rel="stylesheet" href="poster.css" /> -->
+  <!-- --------------------------------------------- -->
+
 </head>
 <body>
 <div id="wrapper">
   <hr>
-  <pre>
- ____ ____ ____ ____  
-||X |||P |||U |||B ||
-||__|||__|||__|||__||
-|/__\|/__\|/__\|/__\|
-  </pre>
 
   <div id="head">
-  <strong>Master Experimental Publishing</strong><br>
+  <h1>Master Experimental Publishing (XPUB)</h1>
-  <!-- at the Piet Zwart Institute (Rotterdam, the Netherlands) -->
   </div>
 
   <div id="call">
-    <span class="intro">Calling all</span>
+    <span class="intro"><strong>Calling all </strong></span>
     <span class="phrase">
       <span class="actor"></span>
       <span class="action"></span>
       <span class="prefix"></span><span class="sort"></span>
-      <span class="media"></span>
+      <span class="media" style="font-style: italic;"></span><span class="comma">, </span>
     </span>
   </div>
 
@@ -41,15 +51,14 @@
   </p>
   </div>
 
-  <div id="stickers">
-    <img src="stickers/XPUB-stickerset-1.svg">
-    <img src="stickers/XPUB-stickerset-2.svg">
-    <img src="stickers/XPUB-stickerset-3.svg">
-    <img src="stickers/XPUB-stickerset-4.svg">
-    <img src="stickers/XPUB-stickerset-5.svg">
-  </div>
   <hr>
-</div>
   <script src="call.js"></script>
+</div>
+
+<!-- --------------------------------------------- -->
+<!-- POSTER VERSION -->
+<!-- <script src="paged.polyfill.js"></script> -->
+<!-- --------------------------------------------- -->
+
 </body>
 </html>

paged.interface.css

@@ -0,0 +1,180 @@
+/* CSS for Paged.js interface – v0.4 */
+
+/* Change the look */
+:root {
+    --color-background: whitesmoke;
+    --color-pageSheet: #cfcfcf;
+    --color-pageBox: violet;
+    --color-paper: white;
+    --color-marginBox: transparent;
+    --pagedjs-crop-color: black;
+    --pagedjs-crop-shadow: white;
+    --pagedjs-crop-stroke: 1px;
+}
+
+/* To define how the book look on the screen: */
+@media screen, pagedjs-ignore {
+    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-pageSheet);
+        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;
+    }
+
+    .pagedjs_pagebox{
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+    }
+
+    .pagedjs_left_page{
+        z-index: 20;
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
+        border-color: transparent;
+    }
+    
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: 0;
+    } 
+
+    .pagedjs_right_page{
+        z-index: 10;
+        position: relative;
+        left: calc(var(--pagedjs-bleed-left)*-1);
+    }
+
+    /* 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);
+    }
+
+    /* uncomment this part for recto/verso book : ------------------------------------ */
+
+    /*
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } 
+
+    .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    } 
+
+    .pagedjs_right_page{
+        left: 0; 
+    } 
+    */
+    
+    
+
+    /*--------------------------------------------------------------------------------------*/
+
+
+
+    /* uncomment this par to see the baseline : -------------------------------------------*/
+
+    
+    /* .pagedjs_pagebox {
+        --pagedjs-baseline: 22px;
+        --pagedjs-baseline-position: 5px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient(transparent 0%, transparent 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);
+    }  */
+   
+
+    /*--------------------------------------------------------------------------------------*/
+}
+
+
+
+
+
+/* Marks (to delete when merge in paged.js) */
+
+.pagedjs_marks-crop{
+    z-index: 999999999999;
+  
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop, 
+.pagedjs_bleed-bottom .pagedjs_marks-crop{
+    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
+    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-left .pagedjs_marks-crop,
+.pagedjs_bleed-right .pagedjs_marks-crop{
+    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
+    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
+}

poster.css

@@ -0,0 +1,68 @@
+:root{
+	font-size: 22px;	
+	font-family: "custom";
+}
+@page{
+	size: A4 portrait;
+	margin: 2em;
+	background-image: url("sticker-background.svg");
+}
+/* -------------------------------------- single page */
+.pagedjs_pages {
+    display: block;
+    width: var(--pagedjs-width);
+}
+.pagedjs_page{
+    display: block;
+    margin: 0 auto !important;
+    clear: both !important;
+    float: left !important;
+}
+/* -------------------------------------- */
+body{
+	position: relative;
+	display: block;
+	top: 0;
+	margin: 0;
+}
+div#wrapper{
+	background-color: black;
+	color: white;
+	height: 100%;
+	padding: 1em 2em;
+}
+div#call span.phrase:last-of-type span.comma{
+	display: none;
+}
+div#footer p.link{
+	margin: 1.5em 0 2em 0;
+}
+strong{
+	color: magenta;
+}
+hr{
+	border: unset;
+	border-bottom: double white;
+}
+a{
+	color: white;
+}
+
+@font-face{
+	font-family: "custom";
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Regular.ttf");
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face{
+	font-family: "custom";
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Italic.ttf");
+	font-weight: normal;
+	font-style: italic;
+}
+@font-face{
+	font-family: "custom";
+	src: url("https://vvvvvvaria.org/~mb/fonts/LibreBaskerville-Bold.ttf");
+	font-weight: bold;
+	font-style: normal;
+}