all projects

open/index.html

@@ -26,20 +26,23 @@
         <div id="dragZone" class="dragzone">
 
             <div id="program" class="corpi ui-widget-content draggable visible">
-                    <h1>10 Sept 21</h1>
                     <h1>Program</h1>
                     <li>12:00-17:00:</li>
-                        <ul>XPUB Bookshop</ul>
+                        <ul><b>XPUB Bookshop</b></ul>
                     <li>12:00-14:00: XPUB3</li>
-                        <ul>HAM DISTRO (online + offline)</ul>
+                        <ul><b>HAM DISTRO</b> <br>(online + offline)</ul>
                     <li>14:00-15:00:</li>
-                        <ul>OUIJA SEANCE every 20 mins with Simon (online + offline)</ul>
+                        <ul><b>OUIJA SEANCE</b> <br>(every 20 mins online + offline)</ul>
                     <li>15:00-16:00: XPUB2</li>
-                        <ul>Clara - Blank page syndrome (offline)</ul>
+                        <ul><b>Blank page syndrome</b> (offline)</ul>
                     <li>16:00-17:00: XPUB1 </li>
-                        <ul>Lingo Bingo (offline)</ul>
+                        <ul><b>Lingo Bingo</b> <br>(offline)</ul>
-                        <ul>Civil Entertainment Sirens® </ul>
+                        <ul><b>Civil Entertainment Sirens®</b></ul>
-                    <li>Oh, look at the wifi: words fly around!</li>    
+                    <li>During the whole event: </li>
+                    
+                        <ul><b>Oh, look at the wifi: words fly around!</b></ul>
+                        <ul><b>Ilinx</b></ul>     
+                        <ul><b>Words Map</b></ul> 
                     <br>
             </div>
         
@@ -51,6 +54,7 @@
 
         <div id="colophon">
             <h1>windows.open(Welcome)</h1>
+            <p id="colophonGreetings">We are pleased to invite you to <b>window.open()</b>, a day-long festival held by students and alumni of the Master of <b>Experimental Publishing</b> (<b>XPUB</b>) taking place at <b>Page Not Found</b> (Den Haag) on Friday 10th September 2021.</p>
             <p><b>Web Architects: </b><br class="onlyMobile">Tancre and Poni</p>
             <p><b>Urban Planners: </b><br class="onlyMobile">Clara, Louisa, Simon</p>
 

open/scripts/App.js

