diff --git a/old-events/cc-nlcl-tales/cmunbtl.ttf b/old-events/cc-nlcl-tales/cmunbtl.ttf new file mode 100644 index 0000000..b0f26fa Binary files /dev/null and b/old-events/cc-nlcl-tales/cmunbtl.ttf differ diff --git a/old-events/cc-nlcl-tales/cmunci.ttf b/old-events/cc-nlcl-tales/cmunci.ttf new file mode 100644 index 0000000..4d41d1f Binary files /dev/null and b/old-events/cc-nlcl-tales/cmunci.ttf differ diff --git a/old-events/cc-nlcl-tales/index.html b/old-events/cc-nlcl-tales/index.html new file mode 100644 index 0000000..ee68c33 --- /dev/null +++ b/old-events/cc-nlcl-tales/index.html @@ -0,0 +1,428 @@ + + + + + NARROWCAST + + + + + + + + + + + + + + + + + + + + +
+ about ↯ over ↻ +
+ + + + +
+ + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + * ◝ ₊· ON AIR ♪ ♬ ヾ♬ ¨ * • WELCOME TO THE VARIA NARROWCAST • ♬ °¸.✧ ♪ ♬ ヾclick on the buttons on the right side to display the different modalities ﾉ ♬ ♪ ON AIR ♫♪. ♪ . * ◝ ₊· + + + + + +
+ +

+ Press play (best listened in FireFox). It might take a minute to load.

+
+ + + + + + + +
+ ↬ direct link to audio! +
+ + + + +
+ +
↬ + direct link to ↬ youtube stream +
+ + + + + + + + + + +
+
↝ + direct link to ↬ pad +
+ + + + + +
+ + + +
+
+ 🤖 🤝 🙃 = "human-machine collaboration"; + 💻 💛🔥 🎹 = "CodeKlavier"; + 🌍 🔊 🌈 = "networked audio-visuals"; + 🌊 🎶 = "Tidal Cycles"; + ©️ ➡️ ♻️ = "FL0SS" (free/libre and open source software); + 🔮 🖥️✨ = esoteric programming languages; + + about chance operations [+] +
+
+ + + + + + + + + +
+ +
↬ + caption: ↬ link to .jpg +
+ + + + +
+ + + + +
↬ ARquatic at Home + ↬ direct link to video stream and + ↬ link to Apple app or + ↬ link to Android app + +



