XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

update zalan

Browse Source
master
ZALAN SZAKACS 5 years ago
parent ea1da1ea29
commit 5386406d42
227 changed files with 1 additions and 269144 deletions
Show Stats Download Patch File Download Diff File

16
2019/Alexander_Roidl/empty.html
Unescape Escape View File

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src='reasonable.jpg' width='50%'/>
</body>
</html>

175
2019/Alexander_Roidl/index.html
Unescape Escape View File

@ -1,175 +0,0 @@
<html>
<head>
<meta charset="UTF-8">
<style>
*{
font-family: monospace;
}
body pre{
max-width: 600px;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<pre>
WELCOME!
-----------------------------------
P O E T I C S O F T W A R E
-----------------------------------
is (1) a publication
(2) a reflection on software as
as a cultural object
------------------------------------
type help for more information
------------------------------------
Are you sure you want to continue?
Press [Enter] to continue, Press "C" to Cancel
Introduction
Exploring Software with the language of technology and the concepts of software.
A way to explore software differently, in a poetic, cultural sense.
10 Theses on POETIC SOFTWARE
1. Software is not neutral
2. Software is invisible
3. Software is emotional
4. Software is not a good of consumption
5. Software can be non-functional
6. Software is culture
6.1 Concepts of software are of cultural value
7. Software is fun
8. Software is interrupting
9. Software is physical and conceptual equally
10. Software has a history
10 Exercises in POETIC SOFTWARE
1. My iPod is bored
2. Wifi poem
3. A bootloader publication
4. Slow Turtle: A slow server for slow lorris attacks
5. Software depicting software
6. Pin printer
7. The noise in my computer
8. A neural network that doesn't learn
9. PSP: Portable Software Publishing
10. Minimal writing
<u>interrupt</u>
In the original senes the computer does not have a notion of interaction. The way user input e.g. through typing is handled with interrupts. The interrupts literally interrupts the system stops processes to handle the user input. In that way the input through users gains priority over other processes running on the computers.
<u>dithering</u>
Concept to archive greyscale appearence on bitmap images, by the way pixels are distributed
<u>/dev/urandom</u>
device in the computer to collect noise
<u>bootloader</u>
To load the Operating System (OS) the system needs to load it in the memory and setup a few other parameters to make the OS executable. This is the basic function of the bootloader.
<u>compression</u>
Methods / algorithms to minimise filesize.
<u>systemd</u>
<u>keycode</u>
<u>dependency</u>
<u>framework</u>
<u>memory</u>
<u>denial of service attack</u>
Cyberattack towards servers.
<u>assembly</u>
Low level programming language.
<u>filesystem</u>
<u>root</u>
<u>recursive</u>
Imprint
Title:
Poetic Software
Author:
Alexander Roidl
[your name]
2019
Experimental Publishing, Piet Zwart Institute
Special thanks to Aymeric Mansoux, Marloes de Valk, Michael Murtaugh, André Castro, Clara Balaguer, Amy Suo Wu, Leslie Robbins, Angeliki, Alice, Tash, Zalan, Joca, Jule
----------------------------------
COMMANDS
----------------------------------
help:
see help for commands
start:
start publication
exit:
stop publication
who:
print the imprint
why:
print the Introduction
whois (name):
print bio of name if in publication
xpub:
print fancy XPUB ASCII logo
-----------------------------------
Instructions for the Bootloader:
Requirements:
PC with Legacy BIOS Boot option.
Screen
Keyboard
1. Shut down Computer
2. Plug the USB Stick into an empty USB slot
3. Enter the BIOS Menu by pressing a button as instructed on bootup (often F1 or F12)
4. Change the boot-disk to the plug USB Stick
5. Change the boot-mode to legacy boot mode
6. Save and reboot
7. Enjoy the bootloader that automatically should be loaded now
Written in Assembly.
Multi stage boot, 512 bytes + 6 individual assembly programs for each project.
<pre>
</body>
</html>

BIN
2019/Alice_Strete/img/food.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 505 KiB

26
2019/Alice_Strete/index.html
Unescape Escape View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Your Body Will Make Itself Heard</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body style="background-color: #F0F0F0;">
<div class="title">
Is it time to eat <br> or is there no more time to eat?
</div>
<div class="text">
<p>
Have you tried any meal replacements yet? If so, what do you think?
</p>
<p>
Is it time to eat/is there no more time to eat is a long-winded review of the most prominent techno-solutionist creation in terms of food. It manifests itself into a video essay and a... well... written essay, alongside an archive of images, articles, videos and more, which together deconstruct the culture of future food, born in the valley of technological quick-fixes.
</p>
<p>
Stalk this <a href="http://pzwiki.wdka.nl/mediadesign/User:Alice/Sixth_trimester">wiki</a> for the latest updates.
</p>
</div>
</body>
</html>

18
2019/Alice_Strete/style.css
Unescape Escape View File

@ -1,18 +0,0 @@
.text {
font-size: 18px;
font-family: 'Inconsolata', monospace;
width: 60%;
text-align: justify;
margin-top: 40px;
}
.title {
font-size: 30px;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
text-align: left;
}

18
2019/Angeliki_Diakrousi/index.html
Unescape Escape View File

@ -1,18 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<title>Let's Amplify Unspeakable Things</title>
<meta http-equiv="refresh" content="0; url=https://hub.xpub.nl/screaming/eoaauaiaoui/index.php" />
</body>
</html>

28
2019/Zalan/eigengrau.html
Unescape Escape View File

@ -1,28 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #16161D;">
<div style="width: 35%; font-family: sans-serif; color: #F4FFFF;">
<H3>EIGENGRAU</H3>
<br>
<p>
Eigengrau (derived from German origin, meaning <i>‘dark light’</i>) counters the online individual information overload by creating an offline non-screen mediated collective experience. It proposes a temporary escape in a contemporary setting, where the audience is invited into a collective ritual, a feeling of togetherness. With only the means of stripped back elements of light, sound and haze, the installation creates an emotional illusion, a dialogue between darkness and light.</p>
<p>
The audiovisual experience features a custom-made LED circle, that in the timespan of 12 minutes takes the audience through a non linear time of five mental states: <i> Deep State, Anticipation State, Weird state, Higher State and Relaxation State</i>. This narrative is made visible through the pre-programmed motion of blue light gradients, referring to the colour of screen light.
</p><p>
Eigengrau frames the negative space, and therefore it generates an illusion of non-material space. The installation offers a suspension from the isolation and digital saturation of contemporary society. <br><br>
<a href="http://pzwiki.wdka.nl/mediadesign/File:Phantasmagria_-_Zalán_Szakács_Thesis.pdf" style="color: #F4FFFF;">[ Read Thesis ]</a>
</p></div>
</body>
</html>

16
2019/Zalan_Szakacs/empty.html
Unescape Escape View File

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src='reasonable.jpg' width='50%'/>
</body>
</html>

28
2019/Zalan_Szakacs/index.html
Unescape Escape View File

@ -1,28 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #16161D;">
<div style="width: 35%; font-family: sans-serif; color: #F4FFFF;">
<H3>EIGENGRAU</H3>
<br>
<p>
Eigengrau (derived from German origin, meaning <i>‘dark light’</i>) counters the online individual information overload by creating an offline non-screen mediated collective experience. It proposes a temporary escape in a contemporary setting, where the audience is invited into a collective ritual, a feeling of togetherness. With only the means of stripped back elements of light, sound and haze, the installation creates an emotional illusion, a dialogue between darkness and light.</p>
<p>
The audiovisual experience features a custom-made LED circle, that in the timespan of 12 minutes takes the audience through a non linear time of five mental states: <i> Deep State, Anticipation State, Weird state, Higher State and Relaxation State</i>. This narrative is made visible through the pre-programmed motion of blue light gradients, referring to the colour of screen light.
</p><p>
Eigengrau frames the negative space, and therefore it generates an illusion of non-material space. The installation offers a suspension from the isolation and digital saturation of contemporary society. <br><br>
<a href="http://pzwiki.wdka.nl/mediadesign/File:Phantasmagria_-_Zalán_Szakács_Thesis.pdf" style="color: #F4FFFF;">[ Read Thesis ]</a>
</p></div>
</body>
</html>

BIN
2019/postergenerator/BandeinsStrangeVariableGX.ttf
View File

Binary file not shown.

453
2019/postergenerator/index.html
Unescape Escape View File

@ -1,453 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
@font-face {
font-family: 'Bandeins Strange';
src: url('BandeinsStrangeVariableGX.ttf') format("truetype-variations");
font-weight: 1 999;
}
#mainframe{
position:absolute;
top:30px;
left:30px;
bottom:30px;
right:30px;
margin:0;
padding:10px;
/*border:2px dashed #ff0066;*/
/* border:2px solid #703EC1; */
background: #B008E0; purple
-webkit-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
-moz-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1);
}
/* input, button, textarea {
border: 2px solid rgba(0, 0, 0, 0.6);
background-image:none;
background-color: #dadad3;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 5px;} */
body{
margin:0;
padding:0;
width:100%;
height:100vh;
overflow: hidden;
/* background: #F34146;
color: #F34146; red*/
background: #F34146;
color: black;
background-image: linear-gradient(rgba(0, 0, 0, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 1) 1px, transparent 1px);
background-size: 2em 2em;
/* background-size: 30px; */
/* background-image: url('https://d7hftxdivxxvm.cloudfront.net/?resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=1200&quality=80'); */
}
h1{
font-family:"Bandeins Strange";
font-size:8vw;
font-variation-settings:"wght" 800, "wdth" 421;
margin:0;
padding:0;
word-wrap: break-word;
margin-top: -1%;
margin-left: 0px;
line-height: 7vw;
/* -webkit-transform: rotate(-100deg) skew(0, -10deg);
-moz-transform: rotate(-100deg) skew(0, -10deg);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0); */
transform: rotate(10deg) skew(-10deg, 0deg);
color: #FFEED0;
}
h2{
font-family:"Bandeins Strange";
font-size:8vw;
font-variation-settings:"wght" 600, "wdth" 421;
margin:0;
padding:0;
}
h3{
font-family:"Bandeins Strange";
font-size:3vw;
font-variation-settings:"wght" 400, "wdth" 221;
margin:0;
padding:0;
color: #FFEED0;
}
h5{
font-family:"Bandeins Strange";
font-size:2vw;
font-variation-settings:"wght" 400, "wdth" 121;
margin:0;
padding:0;
color: #FFEED0;
}
h5{
list-style: none;
}
#fontslider{
margin-top: 10px;
z-index: 999999;
}
/*margins*/
#m1{
display:block;
position:absolute;
top: 5px;
left: 50%;
width:50px;
margin-left:-25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
z-index: 999;
}
#m2{
display:block;
position:absolute;
top: 50%;
left: -15px;
width:50px;
margin-top:-25px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
z-index: 999;
}
#m3{
display:block;
position:absolute;
top: 50%;
right: -15px;
width:50px;
margin-top:-25px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 999;
}
#m4{
display:block;
position:absolute;
bottom: 5px;
left: 50%;
width:50px;
margin-left:-25px;
z-index: 999;
}
#asciibox{
display:block;
position:absolute;
bottom:15px;
right: 10px;
line-height: 13px;
}
input[type="number"]{
border: 1px solid black;
/* border: none; */
padding: 3px;
font-family:"Bandeins Strange";
background-color: lightgrey;
}
#place{
position: absolute;
right: 15px;
font-size: 20px;
top: 60%;
}
#place2{
position: absolute;
right: 15px;
font-size: 20px;
top: 65%;
}
#place3{
position: absolute;
right: 15px;
font-size: 20px;
top: 70%;
}
input[type="checkbox"] {
transform: scale(1);
margin: -1px;
}
@media only screen and (max-width: 900px) {
input[type="checkbox"]{
transform: scale(0.8);
margin: -2px;
}
#asciibox{
line-height: 12px;
}
select{
transform: scale(0.7);
margin: -50px;
}
h1{
font-size:12vw;
line-height: 10vw;
}
}
</style>
</head>
<body>
<!--margin settings dials -->
<input type="number" name="m1" id="m1" step="10" value="100">
<input type="number" name="m2" id="m2" step="10" value="100">
<input type="number" name="m3" id="m3" step="10" value="40">
<input type="number" name="m4" id="m4" step="10" value="40">
<!--div class="quantity">
<input type="number" min="1" max="9" step="1" value="1">
</div-->
<div id="mainframe">
<h1>UPSETTING SETTINGS</h1>
<input type="range" min="0" max="100" value="40" class="slider" id="fontslider">
<input type="range" min="0" max="10" value="3" class="slider" id="fontslider2">
<h3>Graduation Show, Piet Zwart Institute, <br>Experimental Publishing</h3>
<br>
<br>
<h5>
<input type="radio" name="" value="Settings" checked> Natasha Berting<br>
<input type="radio" name="" value="Settings" checked> Angeliki Diakrousi<br>
<input type="radio" name="" value="Settings" checked> Joca van der Horst<br>
<input type="radio" name="" value="Settings" checked> Alexander Roidl<br>
<input type="radio" name="" value="Settings" checked> Alice Strete<br>
<input type="radio" name="" value="Settings" checked> Zalán Szakács<br>
</h5>
<br>
<select id="place" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2">UBIK + SLASH GALLERY</option>
<option value="3">Boomgaardsstraat 69, Rotterdam</option>
</select>
<select id="place2" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2" selected>UBIK + SLASH GALLERY</option>
<option value="3">Boomgaardsstraat 69, Rotterdam</option>
</select>
<select id="place3" name="selection">
<option value="1">July 12–13, 2019</option>
<option value="2">UBIK + SLASH GALLERY</option>
<option value="3" selected>Boomgaardsstraat 69, Rotterdam</option>
</select>
<!--textarea name="message" rows="10" cols="30">
July 12–13, 2019
UBIK + SLASH GALLERY
Boomgaardsstraat 69, Rotterdam
</textarea-->
<span id="asciibox">
<input type="checkbox" name="" value="" checked id="colorchanger">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<br>
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<br>
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" >
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value=""checked>
<input type="checkbox" name="" value="">
<br>
</span>
</div>
</body>
<script>
$( document ).ready(function() {
var newvalue = $("#m1").val() + "px"
$("#mainframe").css("top",newvalue)
var newvalue = $("#m2").val() + "px"
$("#mainframe").css("left",newvalue)
var newvalue = $("#m3").val() + "px"
$("#mainframe").css("right",newvalue)
var newvalue = $("#m4").val() + "px"
$("#mainframe").css("bottom",newvalue)
var newvalue = $("#fontslider").val()
$("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10)
var newvalue = $("#fontslider2").val()
$("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)")
});
$("#m1,#m2,#m3,#m4").change(function(){
var newvalue = $(this).val() + "px"
console.log(newvalue)
if($(this).attr('id') == "m1" ) $("#mainframe").css("top",newvalue)
if($(this).attr('id') == "m2" ) $("#mainframe").css("left",newvalue)
if($(this).attr('id') == "m3" ) $("#mainframe").css("right",newvalue)
if($(this).attr('id') == "m4" ) $("#mainframe").css("bottom",newvalue)
}
)
$("#fontslider").change(function(){
var newvalue = $(this).val()
$("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10)
})
$("#fontslider2").change(function(){
var newvalue = $(this).val()
$("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)")
})
$("#colorchanger").change(function(){
if($(this).is(":checked")) {
$("#mainframe").css("background","#B008E0")
$("body").css("background-color","#F34146")
$("h3,h5").css("color","#FFEED0")
$("h1").css("color","#FFEED0")
}
else{
$("#mainframe").css("background","lightgrey")
$("body").css("background-color","white")
$("h3,h5").css("color","black")
$("h1").css("color","black")
}
})
//transform: rotate(10deg) skew(-10deg, 0deg);
// jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
// jQuery('.quantity').each(function() {
// var spinner = jQuery(this),
// input = spinner.find('input[type="number"]'),
// btnUp = spinner.find('.quantity-up'),
// btnDown = spinner.find('.quantity-down'),
// min = input.attr('min'),
// max = input.attr('max');
//
// btnUp.click(function() {
// var oldValue = parseFloat(input.val());
// if (oldValue >= max) {
// var newVal = oldValue;
// } else {
// var newVal = oldValue + 1;
// }
// spinner.find("input").val(newVal);
// spinner.find("input").trigger("change");
// });
//
// btnDown.click(function() {
// var oldValue = parseFloat(input.val());
// if (oldValue <= min) {
// var newVal = oldValue;
// } else {
// var newVal = oldValue - 1;
// }
// spinner.find("input").val(newVal);
// spinner.find("input").trigger("change");
// });
//
// });
</script>
</html>

72
README
Unescape Escape View File

@ -1,72 +0,0 @@
If you see this file AND you are reading it from
/data/www/xpub.nl/project.xpub.nl on the server, then
please kindly GTFO :)
The content of this folder is controlled by a post-receive hook managed
by Gitea.
https://git.xpub.nl/XPUB/project.xpub.nl
To change the content of this folder, only do it via cloning the repos
and pushing to it. The changes will be immediately live on
https://project.xpub.nl
:*
Note for graduating students:
YOU ARE FREE TO DESIGN YOUR PROJECT PAGE THE WAY YOU LIKE
*However*
(dramatic pause)
There are quite a few mandatory things content and structure wise that
need to present, namely:
1. the page must have a bio + link to personal site/domain (if relevant)
2. the page must have a description of the project + link(s) to the
project + link(s) to relevant wiki pages (if useful) + link(s) to git repos
(if any) + year of the work
3. the page must have visual documentation of the work (screenshots,
photos, drawing, generated stuff, whatever is relevant and illustrative)
4. the page must have link to final PDF + visual documentation of the
printed version (I don't mean the thesis but the outcome of the book
sprint and final form of the published thesis) + link from home
5. the page must have visual documentation of the work during the grad
show + link from home
6. License/copyright statement. You're free to decide how you want your
work, from its documentation to its assets and core components, to be
distributed and reused, if you don't specify anything it will default to
standard copyright, it's always nice and useful to be explicit about
your position (whatever this can be!) in that regard, and regardless of
what alternative you choose (or not): default copyright, full fledged
free culture license, situationist style statement, underground press
copywrong trolling, anti-copyright notice, etc.
Also from a technical POV, make sure that:
- you follow the following URL structure:
https://project.xpub.nl/the-name-of-your-project/
no underscores, only dashes for space.
inside the the-name-of-your-project/ folder, your project page should
be named index.html, and from the main site only link to the folder
name, do not link to index.html directly. The web server will serve
index.html automatically.
See how it's done for last year's projects
- do not load external resources, such as fonts or js scripts. Serve
*everything* from the project folder. Basically your project page
should work locally and offline.
How all this is presented is really up to you and there are no
restrictions (Joca for instance is using a functional chat bot
interface).
You can always use one of the pages made by Lídia for last year's
projects as a starting point if you like.

BIN
alt-reality-lexicon/img/PublicationAltRealityLexicon-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 189 KiB

BIN
alt-reality-lexicon/img/PublicationAltRealityLexicon-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 130 KiB

BIN
alt-reality-lexicon/img/gradshow-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
alt-reality-lexicon/img/gradshow-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

BIN
alt-reality-lexicon/img/gradshow-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 82 KiB

BIN
alt-reality-lexicon/img/gradshow-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 82 KiB

BIN
alt-reality-lexicon/img/gradshow-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

BIN
alt-reality-lexicon/img/gradshow-6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 KiB

BIN
alt-reality-lexicon/img/pzithesis-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 117 KiB

BIN
alt-reality-lexicon/img/pzithesis-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 KiB

BIN
alt-reality-lexicon/img/pzithesis-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 122 KiB

BIN
alt-reality-lexicon/img/pzithesis-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 117 KiB

BIN
alt-reality-lexicon/img/pzithesis-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
alt-reality-lexicon/img/pzithesis-6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 157 KiB

BIN
alt-reality-lexicon/img/pzithesis-7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 164 KiB

BIN
alt-reality-lexicon/img/pzithesis-8.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
alt-reality-lexicon/img/videoscreenshot.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
alt-reality-lexicon/img/wiki-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 221 KiB

BIN
alt-reality-lexicon/img/wiki-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 191 KiB

73
alt-reality-lexicon/index.html
Unescape Escape View File

@ -1,73 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alt Reality Lexicon</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Alt Reality Lexicon <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h2 id='student-name'>Pleun Gremmen</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<div id='about-project'>
<p>The Alt Reality Lexicon (2018) is a lexicon of neologisms that helps the demystification and clarification of the language used by two prominent far-right online subcultures: the Alt-Right and the Manosphere by translating jargon to common language. In order to keep conversing about our differences the editors of the lexicon build a door in the walls of the echo chamber to open it up to a broader audience.</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Pleun is a visual artist and graphic designer aiming to research ways to create and share new narratives about current affairs and interests while pushing the boundaries of her practice.</p>
</div>
<span id='getback'> go back </span>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<img src="img/wiki-1.jpg" class='workimg'/>
<img src="img/wiki-2.jpg" class='workimg'/>
<img src="img/videoscreenshot.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/Publication-AltRealityLexBook.pdf' target="_blank" class='ext'>Publication PDF</a></li>
<li><a href='pdf/Publication-AltRealityLexBook-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
</ul>
<img src="img/pzithesis-4.jpg" class='workimg'/>
<img src="img/pzithesis-2.jpg" class='workimg'/>
<img src="img/pzithesis-7.jpg" class='workimg'/>
<img src="img/pzithesis-8.jpg" class='workimg'/>
<img src="img/PublicationAltRealityLexicon-1.jpg" class='workimg'/>
<img src="img/PublicationAltRealityLexicon-2.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow-1.jpg" class='workimg'/>
<img src="img/gradshow-2.jpg" class='workimg'/>
<img src="img/gradshow-3.jpg" class='workimg'/>
<img src="img/gradshow-4.jpg" class='workimg'/>
<img src="img/gradshow-5.jpg" class='workimg'/>
<img src="img/gradshow-6.jpg" class='workimg'/>
</div>
</div>
</section>
</div>
</body>
</html>

BIN
alt-reality-lexicon/pdf/Publication-AltRealityLexBook-print.pdf
View File

Binary file not shown.

BIN
alt-reality-lexicon/pdf/Publication-AltRealityLexBook.pdf
View File

Binary file not shown.

BIN
anomolous-faces/img/gradshow-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
anomolous-faces/img/gradshow-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
anomolous-faces/img/gradshow-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 112 KiB

BIN
anomolous-faces/img/gradshow-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
anomolous-faces/img/gradshow-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
anomolous-faces/img/pd_patch.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
anomolous-faces/img/pzithesis-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 101 KiB

BIN
anomolous-faces/img/pzithesis-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 115 KiB

BIN
anomolous-faces/img/pzithesis-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
anomolous-faces/img/pzithesis-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
anomolous-faces/img/pzithesis-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 119 KiB

BIN
anomolous-faces/img/pzithesis-6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 112 KiB

69
anomolous-faces/index.html
Unescape Escape View File

@ -1,69 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Anomolous Faces</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Anomolous Faces <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h2 id='student-name'>Max Franklin</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<div id='about-project'>
<p>Improvisation poses questions upon the production and dissemination of artistic work in terms of its material value, and traditional attributions of mastery.<br>
Karen Eliot is an improviser, musician, artist, and activist who works to resist standardised valuation of artistic practice. Her work cannot be characterised in distinct forms, but exists as a multitude of actions, challenging ownership, identity and representation.</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Max Franklin is a musician and digital artist currently based in Rotterdam. His work is concerned with the fragile nature of improvisation in music, with software. He has worked within this position since completing his studies in Music, moving between a wide range of acts involving music, technology, design, arts and education.</p>
</div>
<span id='getback'> go back </span>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<img src="img/pd_patch.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/Publication-POD_Thesis_Max-Franklin.pdf' target="_blank" class='ext'>Publication PDF</a></li>
<li><a href='pdf/Publication-POD_Thesis_Max-Franklin-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
</ul>
<img src="img/pzithesis-5.jpg" class='workimg'/>
<img src="img/pzithesis-3.jpg" class='workimg'/>
<img src="img/pzithesis-4.jpg" class='workimg'/>
<img src="img/pzithesis-2.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow-1.jpg" class='workimg'/>
<img src="img/gradshow-2.jpg" class='workimg'/>
<img src="img/gradshow-3.jpg" class='workimg'/>
<img src="img/gradshow-4.jpg" class='workimg'/>
<img src="img/gradshow-5.jpg" class='workimg'/>
</div>
</div>
</section>
</div>
</body>
</html>

BIN
anomolous-faces/pdf/Publication-POD_Thesis_Max-Franklin-print.pdf
View File

Binary file not shown.

1736
anomolous-faces/pdf/Publication-POD_Thesis_Max-Franklin.pdf
View File

File diff suppressed because one or more lines are too long

BIN
back-it-up/img/gradshow-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
back-it-up/img/gradshow-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
back-it-up/img/gradshow-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
back-it-up/img/gradshow-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
back-it-up/img/gradshow-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
back-it-up/img/publication-mockup.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
back-it-up/img/pzithesis-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
back-it-up/img/pzithesis-10.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
back-it-up/img/pzithesis-11.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 103 KiB

BIN
back-it-up/img/pzithesis-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
back-it-up/img/pzithesis-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 125 KiB

BIN
back-it-up/img/pzithesis-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
back-it-up/img/pzithesis-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 114 KiB

BIN
back-it-up/img/pzithesis-6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB

BIN
back-it-up/img/pzithesis-7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 265 KiB

BIN
back-it-up/img/pzithesis-8.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
back-it-up/img/pzithesis-9.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 124 KiB

BIN
back-it-up/img/web-screenshot.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

73
back-it-up/index.html
Unescape Escape View File

@ -1,73 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Back It Up</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Back It Up <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.karinadukalska.com' target='_blank' class='ext' id='student-page'>Karina Dukalska</a></h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<div id='about-project'>
<p>The intangibility of social dances create a disruptive beauty of pure fulfilment in the moment, a true sense of flow, as well as a yearning for the fleeting memory that may be lost forever. Back It Up (2018) is an interactive performance of two swing dancers whose steps are controlled by the audience. It is accompanied by graphical notation systems, traces of the non-verbal dialogue between dancers and the atmosphere in the room recorded by the audience. The difference in perception of the experience is what makes every recording unique.</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Karina Dukalska is a graphic designer challenging the physicality of books by enforcing physical interaction. Engaging with the content through materials, tangibility and actions deepens the experience of consuming the content itself.</p>
</div>
<span id='getback'> go back </span>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='http://www.karinadukalska.com/#/back-it-up/' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/web-screenshot.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/Publication-Karina_ABC_thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
<li><a href='pdf/Publication-Karina_ABC_thesis-print.pdf' target="_blank" class='ext'>Printed publication PDF</a></li>
</ul>
<img src="img/pzithesis-3.jpg" class='workimg'/>
<img src="img/pzithesis-6.jpg" class='workimg'/>
<img src="img/pzithesis-5.jpg" class='workimg'/>
<img src="img/pzithesis-7.jpg" class='workimg'/>
<img src="img/publication-mockup.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow-1.jpg" class='workimg'/>
<img src="img/gradshow-2.jpg" class='workimg'/>
<img src="img/gradshow-3.jpg" class='workimg'/>
<img src="img/gradshow-4.jpg" class='workimg'/>
<img src="img/gradshow-5.jpg" class='workimg'/>
</div>
</div>
</section>
</div>
</body>
</html>

BIN
back-it-up/pdf/Publication-Karina_ABC_thesis-print.pdf
View File

Binary file not shown.

BIN
back-it-up/pdf/Publication-Karina_ABC_thesis.pdf
View File

Binary file not shown.

BIN
css/fonts/courierprime.ttf
View File

Binary file not shown.

BIN
css/fonts/inconsolata.ttf
View File

Binary file not shown.

BIN
css/fonts/inconsolatabold.ttf
View File

Binary file not shown.

BIN
css/fonts/tenor.ttf
View File

Binary file not shown.

922
css/main.css
Unescape Escape View File

@ -1,922 +0,0 @@
@font-face {
font-family: inconsolata;
src: url(fonts/inconsolata.ttf);
}
@font-face {
font-family: inconsolatabold;
src: url(fonts/inconsolatabold.ttf);
}
@font-face {
font-family: tenor;
src: url(fonts/tenor.ttf);
}
* {
box-sizing: border-box;
}
body{
font-family:inconsolata, sans-serif;
color:white;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: #2f2f2f;
}
/*header*/
header{
position:relative;
width:100%;
padding-bottom:5%;
display:block;
overflow:hidden;
margin-left:1.3%;
line-height:1.3vw;
}
header h1{
font-family:tenor;
font-size:9vw;
float:left;
width:60%;
margin-bottom:5%;
}
.show{
font-size:7vw;
color:#0f0;
text-decoration:none;
}
.show:hover{
color:magenta;
}
#sub{
white-space:nowrap;
font-family:inconsolata;
float:right;
padding-top:3%;
padding-right:3%;
width:40%;
}
#sub > a {
display:inline-block;
width:45%;
text-align:right;
font-size:calc(9px + 0.9vw);
}
#sub > a:visited {
color:white;
}
#hleft-text{
display:none;
margin-top:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
color:white;
z-index:55;
cursor:pointer;
overflow:hidden;
}
#inner-hleft-text{
background-color:black;
width:90vw;
height:95vh;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:auto;
}
#ihtp{
width:80%;
height:95%;
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size:calc(8px + 1.5vh);
line-height:130%;
}
#hleft-text:target{
display:block;
}
#getback{
text-decoration:underline;
text-decoration-color:#0f0;
z-index:100;
}
#getback:hover{
text-decoration: overline;
text-decoration-color:magenta;
}
#back, #back:hover, #back:visited{
text-decoration:none;
color:white;
}
/*xpuf*/
[id*="att"]{
background:rgba(0,0,0,0.7);
overflow:hidden;
height:100%;
width:100%;
top:0;
left:0;
margin:0 auto;
position:fixed;
z-index:10;
display:none;
}
.wrap{
background:rgba(0,0,0,0.3);
position:fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow-y:hidden;
height:80%;
width:90%;
display:flex;
flex-direction:column;
}
.upbar {
height:5%;
width:100%;
background-color:#0f0;
position:relative;
}
.upbar a {
display:block;
height:100%;
}
.upbar p {
position:absolute;
width:97%;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.uptitle {
color:black;
float:left;
font-size:3vh;
}
.upclose {
color:black;
float:right;
text-decoration:none;
font-size:3vh;
}
.upclose:hover {
color:magenta;
}
.twowrap {
height:95%;
overflow-y:auto;
overflow-x:hidden;
}
[id*="att"] img{
width:100%;
padding:1% 3%;
}
[id*="att"]:target{
display: block;
}
.twowrap-trailer{
overflow-x:hidden;
overflow-y: auto;
height:91%;
}
.iframe-container {
overflow:hidden;
padding-top: 56%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top:0;
width: 100%;
}
.video-container{
overflow:hidden;
padding-top: 0%;
position: relative;
}
[id*="att-video"] > .wrap{
background:rgba(0,0,0,0);
}
/*main*/
section#main{
position:relative;
margin-left:0;
left:0;
width:100%;
padding-left:1%;
display: flex;
flex-direction: column;
}
.logo{
display:none;
}
[class*="col"]{
float:left;
width:21.75%;
height:100%;
display: flex;
flex-direction: column;
padding-right:2%;
}
[class*="col"] p, img, h2{
padding-right:7%;
}
[class*="col"] p{
font-size:calc(9px + 0.6vw);
line-height:130%;
}
.col1 {
width:13%;
display:initial;
}
.col6 {
width:65.25%;
padding-right:0;
}
[class*="subcl"]{
width:33%;
float:left;
}
.col2 p {
word-wrap:break-word;
}
p.subcl3{
padding-right:1%;
}
.row{
padding-bottom:2.2vh;
padding-top:2.2vh;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width:3px;
}
#categories{
font-family:inconsolata, serif;
margin:0 auto;
width:100%;
border-bottom-style:double;
border-bottom-width:4px;
}
#categories.row {
padding-top:0.7%;
padding-bottom:0.5%;
-webkit-padding-after:0.5%;
}
#categories h2{
font-size:2.7vw;
}
a{
color:white;
text-decoration-color:#0f0;
}
.ext:hover {
text-decoration: overline;
text-decoration-color:#f3ca1b;
}
.int:hover {
text-decoration: overline;
text-decoration-color:magenta;
}
.gradShow {
font-weight:bold;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){
/*header*/
#ihtp{
font-size:calc(9px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
}
/*xpuf*/
.wrap {
height:85%;
}
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(10px + 0.6vw);
}
.row{
border-bottom-width:4px;
}
#categories{
border-bottom-width:4px;
}
#categories h2{
font-size:2.5vw;
}
}
/* --------- 3rd case --------- */
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#ihtp{
font-size:calc(11px + 1.7vh);
line-height:130%;
}
#sub > a {
width:47%;
font-size:2.1vw;
}
/*xpuf*/
/*main*/
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p{
font-size:calc(11px + 0.6vw);
}
.row{
border-bottom-width:5px;
}
p.subcl3{
padding-right:5%;
}
#categories{
border-bottom-width:5px;
}
#categories.row {
width:100%;
}
#categories h2{
font-size:2.1vw;
}
}
/* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) {
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:7vw;
width:77%;
padding-bottom:3%;
-webkit-padding-after:7%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:calc(10px + 0.6vw);
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
padding-top:5%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:80%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(8px + 0.6vw);
line-height:120%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
width:60%;
height:82%;
}
.uptitle {
font-size:2.5vh;
}
.upclose {
font-size:2.5vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(10px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
margin-left:0;
border-bottom-width:5px;
width:98%;
}
#categories h2{
font-size:calc(11px + 0.6vw);
}
}
/* --------- 5th case --------- */
@media all and (min-width: 1400px){
/*header*/
header{
width:25%;
position:fixed;
left:0;
top:2%;
bottom:0;
padding-bottom:0;
float:left;
margin-left:2%;
display:flex;
flex-direction: column;
}
header h1{
font-size:6vw;
width:77%;
float:none;
}
#page-title {
margin-bottom:13%;
}
.show{
display:none;
}
#sub{
padding-top:0;
float:none;
width:100%;
}
#sub > a {
font-size:1.2em;
width: 35%;
text-align:left;
}
#hleft-text{
position:relative;
display:block;
background:none;
margin-top:9%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:30%;
box-sizing:initial;
cursor:default;
}
#inner-hleft-text{
width:100%;
height:inherit;
position:relative;
top:0;
left:0;
transform:none;
-webkit-transform:none;
-ms-transform:none;
overflow-y:hidden;
background-color:initial;
}
#ihtp{
width:70%;
position:relative;
top:0;
left:0;
-webkit-transform:none;
-ms-transform:none;
transform:none;
font-size:calc(9px + 0.5vw);
line-height:125%;
}
#getback{
display:none;
}
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
}
/*xpuf*/
.wrap{
height:70%;
width:53%;
}
.uptitle {
font-size:2vh;
}
.upclose {
font-size:2vh;
}
/*main*/
section#main{
position:fixed;
top:0;
bottom:0;
overflow:hidden;
left:25%;
width:75%;
padding-left:1%;
}
#content{
padding-top:1%;
overflow-y:auto;
overflow-x:hidden;
}
.logo{
display:block;
width:70%;
}
[class*="col"]{
width:20.75%;
}
.col1 {
width:17%;
}
.col6 {
width:62.25%;
}
[class*="col"] p {
font-size:calc(8px + 0.6vw);
}
.subrow p{
padding-right:7%;
}
p.subcl3{
padding-right:5%;
}
.row{
border-bottom-width:5px;
}
#categories{
border-bottom-width:7px;
width:99%;
margin-left:0;
}
#categories h2{
font-size:calc(12px + 0.6vw);
}
}
/* --------- 6th case --------- */
@media all and (max-height: 450px) {
[id*="att-video"] > .wrap{
width:400px;
}
.upbar{
height:7%;
}
}
/* hiding years */
div#year2020 { display:none; }

