You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
321 lines
10 KiB
HTML
321 lines
10 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="generator" content="pandoc" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||
|
|
<title>XPUB</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg-color: black; /* #545454 */
|
||
|
|
--fg-color: hsl(212, 100%, 50%); /* #3584e4 */
|
||
|
|
}
|
||
|
|
|
||
|
|
@page {
|
||
|
|
size: a4 landscape;
|
||
|
|
margin: 0;
|
||
|
|
background-color: var(--bg-color);
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-size: 18px;
|
||
|
|
background: bar(--bg-color);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .actors span { color: hsl(0, 80%, 0%); }
|
||
|
|
.objects span { color: hsl(90, 80%, 0%); }
|
||
|
|
.actions span { color: hsl(180, 80%, 0%); }
|
||
|
|
.materials span { color: hsl(270, 80%, 0%); }
|
||
|
|
*/
|
||
|
|
.page {
|
||
|
|
text-align: center;
|
||
|
|
break-after: page;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
.page.front {
|
||
|
|
background: var(--bg-color);
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
background: var(--fg-color);
|
||
|
|
color: white;
|
||
|
|
/* white-space: nowrap;*/
|
||
|
|
}
|
||
|
|
#card .center {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
background: white;
|
||
|
|
color: var(--fg-color) !important;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
/* A4 210 x 297 mm */
|
||
|
|
@media print {
|
||
|
|
.page {
|
||
|
|
width: 297mm;
|
||
|
|
height: 210mm;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
padding: 2em;
|
||
|
|
}
|
||
|
|
.front td > span > span {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page.reverse {
|
||
|
|
text-align: left;
|
||
|
|
padding-left: 1em;
|
||
|
|
padding-right: 1em;
|
||
|
|
padding-top: 1em;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.page.reverse p {
|
||
|
|
font-size: 8px;
|
||
|
|
}
|
||
|
|
.page.reverse td {
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 0.25em;
|
||
|
|
}
|
||
|
|
img.stamp {
|
||
|
|
max-width: 50%;
|
||
|
|
}
|
||
|
|
.page.reverse hr {
|
||
|
|
margin-top: 1.25em;
|
||
|
|
margin-bottom: 1.25em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="page front">
|
||
|
|
<table border="0">
|
||
|
|
<tr>
|
||
|
|
<td valign="center">
|
||
|
|
|
||
|
|
<span class="actors">
|
||
|
|
<span>silly</span>
|
||
|
|
<span>serious</span>
|
||
|
|
<span>naïve</span>
|
||
|
|
<span>smart</span>
|
||
|
|
<span>focused</span>
|
||
|
|
<span>dreamy</span>
|
||
|
|
<span>hungry</span>
|
||
|
|
<span>sad</span>
|
||
|
|
<span class="active">embarassed</span>
|
||
|
|
<span>fantastic</span>
|
||
|
|
<span>stressed</span>
|
||
|
|
<span>caring</span>
|
||
|
|
<span>moody</span>
|
||
|
|
<span>angry</span>
|
||
|
|
<span>frustrated</span>
|
||
|
|
<span>big</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span>
|
||
|
|
<span class="active">little gardners are</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="actions">
|
||
|
|
<span>pruning</span>
|
||
|
|
<span>swatching</span>
|
||
|
|
<span>grafting</span>
|
||
|
|
<span>composting</span>
|
||
|
|
<span>gleaning</span>
|
||
|
|
<span class="active">fermenting</span>
|
||
|
|
<span>tilling</span>
|
||
|
|
<span>fertilizing</span>
|
||
|
|
<span>crop rotating</span>
|
||
|
|
<span>fallowing</span>
|
||
|
|
<span>weeding</span>
|
||
|
|
<span>companion planting</span>
|
||
|
|
<span>broadcasting</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="objects">
|
||
|
|
<span>booklets</span>
|
||
|
|
<span>index cards</span>
|
||
|
|
<span>etherpads</span>
|
||
|
|
<span class="active">books</span>
|
||
|
|
<span>e-books</span>
|
||
|
|
<span>html scripts</span>
|
||
|
|
<span>texts</span>
|
||
|
|
<span>python scripts</span>
|
||
|
|
<span>poems</span>
|
||
|
|
<span>stories</span>
|
||
|
|
<span>pdfs</span>
|
||
|
|
<span>carrier bag libraries</span>
|
||
|
|
<span>bootleg libraries</span>
|
||
|
|
<span>hero libraries</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span>
|
||
|
|
<span class="active">made out of</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="materials">
|
||
|
|
<span>chocolate</span>
|
||
|
|
<span>marzipan</span>
|
||
|
|
<span>peanut butter</span>
|
||
|
|
<span>mozzarella</span>
|
||
|
|
<span>jam</span>
|
||
|
|
<span>butter</span>
|
||
|
|
<span class="active">gingerbread</span>
|
||
|
|
<span>tomato sauce</span>
|
||
|
|
<span>candy</span>
|
||
|
|
<span>custard</span>
|
||
|
|
<span>cookie dough</span>
|
||
|
|
<span>honey</span>
|
||
|
|
<span>parmesan cheese</span>
|
||
|
|
<span>camembert</span>
|
||
|
|
<span>sour grapes</span>
|
||
|
|
<span>maple syrup</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page reverse">
|
||
|
|
<table border="0">
|
||
|
|
<tr>
|
||
|
|
<td valign="top" height="50%">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td width="25%">
|
||
|
|
<p>XPUB is a two-year Master course that prepares students to critically engage with societal issues within the fast chaging field of art, design and cultural production.
|
||
|
|
</p>
|
||
|
|
<p>https://xpub.nl</p>
|
||
|
|
</td>
|
||
|
|
<td width="25%">
|
||
|
|
<p>XPUB'S interests in publishing are twofold:</p>
|
||
|
|
<p>First, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;
|
||
|
|
</p>
|
||
|
|
</td>
|
||
|
|
<td width="25%" style="border-left: 0.5px solid black">
|
||
|
|
<p>and second, publishing as the desire to expand the means of discourse circulation beyond print media and its direct digital translation, so as to create publics in the age of post-digital networks.</p>
|
||
|
|
</td>
|
||
|
|
<td width="25%" align="right">
|
||
|
|
<img src="xpub_qr.png" class="stamp">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2"> </td>
|
||
|
|
<td colspan="2" style="">
|
||
|
|
<hr>
|
||
|
|
<hr>
|
||
|
|
<hr>
|
||
|
|
<hr>
|
||
|
|
<p style="text-align: center">Return address: XPUB studio<br>
|
||
|
|
Wijnhaven 61 (4th floor)<br>
|
||
|
|
3011 WJ Rotterdam
|
||
|
|
</p>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="4">
|
||
|
|
<p>
|
||
|
|
XPUB welcomes practitioners to approach publishing from the perspective of multi-, inter- and transdiciplinary practices.
|
||
|
|
</p>
|
||
|
|
<p style="font-style: italic">
|
||
|
|
Reverse: Adaptation of <em>House of Ada</em>, homage to Allison Knowle's <em>House of Dust</em> and an exercise by first-year XPUB student Ada Varriale in the context of Special Issue #19: How Do We Library That?.
|
||
|
|
</p>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function choice (items) {
|
||
|
|
return items[Math.floor(Math.random()*items.length)];
|
||
|
|
}
|
||
|
|
|
||
|
|
function rp (s) {
|
||
|
|
let items = Array.from(s.querySelectorAll("span"));
|
||
|
|
items.forEach(x => x.classList.remove("active"));
|
||
|
|
let pick = choice(items);
|
||
|
|
pick.classList.add("active");
|
||
|
|
|
||
|
|
}
|
||
|
|
function sp (s, active_word) {
|
||
|
|
let items = Array.from(s.querySelectorAll("span"));
|
||
|
|
items.forEach(x => {
|
||
|
|
// console.log("checking", x.innerHTML, active_word);
|
||
|
|
if (x.innerHTML == active_word) {
|
||
|
|
x.classList.add("active");
|
||
|
|
} else {
|
||
|
|
x.classList.remove("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
rp(document.querySelector(".actions"));
|
||
|
|
rp(document.querySelector(".actors"));
|
||
|
|
rp(document.querySelector(".materials"));
|
||
|
|
rp(document.querySelector(".objects"));
|
||
|
|
|
||
|
|
let page = document.querySelector(".page");
|
||
|
|
|
||
|
|
function clone_to_fill_page (page) {
|
||
|
|
let table = page.querySelector("table");
|
||
|
|
let tr = table.querySelector("tr");
|
||
|
|
let td = tr.querySelector("td");
|
||
|
|
|
||
|
|
// clone the initial td to make a full page (4)
|
||
|
|
let new_td = td.cloneNode(true);
|
||
|
|
tr.appendChild(new_td);
|
||
|
|
let new_tr = tr.cloneNode(true);
|
||
|
|
table.appendChild(new_tr);
|
||
|
|
|
||
|
|
}
|
||
|
|
clone_to_fill_page(page);
|
||
|
|
|
||
|
|
let page_rev = document.querySelector(".page.reverse");
|
||
|
|
clone_to_fill_page(page_rev);
|
||
|
|
|
||
|
|
async function layout () {
|
||
|
|
let resp = await fetch("houseofada_combinations.json?time=19:48");
|
||
|
|
let data = await resp.json();
|
||
|
|
let current_page = page;
|
||
|
|
console.log("got data", data);
|
||
|
|
for (var i=0; i<data.items.length; i+=4) {
|
||
|
|
// make a new page (if not first)
|
||
|
|
var tds = Array.from(current_page.querySelectorAll("td"));
|
||
|
|
if (!tds.length==4) { console.log("HEY THERE SHOULD BE FOUR TDS HERE!");}
|
||
|
|
for (var x=0; x<4; x++) {
|
||
|
|
let item = data.items[i+x];
|
||
|
|
// console.log("actions", tds[x].querySelector(".actions"));
|
||
|
|
let td = tds[x];
|
||
|
|
td.style.setProperty("--fg-color", `hsl(${item.hue}, 100%, 50%)`);
|
||
|
|
sp(tds[x].querySelector(".actors"), item.words[0])
|
||
|
|
sp(tds[x].querySelector(".actions"), item.words[1])
|
||
|
|
sp(tds[x].querySelector(".objects"), item.words[2])
|
||
|
|
sp(tds[x].querySelector(".materials"), item.words[3])
|
||
|
|
}
|
||
|
|
|
||
|
|
current_page = page.cloneNode(true);
|
||
|
|
document.body.appendChild(current_page);
|
||
|
|
|
||
|
|
let current_page_rev = page_rev.cloneNode(true);
|
||
|
|
document.body.appendChild(current_page_rev);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(layout, 0);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|