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

the website

Browse Source
master
ada 5 months ago
parent 2b4215d35b
commit 934d6b2a9b
11 changed files with 323 additions and 12 deletions
Show Stats Download Patch File Download Diff File

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

85
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
<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>

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

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>
<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>
<!-- 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>
</nav>
<div id="content">{{ content }}</div>
<div id="content"></div>
</body>
</html>
Write Preview
Loading…
Cancel
Save