XPUB
/
xpub.nl
6
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

merged joak's changes into call.html + added padding on the intro text for readibility + turned open day buttons into normal text also for readibility and simplicity of the whole page + made font size slightly smaller + enabled the random font picking for this version

Browse Source
master
mb 12 months ago
parent c957f4e23d
commit 5ce799d287
2 changed files with 184 additions and 178 deletions
Show Stats Download Patch File Download Diff File

46
2024/call/call.css
Unescape Escape View File

@ -4,16 +4,20 @@ body{
justify-content: center; justify-content: center;
margin: 0; margin: 0;
} }
div#start{
/* text-align: left; */
padding: 0 16vw;
margin: 1em 0 2em 0;
}
form{ form{
max-width: 1200px; max-width: 1200px;
margin: 1em auto; margin: 0 auto;
padding: 1em; padding: 1em;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
} }
form *{ form *{
font-size: 20px; font-size: 16px;
} }
form h1{ form h1{
font-size: 100%; font-size: 100%;
@ -22,11 +26,13 @@ fieldset{
background: #fff; background: #fff;
} }
form select { form select {
padding: 0.5em 0 0.5em 0.5em; padding: 0.75em 0 0.75em 0.5em;
margin: 0 0 0.75em 0; margin: 0 0 0.75em 0;
}
form button{
padding: 0.75em 1em;
} }
form div#dropdowns { form div#dropdowns {
text-align: right;
line-height: 1; line-height: 1;
} }
form div#dropdown-options.hide{ form div#dropdown-options.hide{
@ -35,20 +41,9 @@ form div#dropdown-options.hide{
form div#dropdowns div.row{ form div#dropdowns div.row{
margin: 0em 0; margin: 0em 0;
} }
form button a,
form button a:visited{
color: black;
text-decoration: none;
}
form div#info{ form div#info{
padding: 0 12.5vw; padding: 0 12.5vw;
} }
.drop{
position:absolute;
top:-10px;
animation: falling 5.5s linear infinite;
pointer-events: all;
}
marquee{ marquee{
text-align: center; text-align: center;
@ -58,6 +53,14 @@ marquee button{
margin-bottom: 1em; margin-bottom: 1em;
} }
a,
a:visited{
color: black;
}
button a{
text-decoration: none;
}
div#rain1, div#rain2{ div#rain1, div#rain2{
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
@ -78,10 +81,15 @@ div#rain1, div#rain2{
} }
} }
.drop{
position:absolute;
top:-10px;
animation: falling 5.5s linear infinite;
pointer-events: all;
}
input.sinus{ input.sinus{
animation: sinus 5.5s ease-in-out infinite; animation: sinus 5.5s ease-in-out infinite;
/* width: 30px; */
/* height: 30px; */
} }
@keyframes sinus @keyframes sinus
{ {

316
2024/call/call.html
Unescape Escape View File

@ -8,170 +8,169 @@
<body> <body>
<div id="rain1"></div> <div id="rain1"></div>
<form> <form>
<fieldset> <fieldset>
<legend>XPUB</legend> <legend>XPUB</legend>
<div id="dropdowns"> <div id="start">
<div id="dropdown-options" class="hide"> The <a href="https://xpub.nl/" target="_blank">Master Experimental Publishing</a> at the <a href="https://www.pzwart.nl/" target="_blank">Piet Zwart Institute</a> in Rotterdam (NL) is a two-year master focused on the acts of making things public and creating publics in the age of post-digital networks. The course is centered around a variety of questions, such as:
<div class="row">
<span id="question-div"></span>
<select>
<!-- who -->
<option></option>
<option>(cross) makers</option>
<option>collectives</option>
<option>administrators</option>
<option>notebooks</option>
<option>bodies</option>
<option>social justice warriors</option>
<option>teletype machines</option>
<option>gardeners</option>
<option>oracles</option>
<option>archives</option>
<option>servers</option>
<option>bots</option>
<option>note takers</option>
</select>
<select class="verb">
<!-- what -->
<option></option>
<option>explore</option>
<option>address</option>
<option>hack</option>
<option>whisper</option>
<option>perform</option>
<option>situate</option>
<option>jam with</option>
<option>research</option>
<option>gender</option>
<option>build</option>
<option>explore</option>
<option>repair</option>
<option>read</option>
<option>annotate</option>
<option>write</option>
<option>underline</option>
<option>transmit</option>
<option>receive</option>
<option>improvise</option>
<option>resonate</option>
<option>create</option>
<option>print</option>
<option>solder</option>
<option>make</option>
<option>queer</option>
</select>
<select>
<!-- how -->
<option></option>
<option>interactive stories</option>
<option>tools</option>
<option>stories</option>
<option>forms</option>
<option>DIY electronics</option>
<option>training programs</option>
<option>letters</option>
<option>spreadsheets</option>
<option>printers</option>
<option>conflicts</option>
<option>conversations</option>
<option>social shelves</option>
<option>minor stories</option>
<option>bureaucracies</option>
<option>code documentation</option>
<option>memes</option>
<option>modular synths</option>
<option>counter-action strategies</option>
<option>first-aid kits</option>
<option>magical answers</option>
<option>books</option>
<option>rain</option>
<option>e-ink displays</option>
<option>bicycles</option>
<option>typewriters</option>
<option>interviews</option>
<option>protocols</option>
<option>video games</option>
<option>API's</option>
<option>vernacular tools</option>
<option>backdoors</option>
<option>wikidata</option>
<option>zines</option>
<option>terminals</option>
<option>printers</option>
<option>pen plotters</option>
</select>
at
<select>
<!-- where -->
<option></option>
<option>publishing houses</option>
<option>art collectives</option>
<option>festivals</option>
<option>algoraves</option>
<option>archives</option>
<option>bookshops</option>
<option>squats</option>
<option>print workshops</option>
<option>public benches</option>
<option>libraries</option>
<option>media labs</option>
<option>telecom musea</option>
<option>community radio stations</option>
<option>zine festivals</option>
<option>workshops</option>
<option>free software organisations</option>
<option>experimental music nights</option>
<option>plotter parties</option>
<option>breakfast clubs</option>
</select>
?
</div> </div>
</div> <!-- #options --> <div id="dropdowns">
</div> <!-- #dropdowns --> <div id="dropdown-options" class="hide">
<div id="info"> <div class="row">
<p> <span id="question-div"></span>
The <a href="https://xpub.nl/" target="_blank">Master Experimental Publishing</a> at the <a href="https://www.pzwart.nl/" target="_blank">Piet Zwart Institute</a> in Rotterdam (NL) is a two-year master focused on the acts of making things public and creating publics in the age of post-digital networks. <select>
</p> <option></option>
<p>Application deadlines:</p> <option>How can</option>
<p> <option>When do</option>
March 4, 2023 (non-EU + EU)<br> <option>Where can</option>
May 8, 2023 (EU)<br> <option>Why do</option>
<br> </select>
<button><a href="https://www.pzwart.nl/experimental-publishing/apply/" target="_blank">Apply</a></button> <select>
<br> <!-- who -->
</p> <option></option>
</div> <!-- #info --> <option>(cross) makers</option>
<marquee behavior="alternate"> <option>collectives</option>
<br> <option>administrators</option>
<br> <option>notebooks</option>
<button><a href="mailto:l.j.drost-robbins@hr.nl?subject=Open Day (online)&amp;body=Hello, I will join the online open day on the February 6th on 10:00 CET or 16:00 CET" target="_blank">Open Day (online) - February 6th, 2024</a></button> <option>bodies</option>
<br> <option>social justice warriors</option>
<button><a href="https://www.pzwart.nl/blog/2023/10/10/open-day-saturday-29-october-2023/" target="_blank">Open Day (IRL) - February 10th, 2024</a></button> <option>teletype machines</option>
<br> <option>gardeners</option>
<br> <option>oracles</option>
</marquee> <option>archives</option>
</fieldset> <option>servers</option>
<option>bots</option>
<option>note takers</option>
</select>
<select class="verb">
<!-- what -->
<option></option>
<option>explore</option>
<option>address</option>
<option>hack</option>
<option>whisper</option>
<option>perform</option>
<option>situate</option>
<option>jam with</option>
<option>research</option>
<option>gender</option>
<option>build</option>
<option>explore</option>
<option>repair</option>
<option>read</option>
<option>annotate</option>
<option>write</option>
<option>underline</option>
<option>transmit</option>
<option>receive</option>
<option>improvise</option>
<option>resonate</option>
<option>create</option>
<option>print</option>
<option>solder</option>
<option>make</option>
<option>queer</option>
</select>
<select>
<!-- how -->
<option></option>
<option>interactive stories</option>
<option>tools</option>
<option>stories</option>
<option>forms</option>
<option>DIY electronics</option>
<option>training programs</option>
<option>letters</option>
<option>spreadsheets</option>
<option>printers</option>
<option>conflicts</option>
<option>conversations</option>
<option>social shelves</option>
<option>minor stories</option>
<option>bureaucracies</option>
<option>code documentation</option>
<option>memes</option>
<option>modular synths</option>
<option>counter-action strategies</option>
<option>first-aid kits</option>
<option>magical answers</option>
<option>books</option>
<option>rain</option>
<option>e-ink displays</option>
<option>bicycles</option>
<option>typewriters</option>
<option>interviews</option>
<option>protocols</option>
<option>video games</option>
<option>API's</option>
<option>vernacular tools</option>
<option>backdoors</option>
<option>wikidata</option>
<option>zines</option>
<option>terminals</option>
<option>radios</option>
<option>pen plotters</option>
</select>
<select>
<!-- in -->
<option></option>
<option>in</option>
<option>on</option>
<option>about</option>
<option>with</option>
<option>at</option>
</select>
<select>
<!-- where -->
<option></option>
<option>publishing houses</option>
<option>art collectives</option>
<option>festivals</option>
<option>algoraves</option>
<option>archives</option>
<option>bookshops</option>
<option>squats</option>
<option>print workshops</option>
<option>public benches</option>
<option>libraries</option>
<option>media labs</option>
<option>telecom musea</option>
<option>community radio stations</option>
<option>zine festivals</option>
<option>workshops</option>
<option>git repositories</option>
<option>performances</option>
<option>plotter parties</option>
<option>breakfast clubs</option>
</select>
?
</div> <!-- .row -->
</div> <!-- #options -->
</div> <!-- #dropdowns -->
<div id="info">
<p>Application deadlines:</p>
<p>
March 4, 2024 (non-EU + EU)<br>
May 8, 2024 (EU)<br>
</p>
<p>Open days:</p>
<p>
<a href="mailto:l.j.drost-robbins@hr.nl?subject=Open Day (online)&amp;body=Hello, I will join the online open day on the February 6th on 10:00 CET or 16:00 CET" target="_blank">February 6, 2024</a> (online)<br>
<a href="https://www.pzwart.nl/blog/2023/10/10/open-day-saturday-29-october-2023/" target="_blank">February 10, 2024</a> (IRL)<br>
</p>
<p>
<br>
<button><a href="https://www.pzwart.nl/experimental-publishing/apply/" target="_blank">Apply</a></button>
</p>
</div>
</fieldset>
</form> </form>
<div id="rain2" style="z-index: 1;"></div> <div id="rain2" style="z-index: 1;"></div>
<script> <script>
var options = document.getElementById("options"); for (const question of Array(10)) {
var questions = [
"How can",
"When do",
"Where can",
"Why do",
"How can",
"When do",
"Where can",
"Why do",
];
questions.forEach(function(question, i){
var question_div = document.getElementById("question-div");
question_div.innerHTML = question;
var dropdown_options = document.getElementById("dropdown-options"); var dropdown_options = document.getElementById("dropdown-options");
var dropdowns_div = document.getElementById("dropdowns"); var dropdowns_div = document.getElementById("dropdowns");
dropdowns_div.innerHTML += dropdown_options.innerHTML; dropdowns_div.innerHTML += dropdown_options.innerHTML;
}); };
setInterval(dropping, 200); setInterval(dropping, 200);
function dropping(){ function dropping(){
@ -185,8 +184,7 @@
var font = pickfont(); var font = pickfont();
dropdown.style.width = "auto"; dropdown.style.width = "auto";
dropdown.style.color = color; dropdown.style.color = color;
// dropdown.style.backgroundColor = backgroundcolor; dropdown.style.fontFamily = font;
// dropdown.style.fontFamily = font;
} }
function pickfont(){ function pickfont(){
fonts = [ fonts = [

Write Preview
Loading…
Cancel
Save