XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wip SI16 SI17

Browse Source
master
km0 3 years ago
parent 9830344a58
commit 08a2ba744d
10 changed files with 155 additions and 7 deletions
Show Stats Download Patch File Download Diff File

3
.vscode/settings.json vendored
Unescape Escape View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

18
fonts.css
Unescape Escape View File

@ -125,3 +125,21 @@
src: url('fonts/Garamondt-Italic.woff') format('woff'); src: url('fonts/Garamondt-Italic.woff') format('woff');
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "special-issue-16";
src: url("fonts/pirelli-regular.woff2") format("woff2"),
url("fonts/Pirelli-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "special-issue-16";
src: url("fonts/pirelli-bolditalic.woff") format("woff2"),
url("fonts/pirelli-bolditalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}

BIN
fonts/pirelli-bolditalic.woff
View File

Binary file not shown.

BIN
fonts/pirelli-bolditalic.woff2
View File

Binary file not shown.

BIN
fonts/pirelli-regular.woff
View File

Binary file not shown.

BIN
fonts/pirelli-regular.woff2
View File

Binary file not shown.

56
index.html
Unescape Escape View File

@ -5,6 +5,9 @@
<title>XPUB Special Issues</title> <title>XPUB Special Issues</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"> <link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="lib/spawnSticker.js" defer></script>
</head> </head>
<body> <body>
<!-- <div id="background"></div> --> <!-- <div id="background"></div> -->
@ -43,9 +46,27 @@
<div class="issue-nr">Special<br> Issue 17</div> <div class="issue-nr">Special<br> Issue 17</div>
<div class="issue-date">January/April 2022</div> <div class="issue-date">January/April 2022</div>
<div class="issue-img"><img src="img/none.png"></div> <div class="issue-img"><img src="img/none.png"></div>
<div class="issue-title">...</div> <div class="issue-title">This box found you for a reason</div>
<div class="issue-text"> <div class="issue-text">
<p>...</p> <p>Dear Player,</p>
<p>
I found you for a reason.
</p>
<p>
Welcome to my productive space. Here play meets work. Time is ordered in unusual ways and patterns unravel. Together, we mess with the boundaries between leisure and labour.
</p>
<p>
How are your boundaries? Maybe you shouldn't go to work tomorrow. But could you really follow your own schedule? Would you be more productive if you chose when to work?
</p>
<p>
Ål Nik (Alexandra Nikolova), Carmen Gray, Chaeyoung Kim, Emma Prato, Erica Gargaglione, Francesco Luzzana, Gersande Schellinx, Jian Haake, Kimberley Cosmilla, Miriam Schöb, Mitsa Chaida, Supisara Burapachaisri
</p>
</div> </div>
</a> </a>
</div> </div>
@ -53,10 +74,35 @@
<a href="16/index.html"> <a href="16/index.html">
<div class="issue-nr">Special<br> Issue 16</div> <div class="issue-nr">Special<br> Issue 16</div>
<div class="issue-date">September/December 2021</div> <div class="issue-date">September/December 2021</div>
<div class="issue-img"><img src="img/none.png"></div> <div class="issue-img"><img src="img/none.png" data-sticker="API"></div>
<div class="issue-title">...</div> <div class="issue-title">Learning How to Walk While Catwalking</div>
<div class="issue-text"> <div class="issue-text">
<p>...</p>
<p>
Dear friend and online scroller, <br>
Beloved internet user, <br>
Dearest binge watcher and human being IRL,
</p>
<p>
We welcome you to our publication on vernacular language processing!
</p>
<p>
Be confident, be ambitious and be ready to fail a lot. Our Special Issue is a toolkit to mess around with language: from its standard taxonomies and tags, to its modes of organizing information and its shaping knowledge. With these tools we want to legitimize failures and amatorial practices by proposing a more vernacular understanding of language.
</p>
<p>
We decided to release the publication in the form of an API (Application Programming Interface).
</p>
<p>
Ål Nik (Alexandra Nikolova), Carmen Gray, Chaeyoung Kim, Emma Prato, Erica Gargaglione, Francesco Luzzana, Gersande Schellinx, Jian Haake, Kimberley Cosmilla, Miriam Schöb, Mitsa Chaida, Supisara Burapachaisri
</p>
</div> </div>
</a> </a>
</div> </div>

46
lib/spawnSticker.js
Unescape Escape View File

@ -0,0 +1,46 @@
// A lightweight sticker spawner to stick elements on your html page
const stickerSpawners = document.querySelectorAll("[data-sticker]");
var throttleSpawn = throttle(spawnSticker, 400);
Array.from(stickerSpawners).forEach((spawner) => {
spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
});
function spawnSticker(e) {
var rect = e.target.getBoundingClientRect();
let position = { x: e.clientX - rect.left, y: e.clientY - rect.top };
let content = e.target.dataset.sticker;
e.originalTarget.appendChild(createSticker(content, position));
}
function createSticker(content, position) {
sticker = document.createElement("span");
sticker.classList.add("sticker");
sticker.innerHTML = content;
sticker.style.left = position.x + "px";
sticker.style.top = position.y + "px";
sticker.style.transform = `
translate(-50%, -50%)
rotate(${Math.random() * 40 - 20}deg)
`;
return sticker;
}
// from https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript
function throttle (callback, limit) {
var waiting = false; // Initially, we're not waiting
return function () { // We return a throttled function
if (!waiting) { // If we're not waiting
callback.apply(this, arguments); // Execute users function
waiting = true; // Prevent future invocations
setTimeout(function () { // After a period of time
waiting = false; // And allow future invocations
}, limit);
}
}
}

12
sticker.css
Unescape Escape View File

@ -0,0 +1,12 @@
.sticker {
position: absolute;
user-select: none;
border: 1px solid currentColor;
border-radius: 12px;
white-space: nowrap;
background-color: white;
font-size: 18px;
padding: 0 6px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
text-decoration: none;
}

23
stylesheet.css
Unescape Escape View File

@ -16,6 +16,7 @@
@import 'fonts.css'; @import 'fonts.css';
@import 'mobile.css' screen and (max-width: 900px); @import 'mobile.css' screen and (max-width: 900px);
@import 'sticker.css';
body{ body{
min-width: 720px; min-width: 720px;
@ -127,6 +128,28 @@ section#issues{
font-family: 'special-issue-14'; font-family: 'special-issue-14';
} }
.issue#special-issue-16{
font-family: 'special-issue-16';
}
#special-issue-16 .issue-title {
font-weight: bold;
font-style: italic;
}
#special-issue-16 .issue-title {
font-weight: bold;
font-style: italic;
}
#special-issue-16 {
position: relative;
}
#special-issue-16 * {
position: relative;
}
/* SECTIONS: INTRO + INFO */ /* SECTIONS: INTRO + INFO */
section#intro.endpoint, section#intro.endpoint,

Write Preview
Loading…
Cancel
Save