azoth azoth azoth azoth azoth azoth azoth

master
Stephen Kerr 1 year ago
parent 7ebec52559
commit a3feef5dc6

@ -9,7 +9,7 @@ from shutil import copyfile, move
from datetime import datetime from datetime import datetime
UPLOAD_FOLDER = os.path.join("static", "img") UPLOAD_FOLDER = os.path.join("static", "img")
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'mp3', 'm4a', 'ogg', 'ogv', 'mp4', 'mkv'} ALLOWED_EXTENSIONS = {'txt', 'html', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'mp3', 'm4a', 'ogg', 'ogv', 'mp4', 'mkv'}
def allowed_file(filename): def allowed_file(filename):
return '.' in filename and \ return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@ -0,0 +1,52 @@
---------------------------------------------------------------------------------------------------
Hexalogue
(writings by) The Computercations People to Come
---------------------------------------------------------------------------------------------------
Introduction
---------------------------------------------------------------------------------------------------
This booklet is a trace, a memory, a script, a score, a single item, a collection. Six people coincided to discuss binaries, definitions, explanations, times, circlusions, pebbles. Aglaia Petta, Boyana Stoilova, Irmak Ertaş,
Jara Rocha, Martino Morandi, Stephen Kerr. Six steps: individual writing produced six texts, collective rewriting braided them back into eachother.
Six voices separated them once more, only to be rejoined in a single audio recording. Six speakers pull the wormball apart yet again, until this publication inevitably entangles.
But there is always the ghost, there are after all seven planets in total. Your gravity pulls from a distance that we cannot close, but you will take the seventh step: continue, complete, open, adapt, forget, remember. Do you remember? Will you remember for us?
Hexalogue was produced in June 2023 as part of TTY, special issue 21 of the experimental publishing masters at piet zwart institute, rotterdam. For more see issue.xpub.nl/21

@ -0,0 +1,61 @@
<html>
<head>
<link rel="stylesheet" href="http://localhost:5000/static/style.css">
<link rel="stylesheet" href="http://localhost:5000/static/style-iframe.css">
</head>
<body>
---------------------------------------------------------------------------------------------------
Hexalogue
(writings by) The Computercations People to Come
---------------------------------------------------------------------------------------------------
Introduction
---------------------------------------------------------------------------------------------------
This booklet is a trace, a memory, a script, a score, a single item, a collection. Six people coincided to discuss binaries, definitions, explanations, times, circlusions, pebbles. Aglaia Petta, Boyana Stoilova, Irmak Ertaş,
Jara Rocha, Martino Morandi, Stephen Kerr. Six steps: individual writing produced six texts, collective rewriting braided them back into eachother.
Six voices separated them once more, only to be rejoined in a single audio recording. Six speakers pull the wormball apart yet again, until this publication inevitably entangles.
But there is always the ghost, there are after all seven planets in total. Your gravity pulls from a distance that we cannot close, but you will take the seventh step: continue, complete, open, adapt, forget, remember. Do you remember? Will you remember for us?
Hexalogue was produced in June 2023 as part of TTY, special issue 21 of the experimental publishing masters at piet zwart institute, rotterdam. For more see issue.xpub.nl/21
</body>
</html>

@ -0,0 +1,8 @@
:root{
--color2: #ffc;
--color1: #103;
}
body{
overflow: hidden;
font-size: 0.6em;
}

@ -0,0 +1,72 @@
:root{
--color1: #ffc;
--color2: #103;
}
@font-face {
font-family: "TeleType";
src: url("./static/css/teletype.ttf");
}
body{
clear: both;
margin: 2rem;
font-family: "TeleType", 'Courier New', Courier, monospace;
line-height: 1.3;
text-transform: uppercase;
color: var(--color1);
background-color: var(--color2);
}
a{
color: var(--color1);
text-decoration: none;
}
a:hover{opacity: 0.7;}
.abraxas{
text-align: center;
}
h1,h2,h3,h4,h5,h6,p{
margin: 0 0 1rem;;
font-size: 1rem;
font-weight: normal;
}
img,video,.divaudio,audio, .abraxas,iframe{
display:inline-block;
width: calc( 100% / 7 );
margin: 0;
padding: 0;
object-fit: cover;
height: calc( 100% / 6) ;
overflow: hidden;
border: none;
}
.intro{
padding-right: 2rem;
margin: 1rem 0;
width: 100%;
flex: 1;
}
.intro-outer{
width: 100%;
display: flex;
gap: 1rem;
}
a{position:relative;
z-index:2;}
video,audio{position:relative; z-index:1;}
audio{height:auto;position:absolute;}
img:hover{
filter: invert(1);
}
::selection{
color: var(--color2);
background-color: var(--color1);
}
@media screen and (min-width: 768px){
p{font-size: 1rem;}
body{font-size: 1.5rem;}
}
@media screen and (max-width: 767px){
.intro-outer{flex-direction: column;}
body{font-size: 3rem;}
}

Binary file not shown.