197
css/pages.css
Unescape Escape View File

@ -1,197 +0,0 @@
@import url("main.css");
body{
color:black;
}
#wrapper {
background-color:white;
}
/*header*/
#project-title {
font-size:calc(17px + 1.5vw);
line-height:135%;
margin-bottom:1%;
}
#student-name {
margin-bottom:0;
font-weight:normal;
font-size:calc(10px + 0.6vw);
}
a#student-page{color:black;}
#hleft-text{
overflow-y:auto;
overflow-x:hidden;
padding-right:1%;
box-sizing:border-box;
cursor:default;
}
#ihtp{
margin-top:3%;
width:80%;
color:black;
}
#about-student{
width:95%;
color:#2f2f2f;
font-size:calc(8px + 0.5vw);
line-height: 130%;
font-style:italic;
}
hr{
width:50%;
color:#ccc;
}
a.show{
font-size:calc(13px + 1.5vw);
}
a#home {
font-size:calc(7px + 1.5vw);
color:black;
text-decoration:underline;
text-decoration-color:#0f0;
}
a#home:hover{
text-decoration:overline;
text-decoration-color:#f3ca1b;
}
#project-link{
color:black;
}
/*section*/
section#main{
overflow:auto;
padding-left:1.5%;
}
#galleries{
padding-top:3%;
}
.gal-title{
font-size:calc(12px + 0.7vw);
}
#publist {
line-height:155%;
}
#galleries a{
color:black;
}
.workimg{
max-width: 47%;
height: auto;
padding: 0.5% 0.5% 0.5% 0;
}
@media all and (min-width: 600px) and (max-width: 720px){
#about-student{
font-size:calc(8px + 1.7vh);
line-height:130%;
}
}
@media all and (min-width: 720px) and (max-width: 992px){
/*header*/
#about-student{
font-size:calc(10px + 1.7vh);
line-height:130%;
}
}
@media all and (max-width: 600px){
/*header*/
#about-student{
font-size:calc(7px + 1.5vh);
line-height:130%;
}
}
@media all and (max-width: 992px){
#homebttn{
display:none;
}
/*header*/
#sub{
width:30%;
padding-right:5%;
white-space:normal;
}
#student-name{
text-align:right;
line-height:125%;
}
#ihtp, #about-student{
color:white;
}
#getback {
padding-bottom:5%;
}
}
@media all and (min-width: 992px){
#homebttn{
background-color:white;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:3%;
margin-top:0.7%;
padding:0.3% 0 0.4% 0.3%;
font-size:calc(7px + 0.6vw);
z-index:100;
}
section#main{
width:74%;
left:26%;
}
#galleries{
padding-left:1%;
}
}

