diff --git a/index.html b/index.html index b4d33ae..754d40c 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,8 @@ - - + @@ -48,54 +47,75 @@

28th March'21: Read & Repair

-

23rd March'21: User Condition S01E01

+

23rd March'21: User Condition S01E01

-

13 March'21: FHM #1 Feminist Hack Meetings: Feminist Servers

+

13 March'21: FHM #1 Feminist Hack Meetings: Feminist Servers

-

28 February'21: Read & Repair: Wireless Imagination

+

28 February'21: Read & Repair: Wireless Imagination

-

27 June'20: RE#SISTER: Corporeal Whispers

+

27 June'20: RE#SISTER: Corporeal Whispers

-

19 June'20: Niek Hilkmann - Groeten uit Charlois

+

19 June'20: Niek Hilkmann - Groeten uit Charlois

-

18 April'20: We hope this email finds you well

+

18 April'20: We hope this email finds you well

-

14 March'20:Radio on the Radio

+

14 March'20:Radio on the Radio

+
+ + + + + + +
+ + + + + + + + + +
+ + + - - - - +

↬ - chat.vvvvvvaria.org + direct link to chat!
- --> + + + - +

↝ - pad.vvvvvvaria.org/read_repair_supreme_connections -
--> + direct to pad +
- - + +

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

