ugrnm
/
xpub-call
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding the poster version

Browse Source
master
mb 2 years ago
parent 4e7557ae0e
commit aec43e2d1e
5 changed files with 33348 additions and 144 deletions
Show Stats Download Patch File Download Diff File

159
call.css
Unescape Escape View File

@ -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%;
text-align: center;
margin: 0;
background-color: #ffc0fb;
background: url("sticker-background.svg");
}
div#wrapper{
position: relative;
display: inline-block;
width: 650px;
background-color: white;
text-align: left;
line-height: 1.4;
color: #4B2DF7;
display: block;
margin: 3em auto;
border: ;
padding: 1.5em;
border-top: 5px outset magenta;
border-left: 5px outset magenta;
border-right: 5px outset green;
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;
padding: 2em;
background-color: black;
color: white;
width: 750px;
font-family: "custom";
}
div#stickers{
div#call span.phrase:last-of-type span.comma{
display: none;
}
div#stickers > img{
position: absolute;
}
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;
strong{
color: magenta;
}
hr{
border: 0;
border-top: double green;
border: unset;
border-bottom: double white;
}
strong {
color: green;
border-top: double green;
border-bottom: double green;
padding: 0 0.2em;
a{
color: white;
}
a,
span.highlight{
color: inherit;
text-decoration: none;
@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;
}

45
call.html
Unescape Escape View File

@ -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>
<!-- at the Piet Zwart Institute (Rotterdam, the Netherlands) -->
<h1>Master Experimental Publishing (XPUB)</h1>
</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>

180
paged.interface.css
Unescape Escape View File

@ -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);
}

33040
paged.polyfill.js
View File

File diff suppressed because it is too large Load Diff

68
poster.css
Unescape Escape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save