16
empty.html
Unescape Escape View File

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src='reasonable.jpg' width='50%'/>
</body>
</html>

BIN
img/2018_grad_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
img/2018_grad_logo_inverted.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
img/ex1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 115 KiB

BIN
img/ex2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

BIN
img/ex3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
img/logo.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
img/no_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1023 B

BIN
img/xpub_logo_2019.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

2
index.html
Unescape Escape View File

@ -375,7 +375,7 @@
</div> </div>
<div class='subrow'> <div class='subrow'>
<p class='subcl1'>Zalán Szakács</p> <p class='subcl1'>Zalán Szakács</p>
<p class='subcl2'><a href='2019/Zalan_Szakacs/index.html' target="_blank" class='ext'>Eigengrau</a></p> <p class='subcl2'><a href='eigengrau/' target="_blank" class='ext'>Eigengrau</a></p>
<p class='subcl3'><!--a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2018-att6' class='int'>IMG</a--></p> <p class='subcl3'><!--a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2018-att6' class='int'>IMG</a--></p>
</div> </div>
</div> </div>

16
instant-warnet/empty.html
Unescape Escape View File

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XPUB</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<img src='reasonable.jpg' width='50%'/>
</body>
</html>

BIN
instant-warnet/img/Instant-Warnet-02-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 982 KiB

