revert old commit
@ -0,0 +1,16 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 505 KiB |
@ -0,0 +1,26 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
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.
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 191 KiB |
@ -0,0 +1,73 @@
|
|||||||
|
<!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>
|
||||||
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,69 @@
|
|||||||
|
<!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>
|
||||||
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 58 KiB |
@ -0,0 +1,73 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,922 @@
|
|||||||
|
@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; }
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
@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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!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>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1023 B |
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,16 @@
|
|||||||
|
<!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>
|
||||||
|
After Width: | Height: | Size: 982 KiB |
|
After Width: | Height: | Size: 950 KiB |
|
After Width: | Height: | Size: 751 KiB |
|
After Width: | Height: | Size: 875 KiB |
|
After Width: | Height: | Size: 6.3 MiB |
|
After Width: | Height: | Size: 5.6 MiB |
|
After Width: | Height: | Size: 6.3 MiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 760 KiB |
|
After Width: | Height: | Size: 9.4 MiB |
@ -0,0 +1,80 @@
|
|||||||
|
<!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>
|
||||||