print layout

master
Stephen 5 months ago
parent 8587170094
commit 20b33a38a3

Binary file not shown.

@ -7,32 +7,36 @@ author:
## Act 1. ## Act 1.
### Scene 1. ### Scene 1.
Internal. A reader holds a book in their hands. The first page of the book is opened, the reader holds it to their face and smells the paper, touches it. The book touches them back. *Internal. A reader holds a book in their hands. The first page of the book is opened, the reader holds it to their face and smells the paper, touches it. The book touches them back.*
the book (whispering in the reader's ear): **the book (whispering in the reader's ear):**
Being vulnerable means being transparent, open and brave, trusting others to handle stories with care. By publicly sharing and processing our narratives, we take ownership of our experiences while contributing to a collective voice. Even when we incorporate stories from others, our names remain attached to this collective creation: Ada, Aglaia, Irmak, Stephen. We have created interfaces highlighting the balance between communal sharing, individual responsibility and awareness. Being vulnerable means being transparent, open and brave, trusting others to handle stories with care. By publicly sharing and processing our narratives, we take ownership of our experiences while contributing to a collective voice. Even when we incorporate stories from others, our names remain attached to this collective creation: Ada, Aglaia, Irmak, Stephen. We have created interfaces highlighting the balance between communal sharing, individual responsibility and awareness.
the reader: **the reader:**
Interfaces? Interfaces?
the book: **the book:**
Interfaces are boundaries that connect and separate. They're the spaces that fill the void between us. An interface can be an act, a story, a keyboard, a cake; It allows us to be vulnerable together, to share our stories with and through each other. I am a collection of these interfaces. Interfaces are boundaries that connect and separate. They're the spaces that fill the void between us. An interface can be an act, a story, a keyboard, a cake; It allows us to be vulnerable together, to share our stories with and through each other. I am a collection of these interfaces.
the reader (confused): **the reader (confused):**
What do you mean a collection, like a catalogue? What do you mean a collection, like a catalogue?
the book: **the book:**
Yeah I guess. I weave the words and the works we created during... Yeah I guess. I weave the words and the works we created during...
the reader: **the reader:**
we? we?
the book: **the book:**
...I mean the four of us, the students of Experimental Publishing at the Piet Zwart Institute. From 2022 until today, June 2024, we published three special issues together. We wrote four theses and made four graduation projects. We grew our hair out and cut it and grew it again and dyed it. We cared and cried for each other, we brewed muddy coffee and bootlegged books. (The book tears up) Finishing a Master's is a bit of a heavy moment for us and this book is a gentle archive, a memory of things that have been beautiful to us. ...I mean the four of us, the students of Experimental Publishing at the Piet Zwart Institute. From 2022 until today, June 2024, we published three special issues together. We wrote four theses and made four graduation projects. We grew our hair out and cut it and grew it again and dyed it. We cared and cried for each other, we brewed muddy coffee and bootlegged books.
the reader (sarcastically): (The book tears up).
Finishing a Master's is a bit of a heavy moment for us and this book is a gentle archive, a memory of things that have been beautiful to us.
**the reader (sarcasm):**
do you have a tissue, im soooo touched. do you have a tissue, im soooo touched.
the book: **the book:**
malaka, just read me already! malaka, just read me.