BIN
instant-warnet/img/Instant-Warnet-02-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 950 KiB

BIN
instant-warnet/img/Instant-Warnet-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 751 KiB

BIN
instant-warnet/img/Instant-Warnet-04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 875 KiB

65
instant-warnet/index.html
Unescape Escape View File

@ -1,65 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instant Warnet</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper' style="background-image: linear-gradient(to bottom left, rgba(255,255,255,1), rgba(222,244,255,0.5), rgba(255,0,180,0.3))"></div>
<a href='../' id='homebttn' class='ext'> << home </a>
<header>
<h1 id='project-title'>Instant Warnet <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.tashberting.com' target='_blank' class='ext' id='student-page'>Natasha Berting</a></h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<div id='about-project'>
<p><i>Instant Warnet</i> is a live-action role-playing game which pokes and prods at networks of harassment on social media. In this collective performance, you are invited to assume fictional characters on the massively multiplayer arena of Instagram, with the goal of disrupting and defusing some of its more hostile practices and spaces. <br><br> Composed entirely of found tactics, scenarios and language used by the world’s most cunning trolls, buzzers and campaign operatives, Instant Warnet is an experiment which aims to flip the script on online toxicity. Instead of looking away or logging off, players are encouraged to live vicariously through their characters, using performance as a mode of talking back and reclaiming space on the platform.
<br><br> <i>Instant Warnet</i> (2019) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.<br><br></p>
</div>
<hr align='left'>
<div id='about-student'>
<p> Natasha Berting (Cirebon, 1992) is a media artist and writer. Her work often explores the ways that netizenship and citizenship inform each other, revealing intersections and facilitating encounters between art, technology and culture. </p>
</div>
<span id='getback'> go back </span>
</div>
</div>
</a>
</div>
</header>
</p></div>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/warnet' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/Instant-Warnet-02.jpg" class='workimg'/>
<img src="img/Instant-Warnet-04.jpg" class='workimg'/>
<img src="img/Instant-Warnet-02-01.jpg" class='workimg'/>
<img src="img/Instant-Warnet-02-04.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/Berting-Making-Silences-On-Social-Media.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
</ul>
</ul>
</div>
</section>
</div>
</body>
</html>