+ + + +
↬ Sasj & Timo - Live at Choreographing Coding + ↬ direct link to stream + +
+ + + + +
+
↬ + direct link to chat! +
+ + + + + + + + + + +
+
↬ + ↬ direct link to Choreographies of the Circle & Other Geometries +
+ + + + + + + +
+ + + + + + + + diff --git a/old-events/cc-nlcl-tales/narrowscripts.js b/old-events/cc-nlcl-tales/narrowscripts.js new file mode 100644 index 0000000..1f0f38e --- /dev/null +++ b/old-events/cc-nlcl-tales/narrowscripts.js @@ -0,0 +1,214 @@ +// SCRIPTS FOR THE NEW AUDIO PLAYER + +(function(){ + + function waitForIt(selector, time) { + if(document.querySelector(selector)!=null) { + + var chat_title = document.getElementsByClassName("chatbox-title__text")[0]; + var element = document.createElement("span"); + + element.innerHTML = '
'; + + chat_title.insertAdjacentElement('afterend', element); + + return; + } + else { + setTimeout(function() { + + waitForIt(selector, time); + + }, time); + } + } + + waitForIt(".toggle-smiley", 1000); +})(); + +$(function() { + console.log("PARENT READY"); + $("iframe").on("load", function(){ + console.log("LOADED"); + $(this).contents().find('.kiwi-startup-common').hide(); + }); + }); + + +// SCRIPT for button to hide side pannel --> + + function fside() { + var element = document.getElementById("side"); + element.classList.toggle("sideminclicked"); + } + + +// SCRIPT MOBILE SIDEMENU HIDE + + var x = window.matchMedia("(max-width: 768px)") + + function fsidemobile(x) { + if (x.matches) { // If media query matches + var element = document.getElementById("side"); + element.classList.toggle("sideminclicked"); + } else { + element.classList.toggle(""); + } + } + + fsidemobile(x) + + + function hideshowWelcome() { + var elwel = document.getElementById("showWel"); + elwel.classList.toggle("hide"); + + var bwel = document.getElementById("bhide_wel"); + bwel.classList.toggle("bhide_chat_off") + + we = document.getElementById("showWel"); + we.scrollIntoView(); + } + + function hideshowChat() { + var elchat = document.getElementById("showChat"); + elchat.classList.toggle("hide"); + + var bchat = document.getElementById("bhide_chat"); + bchat.classList.toggle("bhide_chat_off") + + cha = document.getElementById("showChat"); + cha.scrollIntoView(); + } + + function hideshowPad() { + var elether = document.getElementById("showEther"); + elether.classList.toggle("hide"); + + var bether = document.getElementById("bhide_ether"); + bether.classList.toggle("bhide_chat_off") + + eth = document.getElementById("showEther"); + eth.scrollIntoView(); + } + + + function hideshowAudio() { + var elau = document.getElementById("showAudio"); + elau.classList.toggle("hide"); + + var bau = document.getElementById("bhide_au"); + bau.classList.toggle("bhide_chat_off") + + au = document.getElementById("showAudio"); + au.scrollIntoView(); + } + + + + function hideshowJitsi() { + var eljit = document.getElementById("showJit"); + eljit.classList.toggle("hide"); + + var bjit = document.getElementById("bhide_jit"); + bjit.classList.toggle("bhide_chat_off") + + jit = document.getElementById("showJit"); + jit.scrollIntoView(); + } + + + function hideshowEssay() { + var eless = document.getElementById("showEssay"); + eless.classList.toggle("hide"); + + var bess = document.getElementById("bhide_ess"); + bess.classList.toggle("bhide_chat_off") + + ess = document.getElementById("showEssay"); + ess.scrollIntoView(); + } + + + function hideshowVideo() { + var elvid = document.getElementById("showVideo"); + elvid.classList.toggle("hide"); + + var bvid = document.getElementById("bhide_vid"); + bvid.classList.toggle("bhide_chat_off") + + vid = document.getElementById("showVideo"); + vid.scrollIntoView(); + } + + + + function hideshowIMG() { + var elimg = document.getElementById("showImg"); + elimg.classList.toggle("hide"); + + var bimg = document.getElementById("bhide_img"); + bimg.classList.toggle("bhide_chat_off") + + im = document.getElementById("showImg"); + im.scrollIntoView(); + } + + + + function hideshowGal() { + var elgal = document.getElementById("showGal"); + elgal.classList.toggle("hide"); + + var bgal = document.getElementById("bhide_gal"); + bgal.classList.toggle("bhide_chat_off") + + gal = document.getElementById("showGal"); + gal.scrollIntoView(); + } + + + // button while playing extra style + + function bplaytoggle () { + var pbutton = document.getElementById("bp"); + pbutton.classList.add("bClicked"); + + var sbutton = document.getElementById("bs"); + sbutton.classList.remove("bClicked"); + } + + +function bstoptoggle () { + var pbutton = document.getElementById("bp"); + pbutton.classList.remove("bClicked"); + + var sbutton = document.getElementById("bs"); + sbutton.classList.add("bClicked"); + } + + + // src="https://vjs.zencdn.net/7.10.2/video.min.js" + + // var player = videojs("#player"); + + + // var aud1= document.getElementById('audioBG'); + // var dur1= document.getElementById('dur1'); + // function mDur(dur,aud){dur.max= aud.duration}; + // function mPlay(dur,aud){dur.value=aud.currentTime}; + // function mSet(dur,aud){aud.currentTime=dur.value}; + + + // function playpause(podcast){ + // var myAudio = document.getElementById(podcast); + // var myIcon = document.querySelector("."+podcast); + // if (myAudio.paused) { + // myIcon.className = podcast+" fa b-pause"; + // myAudio.play(); + // } else { + // myIcon.className = podcast+" fa b-play"; + // myAudio.pause(); + // } + // } + diff --git a/old-events/cc-nlcl-tales/narrowstyle.css b/old-events/cc-nlcl-tales/narrowstyle.css new file mode 100644 index 0000000..d759d34 --- /dev/null +++ b/old-events/cc-nlcl-tales/narrowstyle.css @@ -0,0 +1,585 @@ +@font-face { + font-family: "Computer Modern Classical Serif Italic"; + src: url("cmunci.eot"); + src: url("cmunci.eot?#iefix") format("embedded-opentype"), + url("cmunci.woff") format("woff"), url("cmunci.ttf") format("truetype"), + url("cmunci.svg#cmunci") format("svg"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: "Computer Modern Typewriter Light"; + src: url("cmunbtl.eot"); + src: url("cmunbtl.eot?#iefix") format("embedded-opentype"), + url("cmunbtl.woff") format("woff"), url("cmunbtl.ttf") format("truetype"), + url("cmunbtl.svg#cmuntt") format("svg"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Computer Modern Typewriter Light"; + src: url("cmunbto.eot"); + src: url("cmunbto.eot?#iefix") format("embedded-opentype"), + url("cmunbto.woff") format("woff"), url("cmunbto.ttf") format("truetype"), + url("cmunbto.svg#cmunbto") format("svg"); + font-weight: normal; + font-style: italic; +} + +html { + box-sizing: border-box; + height: 100%; + font-size: 14pt; + line-height: 16pt; +} + +*, +*:before, +*:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; +} + +:root { + --color-purple: #393c56; + --color-lightpink: #ffe4fd; + --color-pink: #ff029c; + --color-lightblue: #aec7ea; + --color-lightyellow: #ffffe5; +} + +body { + margin: 0rem; + font-family: "Computer Modern Typewriter Light"; + background-color: var(--color-purple); + color: var(--color-lightpink); + height: 100%; +} + +iframe, +video { + border: none; + width: inherit; +} + +a, +button { + cursor: pointer; +} + +marquee { + +} + +#about { + margin: 5rem 2%; + width: 60%; +} + +p.about { + width: 70%; +} + +.note { + font-size: 0.8rem; + position: fixed; + bottom: 7px; + right: 25px; + margin: 0.2rem; + margin-left: 310px; + background-color: var(--color-purple); +} + + +.linkmore { + font-family: "Computer Modern Classical Serif Italic"; + position: fixed; + top: 0; + right: 0; + margin: 3% 1% 0% 1%; + color: var(--color-lightyellow); + z-index: 99; + max-width: 80px; +} + + +.linkmore a, .linkmore a:visited { + font-size: 1rem; + line-height: 0.6rem; + color: var(--color-lightyellow); + text-decoration: none; + text-shadow: 0.1rem 0.01rem 0.05rem var(--color-purple); + padding: 0rem 0rem 0rem 0rem; +} + +.linkmore a:hover { + text-decoration: underline; + text-underline-position: unset; + text-decoration-style: wavy; +} + +#side { + box-shadow: inset 0rem -0.4rem 1rem var(--color-lightpink); +} + +.sidebar { + height: 100%; + position: fixed; + z-index: 1; + top: 0; + left: 0; + box-shadow: 1rem 0rem 6rem var(--color-lightpink); + overflow-x: hidden; + overflow-y: hidden; +} + +.sidemin { + width: 300px; + transition: width 2s; +} + +.sideminclicked { + width: 30px; +} + +.sideminclicked + .live { + transition: margin-left 2s; + margin-left: 40px; +} + +button.minimize { + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); + border-radius: 0.5rem 5rem 5rem 5rem; + line-height: 1.2rem; + display: flex; + justify-content: center; + align-items: center; + height: 2rem; + font-size: 1.8rem; + width: 2rem; + background-color: var(--color-purple); + color: var(--color-lightpink); + position: fixed; + top: 0; + left: 0; + margin: 0.5rem; + border: none; +} + +button.minimize:hover { + color: var(--color-purple); + background-color: var(--color-lightpink); + border-radius: inset 0.5rem 5rem 5rem 5rem; +} + +.sidetop, +.sidebottom { + overflow-y: scroll; + scrollbar-width: none; + overflow: -moz-scrollbars-none; + -ms-overflow-style: none; + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow: -ms-autohiding-scrollbar; + display: flex; + flex-direction: column; + padding: 1rem 1rem; +} + +.sidetop { + height: 45vh; + font-size: 1.2rem; + justify-content: flex-end; +} + +.sidetop p { + margin: 0.5rem 0rem; + color: var(--color-lightblue); +} + +.sidetop a { + color: var(--color-lightpink); + margin-top: auto; +} + +.middle { + height: auto; + font-size: 0.8rem; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + padding: 0.5rem 1rem; +} + +.middle p { + margin: 0px; +} + +.middle p a, .middle p a:visited { + font-family: "Computer Modern Typewriter Light"; + color: var(--color-lightpink); + text-decoration: none; + font-size: 14pt; + line-height: 16pt; +} + +.middle p a:hover { + color: var(--color-lightblue); +} + +#livetitle { + font-size: 1.8rem; + animation: glow 1.6s infinite alternate; + -webkit-animation: glow 1.6s infinite alternate; + margin: 0.4rem 0rem 0rem 0rem; +} + +#livesubtitle{ + font-size: 1rem; + animation: glow 1.6s infinite alternate; + -webkit-animation: glow 1.6s infinite alternate; + line-height: 1rem; + margin: 0.2rem 0rem 0.2rem 0rem; +} + +@-webkit-keyframes glow { + to { + text-shadow: 0 0 8px var(--color-pink); + } +} + +@-webkit-keyframes glowbutton { + to { + box-shadow: 0 0 8px var(--color-pink); + } +} + +.windowlinks { + color: var(--color-lightpink); +} + +.sidebottom { + height: 45vh; + box-shadow: 10rem -6rem 4rem var(--color-lightpink); +} + +.sidebottom p { + margin: 0.25rem 0rem; +} + +.sidebottom a { + color: var(--color-lightblue); +} + +.sidebottom p:last-child { + padding-bottom: 2rem; +} + +.b_allmedia { + top: 100px; + margin: 0% 1% 1% 1%; + z-index: 99; +} + + +.hide { + display: none !important; + opacity: 0; + transition: visibility 0s linear 300ms, opacity 300ms; +} + +.b_allmedia { + position: fixed; + right: 0; + width: auto; + display: flex; + flex-direction: column; + justify-content: center; +} + +.b_allmedia button { + font-family: "Computer Modern Typewriter Light"; + color: var(--color-lightpink); + box-shadow: inset 0.3rem 0.2rem 0.3rem var(--color-lightpink); + border-radius: 1.2rem; + font-size: 0.8rem; + line-height: 1.2rem; + align-items: center; + background-color: var(--color-purple); + margin: 0.5rem; + border: none; + } + +.b_allmedia button:hover { + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); +} + +.bhide_chat_off { + color: var(--color-purple) !important; + background-color: var(--color-lightpink) !important; + box-shadow: none !important; + border: 0.03rem solid var(--color-purple) !important; +} + +.bhide_chat_off{ +background: -moz-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); +background: -webkit-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); +background: linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); + /*content: " OFF";*/ +} + +.bhide_chat_off:hover { +background: -moz-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); +background: -webkit-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); +background: linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); +} + +.live { + margin-left: 300px; + display: inline-block; + transition: margin-left 2s; +} + +.live-flex { + display: flex; + box-sizing: border-box; + box-shadow: inset -0.6rem 0rem 0.8rem var(--color-lightpink); + border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; + flex-wrap: wrap; + flex-direction: row; + padding: 0rem 0rem 4rem 0rem; +} + +.live-flex a { + word-wrap: break-word; +} + +.fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe { + margin: 1%; + width: 95%; +} +.fullscreen > * { + height: 60vh; + border-radius: 0.2rem; +} + +.fullscreen > img, .halfscreen > img, .thirdscreen > img { + max-width: 100% !important; + height: auto !important; +} + +#showAudio > * { + height: auto !important; +} + +.halfscreen { + margin: 1%; + width: 44.5%; +} + +.halfscreen > * { + height: 60vh; + border-radius: 0.2rem; +} + +.thirdscreen { + margin: 1%; + width: 25%; +} + +.thirdscreen > * { + height: 60vh; + border-radius: 0.2rem; +} + + +.live > * { + /* touch-action: none;*/ +} + +@keyframes corners { + 0% { + border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; + -webkit-border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; + } + 20% { + border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + } + 100% { + border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + } +} + +@-webkit-keyframes corners { + 0% { + border-radius: 2rem 0rem 1rem 2rem; + -webkit-border-radius: 2rem 0rem 1rem 2rem; + } + 20% { + border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + } + 100% { + border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + } +} + +.audio-stream { + margin: 4rem 0% 0% 0%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, 0%); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; +} + +.audio-link { + margin: 2rem 0% 2rem 0% ; +} + +.audio-stream > input { + margin: 0% 2rem 0% 2rem; +} + +.audio-stream button { + margin: 0.5rem 0rem; +} + +.audio-buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + width: 80%; + margin: 0rem 1rem; +} + +button.b-narrow { + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); + border: 0.03rem solid #393c56; + border-radius: 0.5rem 5rem 5rem 5rem; + line-height: 1rem; + text-align: center; + vertical-align: middle; + display: inline; + padding: 0.6rem; + font-size: 1.6rem; + width: auto; + color: var(--color-purple); + background-color: var(--color-lightpink); +} + + +button.b-narrow:hover { + background-color: var(--color-purple); + text-shadow: -1px -1px 1px var(--color-lightpink) !important; +} + +.bClicked { + background-color: var(--color-purple) !important; + color: var(--color-lightpink) !important; + /* -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #ffe4fd !important; */ + +} + +button.vol { + border-radius: 5rem 0.5rem 5rem 5rem; +} + +.b-play::before { +content: 'PLAY'; +} + +.b-pause::before { +content: 'PAUSE'; +} + + +img { + width: 100%; + height: auto; + border-radius: 0.2rem; + max-width: 100%; +} + + +.img-gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + padding: 1rem; +} + +.img-gallery-title { + width: 100%; + margin: 0rem 1rem; + +} + +.img-gallery figure { + width: 20%; + margin: 0.5rem; +} + +.img-gallery img { + width: 100%; + border-radius: 1rem 0.5rem 1rem 0.5rem; +} + + + +/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */ + + +@media only screen and (max-width: 768px) { + +/* .live-flex { + flex-direction: column; + }*/ + + +.b_allmedia button { + font-size: 0.7rem; + line-height: 1rem; + } + +.linkmore a { + font-size: 0.8rem; +} + p.about { + width: 95%; + } + + .halfscreen , .thirdscreen { + width: 100%; + margin: 4rem 0% 0rem 0%; + } + + .note { + position: relative; + margin: 0% 0% 2rem 2rem !important; + } + + + .audio-stream { + margin: 4rem 0% 2rem 0%; + } + + .img-gallery figure { + width: 98%; + } + + +}