XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ri 06

Browse Source
master
Sandra 5 years ago
parent 15be3c5a1d
commit 25133a6b07
2 changed files with 357 additions and 103 deletions
Show Stats Download Patch File Download Diff File

134
12/index.html
Unescape Escape View File

@ -6,8 +6,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Special issue 12</title> <title>Special issue 12</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href= <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono">
"https://fonts.googleapis.com/css?family=Roboto Mono">
<script src="lib/jquery.js"></script> <script src="lib/jquery.js"></script>
<script src="lib/jquery-ui.min.js"></script> <script src="lib/jquery-ui.min.js"></script>
</head> </head>
@ -45,6 +44,50 @@
<iframe id="cdownclock" style="width:400px; height:300px; border:none; background-image:url(IMG/2/2.gif); background-repeat:no-repeat;" src='blank12_6.html'> </iframe> <iframe id="cdownclock" style="width:400px; height:300px; border:none; background-image:url(IMG/2/2.gif); background-repeat:no-repeat;" src='blank12_6.html'> </iframe>
</div> </div>
<div id="implicancies_06">
<div id="resources_06" class=""><iframe name="resources" id="iframe_06" src='resources_06.html'></iframe></div>
<!-- <div id="info"><div id="title"></div><div id="authors"></div> -->
<div id="week_06">
<div class="schedule_06">
PROGRAMME #12.6<br>
</div>
<div class="audio_06">
<audio controls=""><source src="" type="audio/ogg">
<track default="" kind="captions" srclang="en" src=
"archive_12.6.vtt"></audio>
</div>
<div id="table_content_06">
<ul>
<li id="track_6_1"> ⇢ track / name / duration </li>
<li id="track_6_2"> ⇢ track / name / duration </li>
<li id="track_6_3"> ⇢ track / name / duration </li>
<li id="track_6_4"> ⇢ track / name / duration </li>
<li id="track_6_5"> ⇢ track / name / duration </li>
<li id="track_6_6"> ⇢ track / name / duration </li>
<li id="track_6_7"> ⇢ track / name / duration </li>
<li id="track_6_8"> ⇢ track / name / duration </li>
<li id="track_6_9"> ⇢ track / name / duration </li>
<li id="track_6_10"> ⇢ track / name / duration </li>
</ul>
</div>
</div></div>
<div id="comment06">
LIVE COMMENT <br>
<button id="comment_btn"> >>> Etherpad <<< </button>
</div>
<div id="etherpad_06" class="e06_hidden">
<div id="etherpad_06header">click here to move</div>
<iframe id="iframe_pad06" src="https://pad.xpub.nl/p/radio_implicancies_12.6" ></iframe>
</div>
<div class="archive">
<div class="previous">ARCHIVE</div>
<br>
<br>
<div id="implicancies_05"> <div id="implicancies_05">
<div id="shell_03" class=""><div class="" id="shell_03header">click here to move</div><iframe name="shell" id="iframe_clock" src='blank12_5.html'></iframe></div> <div id="shell_03" class=""><div class="" id="shell_03header">click here to move</div><iframe name="shell" id="iframe_clock" src='blank12_5.html'></iframe></div>
<div id="info"> <div id="info">
@ -98,10 +141,7 @@
<br> <br>
<br> <br>
</div> </div>
<div class="archive">
<div class="previous">
ARCHIVE
</div>
<div id="implicancies_04"> <div id="implicancies_04">
<div id="resources_04" class=""><iframe name="resources" id="iframe_04" src='resources_04.html'></iframe></div> <div id="resources_04" class=""><iframe name="resources" id="iframe_04" src='resources_04.html'></iframe></div>
<!-- <div id="info"><div id="title"></div><div id="authors"></div> --> <!-- <div id="info"><div id="title"></div><div id="authors"></div> -->
@ -111,11 +151,8 @@
04/06 at 16:00 (UTC+2) 04/06 at 16:00 (UTC+2)
</div> </div>
<div class="audio_04"> <div class="audio_04">
<audio controls=""><source src= <audio controls=""><source src="archive_12.4.mp3" type="audio/mp3">
"archive_12.4.mp3" type= <track default="" kind="captions" srclang="en" src="archive_12.4.vtt"></audio>
"audio/mp3">
<track default="" kind="captions" srclang="en" src=
"archive_12.4.vtt"></audio>
</div> </div>
<div id="table_content_04"> <div id="table_content_04">
<ul> <ul>
@ -136,13 +173,6 @@
</div> </div>
</div> </div>
<!-- <div id="shell_03" class="hidden"><iframe name="shell" id="iframe"></iframe></div> -->
<!-- <p>
live comment during the broadcast: <br><a href="https://pad.xpub.nl/p/radio_implicancies_12.4" target="etherpad"> >> ETHERPAD << </a>&nbsp;&nbsp;
</p>
<div id="etherpad" class="hidden">live comment during the broadcast: <br><a href="https://pad.xpub.nl/p/radio_implicancies_12.4" class="link_04" target="etherpad"> >> ETHERPAD << </a><iframe name="etherpad" id="iframe2" ></iframe></div>
<div id="info"><div id="title"></div><div id="authors"></div>
</div>-->
<div id="etherpad_04"> <div id="etherpad_04">
live comment during the broadcast:<br> live comment during the broadcast:<br>
<a href="https://pad.xpub.nl/p/radio_implicancies_12.4" <a href="https://pad.xpub.nl/p/radio_implicancies_12.4"
@ -151,6 +181,10 @@
</div> </div>
</div> </div>
<br>
<br>
<br>
<div id="week_03" class="player"> <div id="week_03" class="player">
<!-- <script src="https://threejs.org/build/three.js"></script> <!-- <script src="https://threejs.org/build/three.js"></script>
<script src="torusKnot.js"></script> --> <script src="torusKnot.js"></script> -->
@ -241,7 +275,7 @@
"https://pad.xpub.nl/p/implicancies-02" target= "https://pad.xpub.nl/p/implicancies-02" target=
"_blank">pad</a> for resources;</p> "_blank">pad</a> for resources;</p>
</div> </div>
</div>
<div id="week_01" class="player"> <div id="week_01" class="player">
<div class="sec_title_01"> <div class="sec_title_01">
#12.1 - 14/05 #12.1 - 14/05
@ -274,6 +308,7 @@
"https://pad.xpub.nl/p/implicancies-01" target="_blank">pad</a> "https://pad.xpub.nl/p/implicancies-01" target="_blank">pad</a>
for resources.</p> for resources.</p>
</div><!-- <div class="contributors"> --> </div><!-- <div class="contributors"> -->
</div> <!-- div archive -->
<script src="player2.js"></script> <script src="player2.js"></script>
<script src="liveplayer.js"></script> <script src="liveplayer.js"></script>
<script> <script>
@ -283,7 +318,7 @@ $("#week_05").draggable({handle: '#week_05header'});
$("#resources_05").draggable({handle: '#resources_05header'}); $("#resources_05").draggable({handle: '#resources_05header'});
$("#etherpad_drag").draggable({handle: '#etherpad_drag_header'}); $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
player(document.querySelector("#week_04"), document.querySelector("#iframe_04")); player(document.querySelector("#week_04"), document.querySelector("#iframe_04"));
player(document.querySelector("#week_03")); player(document.querySelector("#week_03"));
player(document.querySelector("#week_02")); player(document.querySelector("#week_02"));
player(document.querySelector("#week_01")); player(document.querySelector("#week_01"));
@ -291,17 +326,17 @@ $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
document.querySelector("#iframe").addEventListener("load",function(){ document.querySelector("#iframe").addEventListener("load",function(){
document.querySelector("#shell_03").classList.remove("hidden"); document.querySelector("#shell_03").classList.remove("hidden");
}); });
var iframe_loaded=false; var iframe_loaded=false;
document.querySelector("#implicancies_05 #etherpad_drag").addEventListener("load",function(){ document.querySelector("#implicancies_05 #etherpad_drag").addEventListener("load",function(){
iframe_loaded=true; iframe_loaded=true;
}); });
document.querySelector("#implicancies_05 .etherpadlink").addEventListener("click",function(e){ document.querySelector("#implicancies_05 .etherpadlink").addEventListener("click",function(e){
console.log("click", e); console.log("click", e);
document.querySelector("#implicancies_05 #etherpad_drag").classList.toggle("hidden"); document.querySelector("#implicancies_05 #etherpad_drag").classList.toggle("hidden");
if(iframe_loaded){ if(iframe_loaded){
console.log("preventDefault") console.log("preventDefault")
e.preventDefault() e.preventDefault()
} }
}); });
@ -316,7 +351,56 @@ $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
}); });
// Implicancies 12.6
//Make the PAD DIV element draggagle:
dragElement(document.getElementById("etherpad_06"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
$(document).ready(function(){
$("#comment_btn").click(function(){
$("#etherpad_06").toggle();
});
});
</script> </script>
</body> </body>

322
12/style.css
Unescape Escape View File

@ -1,15 +1,15 @@
/*fonts*/ /*fonts*/
@font-face{ @font-face{
font-family:"Pitchoun"; font-family:"Pitchoun";
src: url("font/pitchoun.ttf") format("truetype"), src: url("font/pitchoun.ttf") format("truetype"),
url("http://hershey-noailles.luuse.io/output/pitchoun-dashed-regular/Hershey-Noailles-pitchoun-dashed-regular.ttf")format("truetype"); url("http://hershey-noailles.luuse.io/output/pitchoun-dashed-regular/Hershey-Noailles-pitchoun-dashed-regular.ttf")format("truetype");
} }
@font-face{ @font-face{
font-family:"Hershey"; font-family:"Hershey";
src: url("font/Hershey-Noailles-timesb-handles-bold.ttf") format("truetype"), src: url("font/Hershey-Noailles-timesb-handles-bold.ttf") format("truetype"),
url("http://hershey-noailles.luuse.io/output/timesb-handles-bold/Hershey-Noailles-timesb-handles-bold.ttf") format("truetype"); url("http://hershey-noailles.luuse.io/output/timesb-handles-bold/Hershey-Noailles-timesb-handles-bold.ttf") format("truetype");
} }
@ -38,17 +38,28 @@ url("https://fonts.googleapis.com/css?family=Roboto Mono")
} }
@font-face { @font-face {
font-family: "MisterPixel"; font-family: "MisterPixel";
src: url("font/Mister Pixel Tools.otf") format("opentype"); src: url("font/Mister Pixel Tools.otf") format("opentype");
} }
@font-face {
font-family: "Kumar";
src: url("font/KumarOneOutline-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Typefesse";
src: url("font/Typefesse_Claire-Obscure.otf") format("opentype");
}
body{ body{
width:100%; width:100%;
font-family: Roboto Mono; font-family: Roboto Mono;
font-size: 24px; font-size: 22px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin: 0; margin: 0;
@ -70,6 +81,8 @@ a#main_page_link:hover{
margin:60px; margin:60px;
max-width: 60%; max-width: 60%;
margin-left: 100px; margin-left: 100px;
font-size: 30px;
font-family: monotype;
} }
.page_title{ .page_title{
@ -82,9 +95,10 @@ a#main_page_link:hover{
.page_title_2{ .page_title_2{
font-size:70px; font-size: 70px;
color: fuchsia; color: #6dc82a;
font-family: Pilowlava; font-family: Typefesse;
/*text-shadow: 10px 10px blue;*/ /*text-shadow: 10px 10px blue;*/
} }
@ -124,26 +138,28 @@ color: blue;
.text_above_3{ .text_above_3{
font-family: hershey; font-family: hershey;
font-size:20px; font-size: 20px;
text-align: center; text-align: center;
color: white; color: white;
text-shadow: 2px; text-shadow: 2px;
} }
.sec_title_contributors{ .sec_title_contributors{
font-size:18px; font-size: 20px;
padding-top: 20px; padding-top: 20px;
font-family: monotype;
} }
/*.contributors{ /*.contributors{
color: black; color: black;
margin:40px; margin:40px;
}*/ }*/
.contributors_names{ .contributors_names{
color: black; color: black;
margin-top: 10px; margin-top: 10px;
font-size: 18px; font-size: 22px;
font-family: monotype;
} }
@ -242,15 +258,16 @@ ul#table_content_03{
.previous { .previous {
color: fuchsia; color: black;
font-size: 70px; font-size: 80px;
font-family: Pilowlava; font-family: GapSansBold;
letter-spacing: 100px;
width: 100%; width: 100%;
height: auto; height: auto;
margin-left:60px; padding-top: 60px;
margin-top:60px; margin-bottom: 60px;
text-align: center;
border-top: 5px dashed black;
} }
audio{ audio{
@ -283,16 +300,16 @@ a:hover{
} }
#shell_03 { #shell_03 {
position: absolute; position: absolute;
white-space: pre-wrap; white-space: pre-wrap;
/*height: 350px; /*height: 350px;
width: 500px;*/ width: 500px;*/
font-family: monospace; font-family: monospace;
color: white; color: white;
font-size: 14px; font-size: 14px;
background: black; background: black;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
overflow: hidden; overflow: hidden;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -318,7 +335,7 @@ a:hover{
} }
#torusKnot { #torusKnot {
height: 40em; height: 40em;
width: 100%; width: 100%;
} }
@ -420,7 +437,7 @@ a:hover{
width: 100%; width: 100%;
height: 20%; height: 20%;
background: #FAF0E6; background: #FAF0E6;
margin-top:100px; margin-top:50px;
text-align:center; text-align:center;
@ -460,8 +477,8 @@ a:hover{
#etherpad { #etherpad {
/*text-align: center;*/ /*text-align: center;*/
white-space: pre-wrap; white-space: pre-wrap;
width: 100px; width: 100px;
height: 100px; height: 100px;
font-family: Roboto Mono; font-family: Roboto Mono;
color: white; color: white;
/*overflow-y: hidden; /*overflow-y: hidden;
@ -471,7 +488,7 @@ a:hover{
position: relative; position: relative;
border: 3px white solid; border: 3px white solid;
/*padding-top:30px;*/ /*padding-top:30px;*/
float: left; float: left;
} }
@ -495,24 +512,24 @@ a:hover{
} }
.etherpad_iframe{ .etherpad_iframe{
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding-top: 20px; padding-top: 20px;
} }
#etherpad_drag.hidden { #etherpad_drag.hidden {
display:none; display:none;
overflow: hidden; overflow: hidden;
} }
.link_05 { .link_05 {
display:inline-block; display:inline-block;
height: 100px; height: 100px;
width: 100px; width: 100px;
position: relative; position: relative;
color: white; color: white;
} }
#resources_05 { #resources_05 {
@ -527,10 +544,10 @@ a:hover{
border: 3px solid white; border: 3px solid white;
float: left; float: left;
font-family: Roboto Mono; font-family: Roboto Mono;
position: absolute; position: absolute;
top: 400px; top: 400px;
left: 740px; left: 740px;
z-index:101; z-index:101;
} }
@ -585,42 +602,42 @@ a:hover{
height: 620px; height: 620px;
float: left; float: left;
border: 3px solid white; border: 3px solid white;
position: absolute; position: absolute;
top: 40px; top: 40px;
left: 900px; left: 900px;
z-index:100; z-index:100;
} }
#week_05.hidden{ #week_05.hidden{
display:none; display:none;
} }
#shell_03.hidden{ #shell_03.hidden{
display:none; display:none;
} }
#resources_05.hidden{ #resources_05.hidden{
display:none; display:none;
} }
#week_05:hover{ #week_05:hover{
z-index:800; z-index:800;
} }
#shell_03:hover{ #shell_03:hover{
z-index:800; z-index:800;
} }
#resources_05:hover{ #resources_05:hover{
z-index:800; z-index:800;
} }
.audio_05:hover{ .audio_05:hover{
z-index:800; z-index:800;
} }
#etherpad_drag:hover{ #etherpad_drag:hover{
z-index:800; z-index:800;
} }
.icon { .icon {
position: relative; position: relative;
margin: 40px 50px 20px 50px; margin: 40px 50px 20px 50px;
} }
.icon:active { .icon:active {
@ -633,27 +650,27 @@ a:hover{
color: white; color: white;
border: 3px white solid; border: 3px white solid;
width: 100px; width: 100px;
height: 100px; height: 100px;
align-content: center; align-content: center;
float:left; float:left;
} }
#TOC_icon { #TOC_icon {
color: white; color: white;
border: 3px white solid; border: 3px white solid;
width: 100px; width: 100px;
height: 100px; height: 100px;
align-content: center; align-content: center;
float:left; float:left;
} }
#resources_icon { #resources_icon {
color: white; color: white;
border: 3px white solid; border: 3px white solid;
width: 100px; width: 100px;
height: 100px; height: 100px;
align-content: center; align-content: center;
float:left; float:left;
} }
#TOC_icon:hover { #TOC_icon:hover {
@ -741,11 +758,164 @@ filter: invert(1);
display: inline-block; display: inline-block;
} }
/*broadcast 12.6*/
#implicancies_06 > div {
display: inline-block;
text-align: center;
background-color: white;
z-index: 100;
}
#implicancies_06 {
text-align: center;
margin: 0px;
max-width: 100%;
height: 60%;
padding: 0px;
margin-top: 180px;
background-color: white;
z-index: 100;
}
#resources, #resources_06 {
white-space: pre-wrap;
height: 450px;
width: 800px;
color: white;
font-size: 14px;
/*overflow-y: auto;*/
background-image: linear-gradient(to right, black, darkblue);
margin: 0px;
/*border: 10px solid black;*/
float: left;
margin-left: 50px;
font-family: Roboto Mono;
}
#resources iframe, #iframe_06 {
width: 100%;
height: 100%;
border: 1px solid #FAF0E6;
background-color: none;
position: relative;
}
#week_06{
width: 30%;
margin: 0px;
margin-right: 70px;
background-color: ;
float: right;
}
.schedule_06 {
width: 100%;
padding-top: 0px;
margin-top: 0px;
background-color:;
color:#6dc82a;
}
#table_content_06 {
align-content: initial;
font-size: 20px;
text-align: left;
background-color:;
list-style-type: none;
padding-left: 30px;
margin-bottom: 30px;
color:#6dc82a;
}
.audio_06{
width:100%;
margin-top: 50px;
margin-bottom: 50px;
background-color: white;
}
.link_06{
color:blue;
text-decoration: none;
}
.about_06{
text-align: center;
color: black;
font-family:"Roboto Mono";
font-size: 15px;
}
#comment06 {
display: inline-block;
position: relative;
width: 20%;
background-image: linear-gradient(to right, black, darkblue);
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 30px;
color: #6dc82a;
}
#etherpad_06 {
position: absolute;
top: 830px;
left: 300px;
z-index: 10;
height: 500px;
width: 500px;
text-align: center;
/* border: 1px solid #d3d3d3;*/
}
#etherpad_06header {
padding: 10px;
cursor: move;
z-index: 10;
background-image: linear-gradient(to right, black, darkblue);
color: black;
font-size: 12px;
color: #6dc82a;
}
.e06_hidden {
display: none;
right: 40%;
}
#iframe_pad06 {
width: 100%;
height: 100%;
}
.archive{
display: inline-block;
/*background-color: red;*/
height: 100%;
padding-top: 200px;
}
div.c_downclock{ div.c_downclock{
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
margin-top: 55px; margin-top: 55px;
margin-right: 45px; margin-right: 45px;
} z-index: -10;
}
Write Preview
Loading…
Cancel
Save