BIN
instant-warnet/pdf/Berting-Making-Silences-On-Social-Media.pdf
View File

Binary file not shown.

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/examples.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 MiB

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/food_waste.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 MiB

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/making.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 MiB

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/making_huel.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 MiB

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/order.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 760 KiB

BIN
is-it-time-to-eat-or-is-there-no-more-time-to-eat/img/unlike_food.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 MiB

80
is-it-time-to-eat-or-is-there-no-more-time-to-eat/index.html
Unescape Escape View File

@ -1,80 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iitteoitnmtte</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper' style="background-color: #f1f1f1"></div>
<a href='../' id='homebttn' class='ext'> << home </a>
<header>
<h1 id='project-title'>Is is time to eat, or is there no more time to eat? <a href='#hleft-text' class='show'> ⓘ</a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h2 id='student-name'><a href='http://www.alicestrete.me' target='_blank' class='ext' id='student-page'>Alice Strete</a></h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<div id='about-project'>
<p><i>Is it time to eat, or is there no more time to eat</i> is an extensive review of the most prominent techno-solutionist creation in terms of food. It manifests itself into a desktop film and an essay, alongside an archive of images, articles, videos and more, which together deconstruct the culture of future food, born in the valley of technological quick-fixes.
</p>
<p>
The work takes a closer look at the culture around the techno-solutionist ideology, and the role of meal replacements within societies which value the authoritative roles of tech innovators and their potential to impact the way humans live.</p>
</p>
<p>
<br>Alice Strete, <i>Is it time to eat, or is there no more time to eat</i>, July 2019
</p>
<p>
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License http://artlibre.org/licence/lal/en/
</p>
<p>
<br><br></p>
</div>
<hr align='left'>
<div id='about-student'>
<p> Alice Strete (1991, RO) is a researcher and, otherwise, person interested in the intricate relationship between humans and the technologies they surround themselves with. Her work is currently focusing on food. </p>
</div>
<span id='getback'> go back </span>
</div>
</div>
</a>
</div>
</header>
</p></div>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://food.alicestrete.me' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/examples.gif" class='workimg'/>
<img src="img/making_huel.gif" class='workimg'/>
<img src="img/unlike_food.gif" class='workimg'/>
<img src="img/food_waste.gif" class='workimg'/>
<img src="img/order.JPG" class='workimg'/>
<img src="img/making.JPG" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/your-body-will-make-itself-heard.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
</ul>
</ul>
</div>
</section>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save