XPUB
/
gradshow24
6
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.xpub.nl/XPUB/gradshow24

Browse Source
master
aglaia 6 months ago
parent 7bef49acab 934d6b2a9b
commit 90cf68834f
18 changed files with 4162 additions and 569 deletions
Show Stats Download Patch File Download Diff File

BIN
aglaia/.thesis.md.swp
View File

Binary file not shown.

BIN
backplaces/.DS_Store vendored
View File

Binary file not shown.

BIN
desktop
View File

Binary file not shown.

BIN
img/blue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 357 KiB

BIN
img/green.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 347 KiB

BIN
img/purple.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 379 KiB

BIN
img/red.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 371 KiB

BIN
img/yellow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 380 KiB

87
index.html
Unescape Escape View File

@ -1,8 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>vulnerable-interfaces.xpub.nl 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vulnerable interfaces </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head>
<body>
Experimental Publishing 2024
The index for the website
test
</body>
<div id="row1">
<div class=" container">
<h2>xpub 22–24</h2>
<h1>vulnerable interfaces</h1>
</div>
<div class=" content-list" id="index-contents">
<img src="/img/purple.png" alt="purple" class="img">
<a href="/ada/index.html" class=" content">Backplaces</a>
<img src="/img/purple.png" alt="purple" class="img">
<a href="/ada/thesis.html" class=" content">&lt?water bodies&gt</a>
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/index.html" class=" content">Wink</a>
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/" class=" content">Fair Leads</a>
<img src="/img/red.png" alt="red" class="img">
<a href="/stephen/index.html" class=" content">What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean?</a>
<img src="/img/red.png" alt="red" class="img">
<a href="/stephen/thesis.html" class=" content">⊞</a>
<img src="/img/green.png" alt="green" class="img">
<a href="/aglaia/index.html" class=" content">Talking Documents</a>
<img src="/img/green.png" alt="green" class="img">
<a href="/aglaia/thesis.html" class=" content">Performing the Bureaucratic Border(line)s</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissuesintro/index.html" class=" content">Special Issues</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="./specialissue19/index.html" class=" content">Garden Leeszaal</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissue20/index.html" class=" content">Console</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissue21/index.html" class=" content">TTY</a>
</div>
</div>
<div id="row2">
<div class="about">
Act 1. <br>
Scene 1.
<br><br>
Internal. A visitor holds a website in their hands. The first page of the website is opened, the visitor holds it to their face and smells it, touches it. The website touches them back.
<br><br>
the website (whispering in the visitor's ear): <br>
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.
<br><br>
the visitor:<br>
Interfaces?
<br><br>
the website: <br>
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.
<br><br>
the visitor (confused): <br>
What do you mean a collection, like a catalogue?
<br><br>
the website: <br>
Yeah I guess. I weave the words and the works we created during...
<br><br>
the visitor:<br>
we?
<br><br>
the website: <br>
...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 websites. (The website tears up). Finishing a Master's is a bit of a heavy moment for us and this website is a gentle archive, a memory of things that have been beautiful to us.
<br><br>
the visitor (sarcastically):<br>
do you have a tissue, im soooo touched.
<br><br>
the website:<br>
malaka, just read me already!
</div>
</div>
</body>
</html>

85
indextest.html
Unescape Escape View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vulnerable interfaces </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head>
<body>
<div id="row1">
<div class=" container">
<h2>xpub 22–24</h2>
<h1>vulnerable interfaces</h1>
</div>
<div class=" content-list" id="index-contents">
<img src="/img/purple.png" alt="purple" class="img">
<a href="/ada/index.html" class=" content">Backplaces</a>
<img src="/img/purple.png" alt="purple" class="img">
<a href="/ada/thesis.html" class=" content">&lt?water bodies&gt</a>
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/index.html" class=" content">Wink</a>
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/" class=" content">Fair Leads</a>
<img src="/img/red.png" alt="red" class="img">
<a href="/stephen/index.html" class=" content">What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean?</a>
<img src="/img/red.png" alt="red" class="img">
<a href="/stephen/thesis.html" class=" content">⊞</a>
<img src="/img/green.png" alt="green" class="img">
<a href="/aglaia/index.html" class=" content">Talking Documents</a>
<img src="/img/green.png" alt="green" class="img">
<a href="/aglaia/thesis.html" class=" content">Performing the Bureaucratic Border(line)s</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissuesintro/index.html" class=" content">Special Issues</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="./specialissue19/index.html" class=" content">Garden Leeszaal</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissue20/index.html" class=" content">Console</a>
<img src="/img/blue.png" alt="blue" class="img">
<a href="/specialissue21/index.html" class=" content">TTY</a>
</div>
</div>
<div id="row2">
<div class="about">
Act 1. <br>
Scene 1.
<br><br>
Internal. A visitor holds a website in their hands. The first page of the website is opened, the visitor holds it to their face and smells it, touches it. The website touches them back.
<br><br>
the website (whispering in the visitor's ear): <br>
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.
<br><br>
the visitor:<br>
Interfaces?
<br><br>
the website: <br>
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.
<br><br>
the visitor (confused): <br>
What do you mean a collection, like a catalogue?
<br><br>
the website: <br>
Yeah I guess. I weave the words and the works we created during...
<br><br>
the visitor:<br>
we?
<br><br>
the website: <br>
...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 websites. (The website tears up). Finishing a Master's is a bit of a heavy moment for us and this website is a gentle archive, a memory of things that have been beautiful to us.
<br><br>
the visitor (sarcastically):<br>
do you have a tissue, im soooo touched.
<br><br>
the website:<br>
malaka, just read me already!
</div>
</div>
</body>
</html>

28
introduction/index.md
Unescape Escape View File

@ -7,32 +7,36 @@ author:
## Act 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.
the reader:
**the reader:**
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.
the reader (confused):
**the reader (confused):**
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...
the reader:
**the reader:**
we?
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.
**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 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.
the book:
malaka, just read me already!
**the book:**
malaka, just read me.

22
print/booklet.template.html
Unescape Escape View File

@ -15,23 +15,21 @@
{% for title in titles %}
{% if loop.index > 0 %}
<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 %}
{% endfor %}
</ul>
</section>
<div id="contenteo">
<section class="section" id="start-matter"></section>
{{ content[0] }}
</section>
{% for section in content %}
{% if loop.index > 1 %}
<!-- <section class="header-page" id="{{ titles[loop.index] }}">
<h1>{{ titles[loop.index - 1] }}</h1>
</section> -->
<section id="section-{{ loop.index + 1 }}" class="section">
{{ section }}
</section>
{% endif %}
{% for section in content %}
{% if loop.index > 0 %}
<section id="section-{{ loop.index + 1 }}" class="section">
{{ section }}
</section>
{% endif %}
{% endfor %}
</div>
</div>

4293
print/index.html
View File

File diff suppressed because it is too large Load Diff

32
print/print_style.css
Unescape Escape View File

@ -1,5 +1,6 @@
/* @import url('https://pad.xpub.nl/p/sixx-print-css/export/txt'); */
@import "images.css"; /* Using a string */
import "images.css"; /* Using a string */
import "../theatre.css"; /* Using a string */
:root {
/* --spot-color-1: #53018e; */
@ -170,9 +171,27 @@ section {
background-color: var(--spot-color-1);
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 {
margin-left: -10mm;
margin: 10mm 0 0 -10mm;
width: 100mm;
}
.toc h1{
@ -183,13 +202,13 @@ section {
list-style: none;
padding: 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;
}
.toc-title{
font-size: 18pt;
line-height: 9mm;
font-size: 19pt;
display: inline;
}
@ -201,6 +220,3 @@ margin-left: 40mm;
display: inline-block;
line-height: 0;
}
#page-168{
background:-moz-element(#keylogger) no-repeat;
}

1
print/section-order.txt
Unescape Escape View File

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

137
style.css
Unescape Escape View File

@ -0,0 +1,137 @@
@font-face {
font-family: 'Platypi-Regular';
src: url('./fonts/webfonts/Platypi-Regular.woff2');
font-style: normal;
}
@font-face {
font-family: 'Platypi-Bold';
src: url('./fonts/webfonts/Platypi-Bold.woff2');
font-style: bold;
}
body {
background-color: #fffdfb;
font-family: 'Platypi-Regular', serif;
font-size: 41px;
line-height: 3.5rem;
margin: 0;
padding: 0 70px;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
bottom: 0;
left: 70px;
margin-bottom: 70px;
}
h1 {
font-family: 'Platypi-Bold', serif;
font-size: 50px;
max-width: 20%;
margin: 0;
}
h2 {
font-family: 'Platypi-Regular', serif;
font-size: 40px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
}
.content-list {
max-width: 633px;
margin: auto;
margin-right: 0;
margin-top: 50px;
}
.content-list a {
color: black;
text-decoration: none;
}
.content-list img {
width: 35px;
height: auto;
vertical-align: middle;
filter: saturate(2);
}
#row1, #row2 {
width: 100%;
}
.about {
font-size: 22px;
line-height: 1.7rem;
max-width: 633px;
margin: auto;
margin-right: 0;
margin-top: 430px;
margin-bottom: 200px;
}
@keyframes wiggle{
25%{
transform: scale(0.8,1.3);
}
50%{
transform: scale(1.1,0.8);
}
75%{
transform: scale(0.7,1.2);
}
}
img:hover{
animation: wiggle 0.6s;
cursor: pointer;
}
@media (max-width: 768px) {
body {
font-size: 28px;
line-height: 2.5rem;
padding: 0 50px;
}
.container {
margin-left: -20px;
margin-bottom: 40px;
}
h1 {
font-size: 40px;
max-width: none;
}
h2 {
font-size: 30px;
max-width: none;
max-width: none;
}
.content-list {
max-width: 100%;
margin-top: 30px;
margin-right: 0;
}
.content-list img {
width: 25px;
}
.about {
padding: 20px;
}
}

20
theatre.css
Unescape Escape View File

@ -0,0 +1,20 @@
#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;
}

26
webpage.template.html
Unescape Escape View File

@ -9,14 +9,26 @@
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="">About</a></li>
<a href="../index.html" class="title">vulnerable interfaces</a>
<!-- Can this list be turned into li's like above please?
3 Introduction 7 Making: 9 Backplaces 19 Talking Documents 31 Wink 39 What do graphic designers do all day. and why do they do it. and. what does "graphic. design" even mean????!!1!? .49 Writing: 51 <?water bodies> 103 Performing the Bureaucratic. Border(line)s 157 Fair Leads 201 ⊞ 253 Special Issues: 255 Garden Leeszaal 267 Console 273 TTY -->
</ul>
<div class="gummy-1">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a>
<div class="caption">ada</div>
</div>
<div class="gummy-2">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a>
<div class="caption">aglaia</div>
</div>
<div class="gummy-3">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a>
<div class="caption">irmak</div>
</div>
<div class="gummy-4">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a>
<div class="caption">stephen</div>
</div>
</nav>
<div id="content">{{ content }}</div>
<div id="content"></div>
</body>
</html>
Write Preview
Loading…
Cancel
Save