diff --git a/backplaces/.DS_Store b/backplaces/.DS_Store index 739c954..99039f6 100644 Binary files a/backplaces/.DS_Store and b/backplaces/.DS_Store differ diff --git a/desktop b/desktop new file mode 100644 index 0000000..04536d4 Binary files /dev/null and b/desktop differ diff --git a/img/blue.png b/img/blue.png index da73943..63858aa 100644 Binary files a/img/blue.png and b/img/blue.png differ diff --git a/img/green.png b/img/green.png index fc11c53..210d590 100644 Binary files a/img/green.png and b/img/green.png differ diff --git a/img/purple.png b/img/purple.png index 67c2b36..bd5497b 100644 Binary files a/img/purple.png and b/img/purple.png differ diff --git a/img/red.png b/img/red.png index 6f262ad..2ca8244 100644 Binary files a/img/red.png and b/img/red.png differ diff --git a/img/yellow.png b/img/yellow.png index 3c2e692..1cee343 100644 Binary files a/img/yellow.png and b/img/yellow.png differ diff --git a/index.html b/index.html index 11fe65c..f7a6f31 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,85 @@ + + - vulnerable-interfaces.xpub.nl 2 + + + vulnerable interfaces + + + - Experimental Publishing 2024 - The index for the website - test - \ No newline at end of file +
+ +
+

xpub 22–24

+

vulnerable interfaces

+
+ +
+ purple + Backplaces + purple + <?water bodies> + yellow + Wink + yellow + Fair Leads + red + What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean? + red + ⊞ + green + Talking Documents + green + Performing the Bureaucratic Border(line)s + blue + Special Issues + blue + Garden Leeszaal + blue + Console + blue + TTY +
+ +
+ +
+
+ + Act 1.
+ Scene 1. +

+ 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. +

+ the website (whispering in the visitor'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 visitor:
+ Interfaces? +

+ the website:
+ 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 visitor (confused):
+ What do you mean a collection, like a catalogue? +

+ the website:
+ Yeah I guess. I weave the words and the works we created during... +

+ the visitor:
+ we? +

+ the website:
+ ...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. +

+ the visitor (sarcastically):
+ do you have a tissue, im soooo touched. +

+ the website:
+ malaka, just read me already! +
+
+ + \ No newline at end of file diff --git a/indextest.html b/indextest.html new file mode 100644 index 0000000..f7a6f31 --- /dev/null +++ b/indextest.html @@ -0,0 +1,85 @@ + + + + + + vulnerable interfaces + + + + + +
+ +
+

xpub 22–24

+

vulnerable interfaces

+
+ +
+ purple + Backplaces + purple + <?water bodies> + yellow + Wink + yellow + Fair Leads + red + What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean? + red + ⊞ + green + Talking Documents + green + Performing the Bureaucratic Border(line)s + blue + Special Issues + blue + Garden Leeszaal + blue + Console + blue + TTY +
+ +
+ +
+
+ + Act 1.
+ Scene 1. +

+ 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. +

+ the website (whispering in the visitor'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 visitor:
+ Interfaces? +

+ the website:
+ 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 visitor (confused):
+ What do you mean a collection, like a catalogue? +

+ the website:
+ Yeah I guess. I weave the words and the works we created during... +

+ the visitor:
+ we? +

+ the website:
+ ...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. +

+ the visitor (sarcastically):
+ do you have a tissue, im soooo touched. +

+ the website:
+ malaka, just read me already! +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6d896f5 --- /dev/null +++ b/style.css @@ -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; + } + } + \ No newline at end of file diff --git a/webpage.template.html b/webpage.template.html index 49a49ab..af6ca9f 100644 --- a/webpage.template.html +++ b/webpage.template.html @@ -9,14 +9,26 @@ -
{{ content }}
+
\ No newline at end of file