Compare commits
15 Commits
| Author | SHA1 | Date |
|---|---|---|
funix
|
5a42fd2491 | 3 years ago |
|
Lotte Louise de Jong
|
213d68dade | 3 years ago |
|
funix
|
4984bb34c5 | 3 years ago |
 Tancre
|
64f3ccf09e | 3 years ago |
|
Tancre
|
72db5bef40 | 3 years ago |
|
Tancre
|
7c0ddd775b | 3 years ago |
|
Tancre
|
20436b31e6 | 3 years ago |
|
Tancre
|
a371aba532 | 3 years ago |
|
funix
|
a83c4019e7 | 3 years ago |
|
funix
|
3305efce2d | 3 years ago |
|
funix
|
9ab91f3fcf | 3 years ago |
|
funix
|
49db009cec | 3 years ago |
|
funix
|
0d25d1163e | 3 years ago |
|
funix
|
885a31d6fc | 3 years ago |
|
Tancre
|
f2c6a8a62b | 3 years ago |
@ -1 +1,65 @@
|
|||||||
<meta http-equiv="Refresh" content="0; url='./open/" />
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title></title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script src="./scripts/jquery-3.5.0.min.js"></script>
|
||||||
|
<script src="./scripts/jquery-ui/jquery-ui.min.js"></script>
|
||||||
|
<script src="./scripts/Windows.js"></script>
|
||||||
|
<script src="./scripts/DragResizeClose.js"></script>
|
||||||
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||||
|
<link rel="stylesheet" href="./styles/style.css">
|
||||||
|
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- BASE -->
|
||||||
|
<!-- <div class="ui-widget-content draggable resizable closable" id=" "><h1>var xpub</h1><p></p></div> -->
|
||||||
|
|
||||||
|
<!-- <h1>windows.open(Welcome)</h1> -->
|
||||||
|
<div id="icons"></div>
|
||||||
|
|
||||||
|
<div id="dragZone" class="dragzone">
|
||||||
|
|
||||||
|
<div id="program" class="ui-widget-content draggable resizable visible" style="max-width: 250px; height: 1400px;">
|
||||||
|
<h1>10 Sept 21</h1>
|
||||||
|
<li>12:00-17:00:</li>
|
||||||
|
<ul>XPUB Bookshop</ul>
|
||||||
|
<li>12:00-14:00: XPUB3</li>
|
||||||
|
<ul>HAM DISTRO (online)</ul>
|
||||||
|
<li>14:00-15:00:</li>
|
||||||
|
<ul>OUIJA SEANCE every 20 mins with Simon (online)</ul>
|
||||||
|
<li>15:00-16:00: XPUB2</li>
|
||||||
|
<ul>Clara - Blank page syndrome (offline)</ul>
|
||||||
|
<li>16:00-17:00: XPUB1 </li>
|
||||||
|
<ul>Lingo Bingo (offline)</ul>
|
||||||
|
<ul>Civil Entertainment Sirens® </ul>
|
||||||
|
<li>Oh, look at the wifi: words fly around!</li>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bar">
|
||||||
|
<button onclick="drop()" class="bottoneCose">XPUB</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="colophon">
|
||||||
|
<h1>windows.open(Welcome)</h1>
|
||||||
|
<p>Architecture: Tancredi and Poni</p>
|
||||||
|
<p>Urbanistic: Clara, Louisa, Simon</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./scripts/App.js"></script>
|
||||||
|
<script> // drop stuff
|
||||||
|
|
||||||
|
function drop(){
|
||||||
|
$("#colophon").slideToggle()
|
||||||
|
$(".bottoneCose").toggleClass("clicked")
|
||||||
|
}</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<title> window.open( 🪟 )</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script src="./scripts/jquery-3.5.0.min.js"></script>
|
|
||||||
<script src="./scripts/jquery-ui/jquery-ui.min.js"></script>
|
|
||||||
<script src="./scripts/Windows.js"></script>
|
|
||||||
<script src="./scripts/DragResizeClose.js"></script>
|
|
||||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
||||||
<link rel="stylesheet" href="./styles/style.css">
|
|
||||||
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- BASE -->
|
|
||||||
<!-- <div class="ui-widget-content draggable resizable closable" id=" "><h1>var xpub</h1><p></p></div> -->
|
|
||||||
|
|
||||||
<!-- <h1>windows.open(Welcome)</h1> -->
|
|
||||||
<div id="icons"></div><br class="onlyMobile"><br class="onlyMobile">
|
|
||||||
|
|
||||||
<div id="dragZone" class="dragzone">
|
|
||||||
|
|
||||||
<div id="program" class="corpi ui-widget-content draggable visible">
|
|
||||||
<h1>Program</h1>
|
|
||||||
<li>12:00-14:00: XPUB3</li>
|
|
||||||
<ul><b>HAM DISTRO</b> <br>(online + offline)</ul>
|
|
||||||
<li>14:00-15:00:</li>
|
|
||||||
<ul><b>OUIJA SEANCE</b> <br>(every 20 mins online + offline)</ul>
|
|
||||||
<li>15:00-16:00: XPUB2</li>
|
|
||||||
<ul><b>Blank page syndrome</b> (offline)</ul>
|
|
||||||
<li>16:00-17:00: XPUB1 </li>
|
|
||||||
<ul><b>Lingo Bingo</b> <br>(offline)</ul>
|
|
||||||
<ul><b>Civil Entertainment Sirens®</b></ul>
|
|
||||||
<li>During the whole event: </li>
|
|
||||||
<ul><b>XPUB Bookshop</b></ul>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer id="bar">
|
|
||||||
<button onclick="drop()" class="bottoneCose">XPUB</button>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<p><b>Contributions:</b></p>
|
|
||||||
<div class="colophonWrapper">
|
|
||||||
<p><i>HAM DISTRO</i> ⟶ XPUB3</p>
|
|
||||||
<p><i>OUIJA SEANCE</i> ⟶ Simon Browne</p>
|
|
||||||
<p><i>Blank Page Syndrome</i> ⟶ Clara Noseda</p>
|
|
||||||
<p><i>Lingo Bingo</i> ⟶ XPUB1</p>
|
|
||||||
<p><i>Civil Entertainment Sirens®</i> ⟶ Martin Foucaut</p>
|
|
||||||
<p><i>Oh, look at the wifi: words fly around</i> ⟶ Federico Poni</p>
|
|
||||||
<p><i>Ilinx & Words Map</i> ⟶ Tancredi Di Giovanni</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p><b>Bookshop:</b></p>
|
|
||||||
<div id="lastColophonWrapper" class="colophonWrapper" >
|
|
||||||
<p><i>Wor(l)ds for the Future</i> // published and distributed by XPUB1 </p>
|
|
||||||
<p><i>iper- ozio % versi</i> // Federico Poni, Enrico Taro'</p>
|
|
||||||
<p><i>Low-Tech Chronicles #1</i> // Mark van den Heuvel</p>
|
|
||||||
<p><i>Writing Cure</i> // Avital Barkai, Camilo Garcia A.</p>
|
|
||||||
</div>
|
|
||||||
<br class="onlyMobile"><br class="onlyMobile">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="./scripts/App.js"></script>
|
|
||||||
<script>
|
|
||||||
function drop(){
|
|
||||||
$("#colophon").slideToggle()
|
|
||||||
$(".bottoneCose").toggleClass("clicked")
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
/////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
// TODO
|
|
||||||
// glyphs
|
|
||||||
// what buttons where
|
|
||||||
// colophone
|
|
||||||
// a bit more interface
|
|
||||||
|
|
||||||
// DONE
|
|
||||||
// Open window icon (on background 'desktop')
|
|
||||||
// Close window button (on 'window' itself)
|
|
||||||
// random position
|
|
||||||
|
|
||||||
//////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
let zIndex = 3;
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
|
|
||||||
// Generate divs
|
|
||||||
Object.values(corpi).forEach(corpus => {
|
|
||||||
|
|
||||||
$('#dragZone' ).append(`
|
|
||||||
<div id="${corpus['id']}" class="corpi ui-widget-content draggable" >
|
|
||||||
<h1>${corpus["glyph"]} ${corpus['title']}</h1>
|
|
||||||
<p>${corpus['content']}</p>
|
|
||||||
<button class="closable">X</button>
|
|
||||||
</div>
|
|
||||||
`)
|
|
||||||
$('#icons').append(`
|
|
||||||
<div class="iconContainer">
|
|
||||||
<a href="#${corpus['id']}" class="innerLink">
|
|
||||||
<p><button class="icon" onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" >${corpus["glyph"]}</button></p>
|
|
||||||
<span class="textIcon">${corpus['title']}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
`)
|
|
||||||
});
|
|
||||||
|
|
||||||
// Start mouse UI
|
|
||||||
const dragResize = new DragResizeClose(zIndex);
|
|
||||||
$('#greetings').fadeIn()
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,374 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: points;
|
|
||||||
src: url(../fonts/AC1-SemiLightDots.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
|
||||||
.onlyMobile {
|
|
||||||
background-color: red;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
max-width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #2f6bdd;
|
|
||||||
color: white;
|
|
||||||
font-family: "Courier New", Courier, monospace;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
cursor: url(https://www.dropbox.com/s/u76wca3a4weldmu/cursor%20black.png?raw=1),
|
|
||||||
auto;
|
|
||||||
overflow: auto !important;
|
|
||||||
background-image: radial-gradient(currentColor 1px, transparent 1px),
|
|
||||||
radial-gradient(currentColor 1px, transparent 1px);
|
|
||||||
background-size: calc(20 * 1px) calc(20 * 1px);
|
|
||||||
background-position: 0 0, calc(10 * 1px) calc(10 * 1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: points;
|
|
||||||
font-size: 40px;
|
|
||||||
color: white;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.innerLink {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background: black;
|
|
||||||
-webkit-box-shadow: 0px 10px 13px -7px #000000,
|
|
||||||
5px 5px 15px 5px rgba(0, 0, 0, 0.49);
|
|
||||||
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0.49);
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable p,
|
|
||||||
.draggable li,
|
|
||||||
.draggable ul {
|
|
||||||
color: white;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable li::before {
|
|
||||||
content: "💾 ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizable {
|
|
||||||
width: 350px;
|
|
||||||
height: 650px;
|
|
||||||
padding: 0.5em 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizable p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizable h1 {
|
|
||||||
font-size: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closable {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: -2px;
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
width: 38px;
|
|
||||||
color: #00fd00;
|
|
||||||
border: none;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon:hover {
|
|
||||||
font-size: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bar {
|
|
||||||
z-index: 110;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 5%;
|
|
||||||
border: solid 2px white;
|
|
||||||
background-color: rgba(19, 19, 156, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophon {
|
|
||||||
margin: auto;
|
|
||||||
width: 50%;
|
|
||||||
/* position: fixed; */
|
|
||||||
z-index: 101;
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
border: solid 2px blue;
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophon h1 {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottoneCose {
|
|
||||||
width: 10%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottoneCose:active {
|
|
||||||
background-color: rgb(113, 113, 226);
|
|
||||||
}
|
|
||||||
|
|
||||||
.clicked {
|
|
||||||
background-color: white;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visible {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.corpi {
|
|
||||||
padding: 15px;
|
|
||||||
min-width: 200px;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 2px yellow solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
#program {
|
|
||||||
min-width: 180px;
|
|
||||||
max-width: 250px;
|
|
||||||
height: 1400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#collectiveioning {
|
|
||||||
min-width: 320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ICONS NAVIGATION */
|
|
||||||
#icons {
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 5px;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer a {
|
|
||||||
color: white;
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer a:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer a:visited {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer a p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border: none;
|
|
||||||
z-index: 1;
|
|
||||||
font-size: 30px;
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon:hover {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.textIcon {
|
|
||||||
margin-top: -20px;
|
|
||||||
font-weight: medium;
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FOOTER & COLOPHON*/
|
|
||||||
.bottoneCose {
|
|
||||||
user-select: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 3px 1em;
|
|
||||||
color: currentColor;
|
|
||||||
font-weight: var(--bold);
|
|
||||||
text-decoration: none;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
cursor: url(https://www.dropbox.com/s/odbhtufakz6sge2/cursor%20red.png?raw=1),
|
|
||||||
auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.colophonWrapper {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophon {
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophonGreetings {
|
|
||||||
background-color: yellow;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#lastColophonWrapper {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GENERAL MODIFIERS */
|
|
||||||
|
|
||||||
.onlyMobile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MEDIA QUERIES */
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#icons {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconContainer {
|
|
||||||
display: inline-block;
|
|
||||||
margin: -1px;
|
|
||||||
padding: 5px;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.corpi {
|
|
||||||
min-width: unset !important;
|
|
||||||
max-width: unset !important;
|
|
||||||
width: 70% !important;
|
|
||||||
height: auto !important;
|
|
||||||
top: unset !important;
|
|
||||||
right: unset !important;
|
|
||||||
left: unset !important;
|
|
||||||
/* border: unset !important; */
|
|
||||||
/* display: inline-block !important; */
|
|
||||||
display: block !important;
|
|
||||||
position: initial;
|
|
||||||
cursor: unset !important;
|
|
||||||
/* border-radius: unset !important; */
|
|
||||||
margin-bottom: 40px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
z-index: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#program {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #program {
|
|
||||||
min-width: unset !important;
|
|
||||||
max-width: unset !important;
|
|
||||||
width: 95% !important;
|
|
||||||
height: auto !important;
|
|
||||||
top: unset !important;
|
|
||||||
right: unset !important;
|
|
||||||
left: unset !important;
|
|
||||||
border: unset !important;
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* FOOTER */
|
|
||||||
|
|
||||||
#bar {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottoneCose {
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophon {
|
|
||||||
background-color: white;
|
|
||||||
width: -moz-available;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
text-align: center;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px;
|
|
||||||
transform: unset;
|
|
||||||
display: unset;
|
|
||||||
left: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#colophon h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.colophonWrapper {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#lastColophonWrapper {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
/////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// glyphs
|
||||||
|
// what buttons where
|
||||||
|
// colophone
|
||||||
|
// a bit more interface
|
||||||
|
|
||||||
|
// DONE
|
||||||
|
// Open window icon (on background 'desktop')
|
||||||
|
// Close window button (on 'window' itself)
|
||||||
|
// random position
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
let zIndex = 3;
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
// Generate divs
|
||||||
|
Object.values(corpi).forEach(corpus => {
|
||||||
|
|
||||||
|
$('#dragZone' ).append(`
|
||||||
|
<div class="ui-widget-content draggable resizable" id="${corpus['id']}">
|
||||||
|
<h1>${corpus['title']}</h1>
|
||||||
|
<p>${corpus['content']}</p>
|
||||||
|
<button class="closable">X</button>
|
||||||
|
</div>
|
||||||
|
`)
|
||||||
|
$('#icons').append(`<button onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" class="icon">${corpus["glyph"]}</button>`)
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start mouse UI
|
||||||
|
const dragResize = new DragResizeClose(zIndex);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
const corpi = {
|
||||||
|
0: {
|
||||||
|
id:'xpub',
|
||||||
|
glyph: '🖨️',
|
||||||
|
title: 'var xpub',
|
||||||
|
content: 'window.open() at PNF will be an interface for our XPUB program to speak/communicate to/with the public inside and outside of the physical space. We adjust, using windows in the street and in the browser in order to be able to communicate. This frames it as a "discursive/dialogical interface" through which attitudes, perspectives, backgrounds and situations are explored together in a program consisting of: presentations, workshops, publication launches, conversations and performances; both online and offline.'
|
||||||
|
},
|
||||||
|
|
||||||
|
1: {
|
||||||
|
id:'interface',
|
||||||
|
glyph: '📀',
|
||||||
|
title: 'const interface',
|
||||||
|
content: 'A window is a framing device, an interface through which we can look inside, to spaces where small groups meet, and outside to the world beyond. Screens and windows delineate boundaries between public and private. Working with(in) a limitation, a frame(work), a situation, a context means adjusting our work to the state of affairs; it changes our way of thinking/framing it. We adjust, in order to be able to communicate within a temporary window of time, reframing our intentions and seeking opportunities to share some real-time realness.'
|
||||||
|
},
|
||||||
|
|
||||||
|
2: {
|
||||||
|
id:'greetings',
|
||||||
|
glyph: '📌',
|
||||||
|
title: 'let greetings',
|
||||||
|
content: 'We are pleased to invite you to window.open(), a day-long festival, held by students and alumni of the Master of Experimental Publishing (XPUB) at Page Not Found.'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,141 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: points;
|
||||||
|
src: url(../fonts/AC1-SemiLightDots.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
max-width: 100vw;
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: points;
|
||||||
|
font-size: 60px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 1em;
|
||||||
|
color: currentColor;
|
||||||
|
font-weight: var(--bold);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
border: 2px white solid;
|
||||||
|
background: black;
|
||||||
|
-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0.49);
|
||||||
|
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0.49);
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable p,
|
||||||
|
.draggable li,
|
||||||
|
.draggable ul {
|
||||||
|
color: white;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable li::before {
|
||||||
|
content: "💾 ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizable {
|
||||||
|
width: 350px;
|
||||||
|
height: 650px;
|
||||||
|
padding: 0.5em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizable p {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizable h1 {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closable {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.closable button {
|
||||||
|
width: 35px;
|
||||||
|
height: 30px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.hover {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border: none;
|
||||||
|
z-index: 1;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
/* font-size: 50px ; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon:hover {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar{
|
||||||
|
z-index: 10;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5%;
|
||||||
|
border: solid 2px white;
|
||||||
|
background-color: rgba(19, 19, 156, .9);
|
||||||
|
}
|
||||||
|
|
||||||
|
#colophon{
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
/* position: fixed; */
|
||||||
|
z-index: 5;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
border: solid 2px blue;
|
||||||
|
display: none;
|
||||||
|
padding: 1% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#colophon h1{
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottoneCose{
|
||||||
|
width: 10%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bottoneCose:active{
|
||||||
|
background-color: rgb(113, 113, 226);
|
||||||
|
}
|
||||||
|
|
||||||
|
.clicked{
|
||||||
|
background-color: white;
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue