From 97b834873a2c62a254b952868e3b5ef3acce2ea5 Mon Sep 17 00:00:00 2001
From: mb <mail@manettaberends.nl>
Date: Wed, 21 Sep 2022 15:17:02 +0200
Subject: [PATCH] page for publishing partyline broadcast 2

---
 index.html | 94 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 53 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index cd36aec..662c072 100644
--- a/index.html
+++ b/index.html
@@ -32,22 +32,24 @@
 		<!-- once the event is over remember to move to the sidebottom section -->
 		<!-- if no event is left please add this placeholder: <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a> <br> meer TBA binnenkort! -->
   
-	  <p>September 7th, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank">Publishing Partyline, Broadcast #1: standards and work arounds, with Open Source Publishing (OSP)</a></p>
+	  <p>September 21st, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank">Publishing Partyline, Broadcast #2: dependency relations in the ecosystem, with Paged.js</a></p>
 
 	  <!-- <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a> <br> meer TBA binnenkort! </p>  -->
 	   
 	  </div>
   
 	  <div class="middle">
-		<p>⇈ Soon ⇈ <br> ⇈ Binnenkort ⇈</p>
-		<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
+		<p>⇈ Soon<br>⇈ Binnenkort</p>
+		<p id="livetitle">LIVE NOW ⇶ </p>
 		<!--  ADD A CURRENT LIVE EVENT HERE  -->
 		<p id="livesubtitle"><a href="" target="_blank"></a></p>
-		<p>⇊ Was amazing ↷ ook leuk ⇊</p>
+		<p>⇊ Previous broadcasts<br>⇊ Vorige uitzendingen </p>
 		<p> <a href="https://vvvvvvaria.org/archive/">Archive ↩</a></p>
 	  </div>
   
 	  <div class="sidebottom">
+	  <p>September 7th, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank">Publishing Partyline, Broadcast #1: standards and work arounds, with Open Source Publishing (OSP)</a></p>
+
       <p>23 maart / March '22: A Transversal Network of Feminist Servers (<a href="https://varia.zone/atnofs-varia.html" target="_blank">een radio uitzending</a> / <a href="https://varia.zone/en/atnofs-varia.html" target="_blank">a radio broadcast</a>)</a></p>
 
 	  <p>18 December '21: <a href="http://varia.zone/en/usercond04.html" target="_blank">The User Condition #04 - "Losing Your Data is Good for You" - with Dave Young </a></p>
@@ -114,7 +116,6 @@
   <!-- MEDIA CONTENT  -->
 
 
-
 <!-- MARQUEE PLACEHOLDER — CHANGE THE TEXT  -->
     <!-- if online: -->
     <!-- " ♪ . *⁽⁽ ◝꒰´꒳`∗꒱◟ ₎₎₊· * ON AIR  ♪ ♬ ヾclick on the buttons on the right side to display the different modalities ﾉ ♬ ♪ ON AIR ♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪ " -->
@@ -122,7 +123,7 @@
     <!-- if offline: -->
     <!-- " ♬ ¨ * • WELCOME TO THE VARIA NARROWCAST • ♬ °¸. there is currently no event happening, please check our agenda @ varia.zone " -->
 
-<marquee scrolldelay="92">[LIVE NOW] Publishing Partyline, Broadcast #1: standards and work arounds, with Open Source Publishing (OSP)</marquee>
+<marquee scrolldelay="92">[LIVE NOW] Publishing Partyline, Broadcast #2: dependency relations in the ecosystem, with Paged.js</marquee>
 
 
 <!-- AUDIO -->
@@ -131,12 +132,33 @@
    <div class="audio-stream fullscreen" id="showAudio">
 		<audio id="player" preload="none" src="https://voice.vvvvvvaria.org/live"> </audio>
 		<p>
-		Press play (best listened in FireFox). It might take a minute to load.</p>
+		Press play to tune in! It might take a few seconds to load.</p>
 		<div class="audio-buttons">
-			<button id="bp" class="stream-button b-narrow" onclick="document.getElementById('player').play(); bplaytoggle()">Play</button>
+			<button id="audio" class="stream-button b-narrow" onclick="Play()">Play</button>
+			<!-- <button id="bp" class="stream-button b-narrow" onclick="document.getElementById('player').play(); bplaytoggle()">Play</button> -->
+
+			<!-- <button id="bs" class="stream-button b-narrow" onclick="console.log(soundEffect);">Stop</button> -->
+			<!-- <button id="bs" class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src; bstoptoggle()">Stop</button> -->
+
+			<script>
+			    var audio = document.getElementById("player");
+			    audio.volume = 0.5;
+			    var butn = document.getElementById("audio");
+			    // butn.style.background = "url(https://uploads-ssl.webflow.com/5acdf398c6f3e7252e9a31b9/5ad9f901d9a651ff58dad03b_play.svg) no-repeat";
 
-			<button id="bs" class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src; bstoptoggle()">Stop</button>
+			    function Play() {
+			       if(audio.paused) {
+			               audio.play();
+			               butn.innerText = "Pause";
+			    }
 
+			    else {
+			              audio.pause();
+			               butn.innerText = "Play";
+			              }
+			      }
+
+			</script>
 
 			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
 			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
@@ -153,47 +175,37 @@
     
 	<div class="img-gallery" id="showGal">
 
-		<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p>
+		<!-- <p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p> -->
 
 		<figure>	
-			<img alt="" src="./OSP/osp-bienvenue-welkom.jpg"><br>
-			Lightbox sign at the entrance of the OSP studio, saying "Bienvenue OSP Welkom" in stickered colorful neon Crickx letters
-			(<a class="windowlinks" href="./OSP/osp-bienvenue-welkom.jpg" target="_blank" alt="">link to image</a>)
+			<img alt="" src="./Paged.js/paged.js-website.png"><br>
+			Screenshot of the <a href="https://pagedjs.org/" target="_blank">Paged.js website</a>
+			(<a class="windowlinks" href="./Paged.js/paged.js-website.png" target="_blank" alt="">link to image</a>)
 		</figure>
 		<figure>	
-			<img alt="" src="./OSP/osp.kitchen.png"><br>
-			Screenshot of <a href="https://osp.kitchen">osp.kitchen</a> 
-			(<a class="windowlinks" href="./OSP/osp.kitchen.png" target="_blank" alt="">link to image</a>)
-		</figure>
-		<figure>
-			<img alt="" src="./OSP/Tools-shapes-practice-shapes-tools-osp.png"><br>
-			Inspired by the motto of the Libre Graphics Research Unit, TOOLS SHAPE PRACTICE SHAPE TOOLS" 
-			(<a class="windowlinks" href="./OSP/Tools-shapes-practice-shapes-tools-osp.png" target="_blank" alt="">link to image</a>)
+			<img alt="" src="./Paged.js/paged.js-documentation.png"><br>
+			Screenshot of the <a href="https://pagedjs.org/documentation/" target="_blank">documentation page on the Paged.js website</a>
+			(<a class="windowlinks" href="./Paged.js/paged.js-documentation.png" target="_blank" alt="">link to image</a>)
 		</figure>
 		<figure>	
-			<img alt="" src="./OSP/html2print-pdf-spread.png"><br>
-			Screenshot of html2print rendering a PDF in the browser
-			(<a class="windowlinks" href="./OSP/html2print-pdf-spread.png" target="_blank" alt="">link to image</a>)
-		</figure>
-		<figure>
-			<img alt="" src="./OSP/medor.png"><br>
-			Cover of Médor Nº27 (summer 2022)
-			(<a class="windowlinks" href="./OSP/medor.png" target="_blank" alt="">link to image</a>)
+			<img alt="" src="./Paged.js/coko-foundation-website.png"><br>
+			Screenshot of the <a href="https://coko.foundation/" target="_blank">Coko Foundation website</a>
+			(<a class="windowlinks" href="./Paged.js/coko-foundation-website.png" target="_blank" alt="">link to image</a>)
 		</figure>
-		<figure>
-			<img alt="" src="./OSP/medor-28-spread-1.jpg"><br>
-			Spread from the latest edition of Médor Nº28, showing the custom columns lay out made with html2print & CSS regions
-			(<a class="windowlinks" href="./OSP/medor-28-spread-1.jpg" target="_blank" alt="">link to image</a>)
+		<figure>	
+			<img alt="" src="./Paged.js/paged.js-used-in-varia-collective-space-guide-booklet.png"><br>
+			Screenshot of Paged.js being used to make a <a href="https://vvvvvvaria.org/~simoon/partylines/publishing-partyline/varia-collective-space-guide.pdf" target="_blank">Varia collective-space guide booklet</a> (edited and lay out by Simon Browne)
+			(<a class="windowlinks" href="./Paged.js/paged.js-used-in-varia-collective-space-guide-booklet.png" target="_blank" alt="">link to image</a>)
 		</figure>
-		<figure>
-			<img alt="" src="./OSP/medor-28-spread-2.jpg"><br>
-			Spread from the latest edition of Médor Nº28, showing the custom columns lay out made with html2print & CSS regions
-			(<a class="windowlinks" href="./OSP/medor-28-spread-2.jpg" target="_blank" alt="">link to image</a>)
+		<figure>	
+			<img alt="" src="./Paged.js/paged.js-volumetric-regimes-1.png"><br>
+			Screenshot of the cover of <a href="https://volumetricregimes.xyz/" target="_blank">Volumetric Regimes</a> (edited by <a href="https://possiblebodies.constantvzw.org/inventory/" target="_blank">Possible Bodies</a>, lay out by Manetta Berends), previewed through Paged.js
+			(<a class="windowlinks" href="./Paged.js/paged.js-volumetric-regimes-1.png" target="_blank" alt="">link to image</a>)
 		</figure>
-		<figure>
-			<img alt="" src="./OSP/medor-n28-web-version-of-article.png"><br>
-			Web article from the latest edition of Médor Nº28, showing how the same content is used for both the website and printed magazine
-			(<a class="windowlinks" href="./OSP/medor-n28-web-version-of-article.png" target="_blank" alt="">link to image</a>)
+		<figure>	
+			<img alt="" src="./Paged.js/paged.js-volumetric-regimes-2.png"><br>
+			Screenshot of the table of contents of <a href="https://volumetricregimes.xyz/" target="_blank">Volumetric Regimes</a> (edited by <a href="https://possiblebodies.constantvzw.org/inventory/" target="_blank">Possible Bodies</a>, lay out by Manetta Berends), previewed through Paged.js
+			(<a class="windowlinks" href="./Paged.js/paged.js-volumetric-regimes-2.png" target="_blank" alt="">link to image</a>)
 		</figure>
 	</div>