@ -15,19 +15,17 @@
{% for title in titles %} {% for title in titles %}
{% if loop.index > 0 %} {% if loop.index > 0 %}
<li class="toc-title"><a href="#section-{{ loop.index + 1 }}">{{ title }}</a></li> <li class="toc-title"><a href="#section-{{ loop.index + 1 }}">{{ title }}</a></li>
{% if (loop.index == 1) or (loop.index == 9) %}
<br>
<br>
{% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
<div id="contenteo"> <div id="contenteo">
<section class="section" id="start-matter"></section>
{{ content[0] }}
</section>
{% for section in content %} {% for section in content %}
{% if loop.index > 1 %} {% if loop.index > 0 %}
<!-- <section class="header-page" id="{{ titles[loop.index] }}">
<h1>{{ titles[loop.index - 1] }}</h1>
</section> -->
<section id="section-{{ loop.index + 1 }}" class="section"> <section id="section-{{ loop.index + 1 }}" class="section">
{{ section }} {{ section }}
</section> </section>

@ -16,108 +16,128 @@
<li class="toc-title"><a href="#section-2">Introduction</a></li> <li class="toc-title"><a href="#section-2">Introduction</a></li>
<br>
<br>
<li class="toc-title"><a href="#section-3">&lt;?water bodies&gt;</a></li> <li class="toc-title"><a href="#section-3">&lt;?water bodies&gt;</a></li>
<li class="toc-title"><a href="#section-4">Backplaces</a></li> <li class="toc-title"><a href="#section-4">Backplaces</a></li>
<li class="toc-title"><a href="#section-5">Performing the Bureaucratic Border(line)s</a></li> <li class="toc-title"><a href="#section-5">Performing the Bureaucratic Border(line)s</a></li>
<li class="toc-title"><a href="#section-6">Talking Documents</a></li> <li class="toc-title"><a href="#section-6">Talking Documents</a></li>
<li class="toc-title"><a href="#section-7">Fair Leads</a></li> <li class="toc-title"><a href="#section-7">Fair Leads</a></li>
<li class="toc-title"><a href="#section-8">Wink!</a></li> <li class="toc-title"><a href="#section-8">Wink!</a></li>
<li class="toc-title"><a href="#section-9"></a></li> <li class="toc-title"><a href="#section-9"></a></li>
<li class="toc-title"><a href="#section-10">What do graphic designers do all day and why do they do it and what does “graphic design” even mean?!????!!1!?</a></li> <li class="toc-title"><a href="#section-10">What do graphic designers do all day and why do they do it and what does “graphic design” even mean?!????!!1!?</a></li>
<br>
<br>
<li class="toc-title"><a href="#section-11">Special Issues</a></li> <li class="toc-title"><a href="#section-11">Special Issues</a></li>
<li class="toc-title"><a href="#section-12">Garden Leeszaal</a></li> <li class="toc-title"><a href="#section-12">Garden Leeszaal</a></li>
<li class="toc-title"><a href="#section-13">Console</a></li> <li class="toc-title"><a href="#section-13">Console</a></li>
<li class="toc-title"><a href="#section-14">TTY</a></li> <li class="toc-title"><a href="#section-14">TTY</a></li>
<li class="toc-title"><a href="#section-15">Colophon</a></li> <li class="toc-title"><a href="#section-15">Colophon</a></li>
</ul> </ul>
</section> </section>
<div id="contenteo"> <div id="contenteo">
<section class="section" id="start-matter"></section>
<section id="section-2" class="section">
<h1 id="introduction">Introduction</h1> <h1 id="introduction">Introduction</h1>
<h2 id="act-1.">Act 1.</h2> <h2 id="act-1.">Act 1.</h2>
<h3 id="scene-1.">Scene 1.</h3> <h3 id="scene-1.">Scene 1.</h3>
<p>Internal. A reader holds a book in their hands. The first page of the <p><em>Internal. A reader holds a book in their hands. The first page of
book is opened, the reader holds it to their face and smells the paper, the book is opened, the reader holds it to their face and smells the
touches it. The book touches them back.</p> paper, touches it. The book touches them back.</em></p>
<p>the book (whispering in the readers ear): Being vulnerable means <p><strong>the book (whispering in the readers ear):</strong> Being
being transparent, open and brave, trusting others to handle stories vulnerable means being transparent, open and brave, trusting others to
with care. By publicly sharing and processing our narratives, we take handle stories with care. By publicly sharing and processing our
ownership of our experiences while contributing to a collective voice. narratives, we take ownership of our experiences while contributing to a
Even when we incorporate stories from others, our names remain attached collective voice. Even when we incorporate stories from others, our
to this collective creation: Ada, Aglaia, Irmak, Stephen. We have names remain attached to this collective creation: Ada, Aglaia, Irmak,
created interfaces highlighting the balance between communal sharing, Stephen. We have created interfaces highlighting the balance between
individual responsibility and awareness.</p> communal sharing, individual responsibility and awareness.</p>
<p>the reader: Interfaces?</p> <p><strong>the reader:</strong> Interfaces?</p>
<p>the book: Interfaces are boundaries that connect and separate. <p><strong>the book:</strong> Interfaces are boundaries that connect and
Theyre the spaces that fill the void between us. An interface can be an separate. Theyre the spaces that fill the void between us. An interface
act, a story, a keyboard, a cake; It allows us to be vulnerable can be an act, a story, a keyboard, a cake; It allows us to be
together, to share our stories with and through each other. I am a vulnerable together, to share our stories with and through each other. I
collection of these interfaces.</p> am a collection of these interfaces.</p>
<p>the reader (confused): What do you mean a collection, like a <p><strong>the reader (confused):</strong> What do you mean a
catalogue?</p> collection, like a catalogue?</p>
<p>the book: Yeah I guess. I weave the words and the works we created <p><strong>the book:</strong> Yeah I guess. I weave the words and the
during…</p> works we created during…</p>
<p>the reader: we?</p> <p><strong>the reader:</strong> we?</p>
<p>the book: …I mean the four of us, the students of Experimental <p><strong>the book:</strong> …I mean the four of us, the students of
Publishing at the Piet Zwart Institute. From 2022 until today, June Experimental Publishing at the Piet Zwart Institute. From 2022 until
2024, we published three special issues together. We wrote four theses today, June 2024, we published three special issues together. We wrote
and made four graduation projects. We grew our hair out and cut it and four theses and made four graduation projects. We grew our hair out and
grew it again and dyed it. We cared and cried for each other, we brewed cut it and grew it again and dyed it. We cared and cried for each other,
muddy coffee and bootlegged books. (The book tears up) Finishing a we brewed muddy coffee and bootlegged books.</p>
Masters is a bit of a heavy moment for us and this book is a gentle <p>(The book tears up).</p>
archive, a memory of things that have been beautiful to us.</p> <p>Finishing a Masters is a bit of a heavy moment for us and this book
<p>the reader (sarcastically): do you have a tissue, im soooo is a gentle archive, a memory of things that have been beautiful to
us.</p>
<p><strong>the reader (sarcasm):</strong> do you have a tissue, im soooo
touched.</p> touched.</p>
<p>the book: malaka, just read me already!</p> <p><strong>the book:</strong> malaka, just read me.</p>
</section> </section>
<!-- <section class="header-page" id="Backplaces">
<h1>&lt;?water bodies&gt;</h1>
</section> -->
<section id="section-3" class="section"> <section id="section-3" class="section">
<h1 id="water-bodies">&lt;?water bodies&gt;</h1> <h1 id="water-bodies">&lt;?water bodies&gt;</h1>
<h3 id="a-narrative-exploration-of-divergent-digital-intimacies">A <h3 id="a-narrative-exploration-of-divergent-digital-intimacies">A
@ -803,9 +823,6 @@ University of Nebraska Press.</p>
<!-- <section class="header-page" id="Performing the Bureaucratic Border(line)s">
<h1>Backplaces</h1>
</section> -->
<section id="section-4" class="section"> <section id="section-4" class="section">
<h1 id="backplaces">Backplaces</h1> <h1 id="backplaces">Backplaces</h1>
<p>adadesign.nl/backplaces<br /> <p>adadesign.nl/backplaces<br />
@ -884,9 +901,6 @@ alt="Accept My Cookies, biscuits and bows for the performance." /></p>
<!-- <section class="header-page" id="Talking Documents">
<h1>Performing the Bureaucratic Border(line)s</h1>
</section> -->
<section id="section-5" class="section"> <section id="section-5" class="section">
<h1 id="performing-the-bureaucratic-borderlines">Performing the <h1 id="performing-the-bureaucratic-borderlines">Performing the
Bureaucratic Border(line)s</h1> Bureaucratic Border(line)s</h1>
@ -1758,9 +1772,6 @@ Littlefield Publishers.</p>
<!-- <section class="header-page" id="Fair Leads">
<h1>Talking Documents</h1>
</section> -->
<section id="section-6" class="section"> <section id="section-6" class="section">
<h1 id="talking-documents">Talking Documents</h1> <h1 id="talking-documents">Talking Documents</h1>
<h3 id="section"></h3> <h3 id="section"></h3>
@ -1859,9 +1870,6 @@ archive, published in the graduation exhibition of XPUB in 2024.</p>
<!-- <section class="header-page" id="Wink!">
<h1>Fair Leads</h1>
</section> -->
<section id="section-7" class="section"> <section id="section-7" class="section">
<h1 id="fair-leads">Fair Leads</h1> <h1 id="fair-leads">Fair Leads</h1>
<h3 <h3
@ -2633,9 +2641,6 @@ codes-in-knots-sensing-digital-memories/.</p>
<!-- <section class="header-page" id="⊞">
<h1>Wink!</h1>
</section> -->
<section id="section-8" class="section"> <section id="section-8" class="section">
<h1 id="wink">Wink!</h1> <h1 id="wink">Wink!</h1>
<h3 id="a-prototype-for-interactive-childrens-literature">A Prototype <h3 id="a-prototype-for-interactive-childrens-literature">A Prototype
@ -2699,9 +2704,6 @@ alt="“Fiction Friction cards from SI20, working on storytelling of collective
<!-- <section class="header-page" id="What do graphic designers do all day and why do they do it and what does “graphic design” even mean?!????!!1!?">
<h1></h1>
</section> -->
<section id="section-9" class="section"> <section id="section-9" class="section">
<h1 id="section"></h1> <h1 id="section"></h1>
<h3 id="empty-title">empty title</h3> <h3 id="empty-title">empty title</h3>
@ -3659,9 +3661,6 @@ pp. 154; 21, no. 1 (1905), pp. 1110.</p>
<!-- <section class="header-page" id="Special Issues">
<h1>What do graphic designers do all day and why do they do it and what does “graphic design” even mean?!????!!1!?</h1>
</section> -->
<section id="section-10" class="section"> <section id="section-10" class="section">
<h1 <h1
id="what-do-graphic-designers-do-all-day-and-why-do-they-do-it-and-what-does-graphic-design-even-mean1">What id="what-do-graphic-designers-do-all-day-and-why-do-they-do-it-and-what-does-graphic-design-even-mean1">What
@ -4173,9 +4172,6 @@ I made this to explore why designers make design, based on Clifford Geertz's ide
<!-- <section class="header-page" id="Garden Leeszaal">
<h1>Special Issues</h1>
</section> -->
<section id="section-11" class="section"> <section id="section-11" class="section">
<h1 id="special-issues">Special Issues</h1> <h1 id="special-issues">Special Issues</h1>
<p>Special Issues are publications thrice released by first-year XPUB <p>Special Issues are publications thrice released by first-year XPUB
@ -4217,9 +4213,6 @@ stories, and much more.</p>
<!-- <section class="header-page" id="Console">
<h1>Garden Leeszaal</h1>
</section> -->
<section id="section-12" class="section"> <section id="section-12" class="section">
<h1 id="garden-leeszaal">Garden Leeszaal</h1> <h1 id="garden-leeszaal">Garden Leeszaal</h1>
<h3 id="special-issue-xix">Special Issue XIX</h3> <h3 id="special-issue-xix">Special Issue XIX</h3>
@ -4338,9 +4331,6 @@ book at the end of the evening.</figcaption>
<!-- <section class="header-page" id="TTY">
<h1>Console</h1>
</section> -->
<section id="section-13" class="section"> <section id="section-13" class="section">
<h1 id="console">Console</h1> <h1 id="console">Console</h1>
<h3 id="special-issue-xx">Special Issue XX</h3> <h3 id="special-issue-xx">Special Issue XX</h3>
@ -4440,9 +4430,6 @@ launch at Page Not Found.</figcaption>
<!-- <section class="header-page" id="Colophon">
<h1>TTY</h1>
</section> -->
<section id="section-14" class="section"> <section id="section-14" class="section">
<h1 id="tty">TTY</h1> <h1 id="tty">TTY</h1>
<h3 id="special-issue-21">Special Issue 21</h3> <h3 id="special-issue-21">Special Issue 21</h3>
@ -4599,9 +4586,6 @@ performing</figcaption>
<!-- <section class="header-page" id="">
<h1>Colophon</h1>
</section> -->
<section id="section-15" class="section"> <section id="section-15" class="section">
<h1 id="colophon">Colophon</h1> <h1 id="colophon">Colophon</h1>
<p>Vulnerable Interfaces is a catalogue of work producted within the <p>Vulnerable Interfaces is a catalogue of work producted within the

@ -1,5 +1,5 @@
/* @import url('https://pad.xpub.nl/p/sixx-print-css/export/txt'); */ /* @import url('https://pad.xpub.nl/p/sixx-print-css/export/txt'); */
@import "images.css"; /* Using a string */ import "images.css"; /* Using a string */
:root { :root {
/* --spot-color-1: #53018e; */ /* --spot-color-1: #53018e; */
@ -170,9 +170,27 @@ section {
background-color: var(--spot-color-1); background-color: var(--spot-color-1);
color: #ccc; color: #ccc;
} }
#section-2{
font-family: "Courier";
}
#section-2 p{
width: 55mm;
margin-left: 25mm;
}
#section-2 h1{display: none;}
#section-2 h2, #section-2 h3{
text-decoration: underline;
text-align: center;
}
#section-2 strong{
position: absolute;
margin-left: -25mm;
width: 25mm;
}
.toc { .toc {
margin-left: -10mm; margin: 10mm 0 0 -10mm;
width: 100mm; width: 100mm;
} }
.toc h1{ .toc h1{
@ -183,13 +201,13 @@ section {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 8mm;
} }
.toc ul:first-child{ .toc-title:first-of-type, .toc-title:nth-of-type(2), .toc-title:nth-of-type(10){
margin-left: 40mm; margin-left: 40mm;
} }
.toc-title{ .toc-title{
font-size: 18pt; font-size: 19pt;
line-height: 9mm;
display: inline; display: inline;
} }
@ -201,6 +219,3 @@ margin-left: 40mm;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
} }
#page-168{
background:-moz-element(#keylogger) no-repeat;
}

@ -1,4 +1,3 @@
contents
introduction introduction
leslie leslie
ada ada

Loading…
Cancel
Save