@@ -105,78 +125,99 @@
- ↬ direct link to audio - - --> + ↬ direct link to audio! + + + + + + +
+ +
↬ + direct link to Jitsi +
+ + + + +
+
↬ + direct link to PDF +
+ + + + + +
+ +
↬ + direct link to video +
+ + + + + +
+ +
↬ + caption + link to .jpg +
+ + + + + + + + + diff --git a/narrowscripts.js b/narrowscripts.js index d0d84b8..e460a1f 100644 --- a/narrowscripts.js +++ b/narrowscripts.js @@ -56,59 +56,88 @@ $(function() { fsidemobile(x) x.addListener(fsidemobile) -// SCRIPT DRAG AND RESIZE - - -// library: https://interactjs.io/docs/installation#cdn-streamlined -// needs embed -// script above same as --> -// also found this other options: https://www.webcomponents.org/element/jifalops/drag-resize and https://codepen.io/zz85/pen/gbOoVP - - - interact('.resize-drag') - .draggable({ - onmove: window.dragMoveListener - }) - .resizable({ - preserveAspectRatio: true, - edges: { left: true, right: true, bottom: true, top: true } - }) - .on('resizemove', function (event) { - var target = event.target, - x = (parseFloat(target.getAttribute('data-x')) || 0), - y = (parseFloat(target.getAttribute('data-y')) || 0); - - // update the element's style - target.style.width = event.rect.width + 'px'; - target.style.height = event.rect.height + 'px'; - - // translate when resizing from top or left edges - x += event.deltaRect.left; - y += event.deltaRect.top; - - target.style.webkitTransform = target.style.transform = - 'translate(' + x + 'px,' + y + 'px)'; - - target.setAttribute('data-x', x); - target.setAttribute('data-y', y); - target.textContent = event.rect.width + '×' + event.rect.height; - }); - - function dragMoveListener (event) { - var target = event.target, - // keep the dragged position in the data-x/data-y attributes - x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, - y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; - - // translate the element - target.style.webkitTransform = - target.style.transform = - 'translate(' + x + 'px, ' + y + 'px)'; - - // update the posiion attributes - target.setAttribute('data-x', x); - target.setAttribute('data-y', y); - } + + + function hideshowWelcome() { + var elwel = document.getElementById("showWel"); + elwel.classList.toggle("hide"); + + var bwel = document.getElementById("bhide_wel"); + bwel.classList.toggle("bhide_chat_off") + } + + function hideshowChat() { + var elchat = document.getElementById("showChat"); + elchat.classList.toggle("hide"); + + var bchat = document.getElementById("bhide_chat"); + bchat.classList.toggle("bhide_chat_off") + } + + function hideshowPad() { + var elether = document.getElementById("showEther"); + elether.classList.toggle("hide"); + + var bether = document.getElementById("bhide_ether"); + bether.classList.toggle("bhide_chat_off") + } + + + function hideshowAudio() { + var elau = document.getElementById("showAudio"); + elau.classList.toggle("hide"); + + var bau = document.getElementById("bhide_au"); + bau.classList.toggle("bhide_chat_off") + } + + + + function hideshowJitsi() { + var eljit = document.getElementById("showJit"); + eljit.classList.toggle("hide"); + + var bjit = document.getElementById("bhide_jit"); + bjit.classList.toggle("bhide_chat_off") + } + + + function hideshowEssay() { + var eless = document.getElementById("showEssay"); + eless.classList.toggle("hide"); + + var bess = document.getElementById("bhide_ess"); + bess.classList.toggle("bhide_chat_off") + } + + + function hideshowVideo() { + var elvid = document.getElementById("showVideo"); + elvid.classList.toggle("hide"); + + var bvid = document.getElementById("bhide_vid"); + bvid.classList.toggle("bhide_chat_off") + } + + + + function hideshowIMG() { + var elimg = document.getElementById("showImg"); + elimg.classList.toggle("hide"); + + var bimg = document.getElementById("bhide_img"); + bimg.classList.toggle("bhide_chat_off") + } + + + + function hideshowGal() { + var elgal = document.getElementById("showGal"); + elgal.classList.toggle("hide"); + + var bgal = document.getElementById("bhide_gal"); + bgal.classList.toggle("bhide_chat_off") + } // src="https://vjs.zencdn.net/7.10.2/video.min.js" @@ -134,3 +163,6 @@ $(function() { // myAudio.pause(); // } // } + + + diff --git a/narrowstyle.css b/narrowstyle.css index 7b208b4..a9e479e 100644 --- a/narrowstyle.css +++ b/narrowstyle.css @@ -86,7 +86,7 @@ p.about { position: fixed; top: 0; right: 0; - margin: 1rem; + margin: 1%; color: #ffffe5; z-index: 99; max-width: 80px; @@ -254,14 +254,67 @@ button.minimize:hover { padding-bottom: 2rem; } +.b_allmedia { + top: 100px; + margin: 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: #ffe4fd; + box-shadow: inset 0.3rem 0.2rem 0.3rem #ffe4fd; + border-radius: 1.2rem; + font-size: 0.8rem; + line-height: 1.2rem; + align-items: center; + background-color: #393c56; + margin: 0.5rem; + border: none; + } + +.b_allmedia button:hover { + box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; +} + +.bhide_chat_off { + color: #393c56 !important; + background-color: #ffe4fd !important; + box-shadow: none !important; + border: 0.03rem solid #393c56 !important; +} + +.bhide_chat_off{ + background: rgb(242,217,242); + background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%); + background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%); + background: linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2d9f2",endColorstr="#ffe4fd",GradientType=1); + /*content: " OFF";*/ +} + .live { margin-left: 300px; display: inline-block; - /* height: 100%; - width: 100%; */ + transition: margin-left 2s; } - .live-flex { display: flex; box-sizing: border-box; @@ -276,11 +329,22 @@ button.minimize:hover { word-wrap: break-word; } -.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe { - width: 100%; +.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 { @@ -290,46 +354,22 @@ button.minimize:hover { .halfscreen > * { height: 60vh; + border-radius: 0.2rem; } .thirdscreen { + margin: 1%; width: 25%; } -.live > * { - /* touch-action: none;*/ -} - -.resize-drag { - width: 620px; - padding: 0.4rem 1.8rem 1.8rem 0.4rem; - margin: 1rem; - touch-action: none; - box-sizing: border-box; - box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd; - border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; - position: relative; +.thirdscreen > * { + height: 60vh; + border-radius: 0.2rem; } -.resize-drag::before { - content: "⇱"; - font-size: 2rem; - width: 1rem; - height: 1rem; - color: #393c56; - position: absolute !important; - z-index: 999; - top: 0; - left: 0; - display: block; -} -.resize-drag:hover { - box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd; - animation: corners 8s infinite alternate; - -o-animation: corners 8s infinite alternate; - -moz-animation: corners 8s infinite alternate; - -webkit-animation: corners 8s infinite alternate; +.live > * { + /* touch-action: none;*/ } @keyframes corners { @@ -426,6 +466,15 @@ content: 'PLAY'; content: 'PAUSE'; } + +img { + width: 100%; + height: auto; + border-radius: 0.2rem; + max-width: 100%; +} + + .img-gallery { display: flex; flex-direction: row;