@@ -22,7 +22,7 @@ $(document).ready(function(){
 
         $('#dragZone' ).append(`
             <div id="${corpus['id']}" class="corpi ui-widget-content draggable" >
-                    <h1>${corpus['title']}</h1>
+                    <h1>${corpus["glyph"]} ${corpus['title']}</h1>
                     <p>${corpus['content']}</p>
                     <button class="closable">X</button>
             </div>
@@ -39,6 +39,7 @@ $(document).ready(function(){
 
     // Start mouse UI
     const dragResize = new DragResizeClose(zIndex);
+    $('#greetings').fadeIn()
 });
 
 

open/scripts/DragResizeClose.js

@@ -23,7 +23,7 @@ class DragResizeClose {
         
         const randomCorrectedHeight = (sizeWindow, sizeBox) => {
             const corrected = sizeWindow - parseInt(sizeBox);
-            return getRndInteger(105, corrected)
+            return getRndInteger(105, corrected-150)
         }
         
         const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;

open/scripts/Windows.js

@@ -3,7 +3,7 @@ const corpi = {
         id:'greetings',
         glyph: '📌',
         title: 'let Greetings',
-        content: 'We are pleased to invite you to <b>window.open()</b>, a day-long festival, held by students and alumni of the Master of <b>Experimental Publishing</b> (<b>XPUB</b>) at <b>Page Not Found</b>.'
+        content: 'We are pleased to invite you to <b>window.open()</b>, a day-long festival held by students and alumni of the Master of <b>Experimental Publishing</b> (<b>XPUB</b>) taking place at <b>Page Not Found</b> (Den Haag) on Friday 10th September 2021.'
     },
     1: { 
         id:'xpub',
@@ -25,8 +25,56 @@ const corpi = {
     }, 
     4: {
         id: 'pads',
-        glyph: '&#128240;',
+        glyph: '&#128220;',
         title: 'Active Pads',
-        content: '<a href="https://pad.xpub.nl/p/PNF_ouija_seance" target="_blank"></a>',
+        content: ''
+        },
+    5: {
+        id: 'HAMDISTRO',
+        glyph: '&#127828;',
+        title: 'HAM DISTRO',
+        content: 'As a launch activity, the XPUB class of 2019-2020 invites the general, socially-distant public to join them in a final gathering organised in collaboration with Page Not Found. For an afternoon we will inhabit the cells of an collaborative online spreadsheet. This list is the blueprint for a circulation plan, with names and addresses of possible recipients of the Collectiveioning publication. The sum results also function as a future XPUB resource for other batches of students (and publishers at large) concerned with not just how to print but how to circulate. The archival formula of HAM DISTRO LIST will be established on the day itself, with values to be determined by those present. This does not prevent future contributors to adapt and modify this matrix as they see fit.'
+        },
+    6: {
+        id: 'OUIJASEANCE',
+        glyph: '&#127538;',
+        title: 'OUIJA SEANCE',
+        content: 'Saturn is traditionally understood as a malefic planet — a reflection on issues related to power, pressure, and control. When Saturn is involved, it is all about crisis in general, limitation; like eating your children is the only way to cope <br><br>Because there\'s such a charge with Saturn, it\'s a friend to look at to build-up defences and form ways to cope. But there is no fast and easy way of making a friend of Saturn. <br><br>Join offline for a curated read and conversation around Saturn, where we’ll attempt together to re-actualize the image of this age-old villain by digging into its oldest mythologies. <br><br>'        
+    },
+    7: {
+        id: 'Blankpagesyndrome',
+        glyph: '&#128221;',
+        title: 'Blank page syndrome',
+        content: '????'
+        },
+    8: {
+        id: 'LingoBingo',
+        glyph: '&#129518;',
+        title: 'Lingo Bingo',
+        content: 'Feeling lucky? Shoot your shot during our XPUB1 Bingo! <br><br>We will roll the drum for you, and with every word you stripe off your card, you are getting closer to winning one of our hot and very exclusive prices from our previous issues!',
+        },
+    9: {
+        id: 'CivilEntertainment',
+        glyph: '&#128225;',
+        title: 'Civil Entertainment',
+        content: 'Civil Entertainment Sirens® consists of a series of polyphonic textures (drone) performed from a Web oscillator instrument currently under development. This audiovisual performance is willing to explore different combinations of sound frequencies for your own entertainment. Warning: Civil Entertainment Sirens® models are beta versions and have not yet been submitted or/and approved by any local agency or government.'    
+    },
+    10: {
+        id: 'Wordsflyaround',
+        glyph: '&#128038;',
+        title: 'Words fly around',
+        content: '???????'
+        },
+    11: {
+        id: 'Ilinx',
+        glyph: '&#128026;',
+        title: 'Ilinx',
+        content: 'Ilinx is an online experiment that explores the relationship between computation and humans as a phenomenal world extending the existential search for knowledge.<br><br>The research around the project was done through reading, writing and re-editing of texts and software, theory and fiction.These formed a collection of materials to be interconnected with each other,  creating a map and navigating through it as the work progressed.<br><br>The result is an explorable diary and labyrinth where humans and machines, texts and codes melt togheter taking the shape of an hypertextual theory-fiction.'
+        },
+    12: {
+        id: 'WordsMap',
+        glyph: '&#127757;',
+        title: 'Words Map',
+        content: 'A new project you will enjoy a lot!!<br><br>'
         }      
 }

open/styles/style.css

@@ -3,6 +3,13 @@
   src: url(../fonts/AC1-SemiLightDots.ttf);
 }
 
+@media screen and (max-width: 700px) {
+  .onlyMobile {
+    background-color: red;
+    display: inline;
+  }
+}
+
 body {
   max-width: 100vw;
   height: 100vh;
@@ -84,7 +91,7 @@ h1 {
 }
 
 #bar {
-  z-index: 10;
+  z-index: 110;
   position: fixed;
   bottom: 0;
   left: 0;
@@ -98,7 +105,7 @@ h1 {
   margin: auto;
   width: 50%;
   /* position: fixed; */
-  z-index: 5;
+  z-index: 101;
   background-color: white;
   color: black;
   border: solid 2px blue;
@@ -145,6 +152,10 @@ h1 {
 }
 
 /* ICONS NAVIGATION */
+#icons {
+  width: 45%;
+}
+
 .iconContainer {
   display: inline-block;
   margin: 10px;
@@ -228,6 +239,11 @@ button {
   padding: 40px;
 }
 
+#colophonGreetings {
+  background-color: yellow;
+  padding: 5px;
+}
+
 #lastColophonWrapper {
   margin-bottom: 0px;
 }
@@ -243,6 +259,7 @@ button {
 /* On screens that are 992px or less, set the background color to blue */
 @media screen and (max-width: 700px) {
   .onlyMobile {
+    background-color: red;
     display: inline;
   }
 
@@ -258,6 +275,10 @@ button {
     padding-left: 0;
   }
 
+  #icons {
+    width: 100%;
+  }
+
   .iconContainer {
     display: inline-block;
     margin: -1px;