@ -1,27 +1,26 @@
<html> <html>
<head> <head>
<style> <meta name="viewport" content="width=device-width, initial-scale=1">
body{ <title>OVERLAP</title>
clear: both; <meta name="description" content="WE HAVE A BAG FULL OF PLANETS, STARS, OUR FAVORITE MOMENTS, DARKEST FEARS, BEST INTENTIONS AND WORST FEELINGS.">
margin: 0; <link rel="stylesheet" href="./static/style.css">
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
img,video,.divaudio,audio{
display:inline-block;
width: calc( 100% / 7 );
margin: 0;
padding: 0;
object-fit: cover;
height: calc( 100% / 6) ;
}
a{position:relative z-index:2;}
video,audio{position:relative; z-index:1;}
audio{height:auto;position:absolute;}
img:hover{
filter: invert(1);
}
</style>
</head> </head>
<body> <body>
<div class="intro-outer">
<div class="intro">
<h1>Overlap</h1>
</div>
<div class="intro">
<p>
We have a bag full of planets, stars, our favorite moments, darkest fears, best intentions and worst feelings. We contain them and sometimes they overlap each other. Sometimes we are happy and sad; sometimes we forget why we were even mad in the beginning. But we also share some of these moments or galaxies that reside in our bags with other souls. We remember the same moment through a different window. We remember that day as cold, whereas they remember it as warm. One by one, these moments create one snapshot of the reality. The reality we create collectively. We sometimes trust our memories and our memories always trust us.
</p>
<p>
We overlap, we crawl through memory lane. We go silently through the gates of space and time, we exchange our sights with each other and for one spectacular moment, all the stars in our bags spill and we get to see through each others eyes. Our bag is now in the middle, its ready for you to discover and see the networks of our minds, make knots in the middle or intervene with what we call a collective memory of a few xpubbers.
</p>
</div>
</div>
<div class="theatre">
{% for file in range (0,42) -%} {% for file in range (0,42) -%}
{%- set filez = '%02d' % file -%} {%- set filez = '%02d' % file -%}
{%- set filename = lastfiles[file] -%} {%- set filename = lastfiles[file] -%}
@ -41,16 +40,41 @@
<source src="{{ filename }}"> <source src="{{ filename }}">
</video> </video>
{%- endif -%} {%- endif -%}
{%- if 'html' in filename -%}
<iframe src="{{ filename }}" ></iframe>
{%- endif -%}
</a> </a>
{%- endfor %} {%- endfor %}
<!-- <div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>b</h4></div><div class="abraxas"><h4>r</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>x</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>s</h4></div>
<form action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data"> </div>
<label for="tile">Choose an image to upload:</label> <div class="intro-outer">
<input type="file" <div class="intro">
id="tile" name="tile" required> <h1>* *<br>*</h1>
<label for="overwrite"> and a position for it to go (number from 00 to 41):</label> </div>
<input type="text" name="overwrite" required> <div class="intro">
<input type="submit" value="Upload"> <p>
</form> --> Overlap was produced in June 2023 as part of TTY, special issue 21 of the experimental publishing masters at piet zwart institute, rotterdam. For more see <a href="https://issue.xpub.nl/21" target="_blank">issue.xpub.nl/21</a>
</p>
</div>
</div>
</body> </body>
<script >
$(document).ready(function() {
$("iframe").each(function() {
var iframe = $(this);
var pos = iframe.position();
var div = document.createElement("div");
var s = div.style;
s.position = "absolute";
s.left = pos.left + "px";
s.top = pos.top + "px";
s.height = iframe.height() + "px";
s.width = iframe.width() + "px";
iframe.parent().append(div);
$(div).data("src", iframe.attr("src")).click(function() {
window.location = $(this).data("src");
});
});
});
</script>
</html> </html>

@ -1,5 +1,10 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OVERLAP</title>
<meta name="description" content="WE HAVE A BAG FULL OF PLANETS, STARS, OUR FAVORITE MOMENTS, DARKEST FEARS, BEST INTENTIONS AND WORST FEELINGS.">
<link rel="stylesheet" href="http://localhost:5000/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style> <style>
img,video,audio{ img,video,audio{
width:25%; width:25%;
@ -17,9 +22,12 @@
{% if 'mp4' in file or 'mkv' in file or 'ogv' in file %} {% if 'mp4' in file or 'mkv' in file or 'ogv' in file %}
<video src="{{ file|replace('./', '/breadcube/overlap/') }}" controls></video> <video src="{{ file|replace('./', '/breadcube/overlap/') }}" controls></video>
{% endif %} {% endif %}
{%- if 'html' in filename -%}
<iframe src="{{ file|replace('./', '/breadcube/overlap/') }}" ></iframe>
{%- endif -%}
{% endfor %} {% endfor %}
<form action="{{ url_for('upload2_file', image=image) }}" method="POST" enctype="multipart/form-data"> <form action="{{ url_for('upload2_file', image=image) }}" method="POST" enctype="multipart/form-data">
<label for="tile">Choose an image to upload:</label> <label for="tile">Choose a file to upload:</label>
<input type="file" <input type="file"
id="tile" name="tile" required> id="tile" name="tile" required>
<input type="submit" value="Upload"> <input type="submit" value="Upload">

Loading…
Cancel
Save