varia
/
web-narrowcast
12
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

updated player controls to reflect playstate, and also only load when there is a stream available

mx 3 years ago
parent
cda81fe79b
commit
97a7e5d6f7
12 changed files with 143 additions and 896 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      cmunbtl.ttf
  2. BIN
      cmunbtl.woff
  3. BIN
      cmunbto.eot
  4. BIN
      cmunbto.ttf
  5. BIN
      cmunci.eot
  6. BIN
      cmunci.ttf
  7. BIN
      cmunci.woff
  8. 258
      index.html
  9. 4
      interact.min.js
  10. 195
      narrowscripts.js
  11. 39
      narrowstyle-extra.css
  12. 543
      narrowstyle.css

BIN
cmunbtl.ttf
View File

Binary file not shown.

BIN
cmunbtl.woff
View File

Binary file not shown.

BIN
cmunbto.eot
View File

Binary file not shown.

BIN
cmunbto.ttf
View File

Binary file not shown.

BIN
cmunci.eot
View File

Binary file not shown.

BIN
cmunci.ttf
View File

Binary file not shown.

BIN
cmunci.woff
View File

Binary file not shown.

258
index.html
View File

@ -1,172 +1,200 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NARROWCAST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
<meta charset="utf-8">
<title>NARROWCAST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" /> -->
<!-- OUR STYLES -->
<link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
<link rel="stylesheet" type="text/css" media="all" href="narrowstyle-extra.css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<!-- OUR STYLES -->
<link rel="stylesheet" type="text/css" media="all" href="css/master.css" defer>
</link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"
type='text/css'>
<!-- OUR SCRIPTS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="narrowscripts.js"></script>
<!-- OUR SCRIPTS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="module" src="js/player.js" <script type="text/javascript" src="js/narrowscripts.js"></script>
</head>
<body>
<div class="linkmore">
<a href="https://vvvvvvaria.org/logs/zamopuzo" target="_blank">back ↗ stage </a>
<br>
<a href="https://stream.vvvvvvaria.org/about.html"> about ↯ over ↻ </a>
</div>
<div class="linkmore">
<a href="https://vvvvvvaria.org/logs/zamopuzo" target="_blank">back ↗ stage </a>
<br>
<a href="https://stream.vvvvvvaria.org/about.html"> about ↯ over ↻ </a>
</div>
<div id="side" class="sidebar sidemin">
<button class="minimize" onclick="fside()">⇆</button>
<div id="side" class="sidebar sidemin">
<button class="minimize" onclick="fside()">⇆</button>
<div class="sidetop">
<!-- ADD A FUTURE EVENT HERE -->
<!-- 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! -->
<div class="sidetop">
<!-- ADD A FUTURE EVENT HERE -->
<!-- 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>more TBA soon! <a href="https://varia.zone/en" target="_blank" > &#128064; </a> <br> meer TBA binnenkort! </p>
<p>more TBA soon! <a href="https://varia.zone/en" target="_blank"> &#128064; </a> <br> meer TBA binnenkort! </p>
<p>17 May '21: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E02 with Brendan Howell</a></p>
<p>17 May '21: <a href="http://varia.zone/en/usercond01.html" target="_blank">User Condition S01E02 with Brendan
Howell</a></p>
</div>
<div class="middle">
<p>⇈ Will be awesome ⇈ <br> ⇈ Zal geweldig zijn ⇈</p>
<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
<p id="livesubtitle"></p>
<p>⇊ Was amazing ↷ <br>⇊ Was geweldig ↷ </p>
</div>
</div>
<div class="middle">
<p>⇈ Will be awesome ⇈ <br> ⇈ Zal geweldig zijn ⇈</p>
<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
<p id="livesubtitle"></p>
<p>⇊ Was amazing ↷ <br>⇊ Was geweldig ↷ </p>
</div>
<div class="sidebottom">
<div class="sidebottom">
<p>28 March'21: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank" >Read & Repair</a></p>
<p>28 March'21: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank">Read & Repair</a></p>
<p>23 March'21: <a href="http://varia.zone/en/usercond01.html" target="_blank" >User Condition S01E01</a></p>
<p>23 March'21: <a href="http://varia.zone/en/usercond01.html" target="_blank">User Condition S01E01</a></p>
<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank" >FHM #1 Feminist Hack Meetings: Feminist Servers</a></p>
<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank">FHM #1 Feminist Hack
Meetings: Feminist Servers</a></p>
<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank">Read & Repair:
Wireless Imagination</a></p>
</div>
</div>
<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank">RE#SISTER: Corporeal
Whispers</a></p>
<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank">Niek Hilkmann - Groeten uit
Charlois</a></p>
<div class="live live-flex">
<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds
you well</a></p>
<!-- BUTTONS HIDE SHOW MEDIA -->
<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
<div class="b_allmedia">
<!-- etherpad -->
<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">WRITING <br> SCHRIJVEN</button>
<!-- audio streaming or files -->
<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">LISTENING <br> LUISTEREN</button>
<!-- image multiple -->
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
</div>
</div>
<!-- MEDIA CONTENT -->
<div class="live live-flex">
<!-- BUTTONS HIDE SHOW MEDIA -->
<!-- ETHERPAD -->
<!-- PLACEHOLDER link: https://pad.vvvvvvaria.org/varia.broadcast.intro -->
<div class="fullscreen" id="showEther">
<div>
<iframe src="https://pad.vvvvvvaria.org/user.condition.02.restorative"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/user.condition.02.restorative" target="_blank"> Restorative Netstalgia ↝ direct to pad </a>
<div class="b_allmedia">
<!-- etherpad -->
<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">WRITING <br> SCHRIJVEN</button>
<!-- audio streaming or files -->
<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">LISTENING <br> LUISTEREN</button>
<!-- image multiple -->
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
</div>
<div>
<iframe src="https://pad.vvvvvvaria.org/user.condition.02.reflective"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/user.condition.02.reflective" target="_blank"> Reflective Netstalgia ↝ direct to pad </a>
<!-- MEDIA CONTENT -->
<!-- ETHERPAD -->
<!-- PLACEHOLDER link: https://pad.vvvvvvaria.org/varia.broadcast.intro -->
<div class="fullscreen" id="showEther">
<div>
<iframe src="https://pad.vvvvvvaria.org/user.condition.02.restorative"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/user.condition.02.restorative" target="_blank">
Restorative Netstalgia ↝ direct to pad </a>
</div>
<div>
<iframe src="https://pad.vvvvvvaria.org/user.condition.02.reflective"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/user.condition.02.reflective" target="_blank">
Reflective Netstalgia ↝ direct to pad </a>
</div>
</div>
</div>
<!-- AUDIO -->
<!-- PLACEHOLDER link: https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3
<!-- AUDIO -->
<!-- PLACEHOLDER link: https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3
previous audio cast: https://stream.w-i-t-m.net/meander -->
<div class="audio-stream fullscreen" id="showAudio">
<audio id="player" preload="none" src="https://stream.w-i-t-m.net/meander"> </audio>
<p>
Press play (best listened in FireFox). It might take a minute to load.</p>
<div class="audio-buttons">
<button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
<button class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
<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>
<div class="audio-stream fullscreen" id="showAudio">
<!-- <audio id="player" preload="none" src="https://stream.w-i-t-m.net/meander"> </audio> -->
<audio id="player" preload="none" src="https://ice.suroh.tk/stnThrw.ogg"> </audio>
<p>Press play (best listened in FireFox). It might take a minute to load.</p>
<div class="audio-buttons">
<button class="stream-button b-narrow streamPlay">Play</button>
<button class="stream-button b-narrow streamStop" disabled>Stop</button>
<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>
</div>
<span class="audio-link"> ↬ <a class="windowlinks" href="https://stream.w-i-t-m.net/meander" target="_blank">
direct link to audio! </a></span>
</div>
<span class="audio-link"> ↬ <a class="windowlinks" href="https://stream.w-i-t-m.net/meander" target="_blank"> direct link to audio! </a></span>
</div>
<!-- IMAGE GALLERY -->
<!-- PLACEHOLDER links:
<!-- IMAGE GALLERY -->
<!-- PLACEHOLDER links:
https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg
https://vvvvvvaria.org/archive/varia-server/7e920c7f_Screenshot%20from%202020-03-21%2019-07-20.png
https://vvvvvvaria.org/archive/varia-server/varia-home-red.png
https://vvvvvvaria.org/archive/varia-server/welcome.png
-->
<div class="img-gallery" id="showGal">
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p>
<figure>
<img src="http://varia.zone/images/infinite-contemporaneity-device.jpg"><br> ↬
<a class="windowlinks" href="http://www.wintermute.org/brendan/?p=the-infinite-contemporaneity-device" target="_blank" alt="">caption: 'Infinite Contemporaneity Device ↬ link to .jpg</a>
</figure>
<figure>
<img src="https://cdn.webampskins.org/screenshots/48279a18204f1d2cf7db3fc98be51ae9.png"><br> ↬
<a class="windowlinks" href="https://skins.webamp.org/" target="_blank" alt=""> caption: 'Winamp skin' ↬ link to .png</a>
</figure>
<figure>
<img src="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg"><br> ↬
<a class="windowlinks" href="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg" target="_blank" alt="">caption: 'Read & Repair — Wireless Imagination' ↬ link to .jpg</a>
</figure>
<figure>
<img src="https://pbs.twimg.com/media/E1CKa-zWEAQuizc?format=jpg&name=large"><br> ↬
<a class="windowlinks" href="https://twitter.com/CRTpixels" target="_blank" alt=""> caption: 'CRT Pixels' ↬ link to .jpg</a>
</figure>
</div>
<div class="img-gallery" id="showGal">
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p>
<figure>
<img src="http://varia.zone/images/infinite-contemporaneity-device.jpg"><br> ↬
<a class="windowlinks" href="http://www.wintermute.org/brendan/?p=the-infinite-contemporaneity-device"
target="_blank" alt="">caption: 'Infinite Contemporaneity Device ↬ link to .jpg</a>
</figure>
<figure>
<img src="https://cdn.webampskins.org/screenshots/48279a18204f1d2cf7db3fc98be51ae9.png"><br> ↬
<a class="windowlinks" href="https://skins.webamp.org/" target="_blank" alt=""> caption: 'Winamp skin' ↬ link to
.png</a>
</figure>
<figure>
<img
src="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg"><br>
↬
<a class="windowlinks"
href="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg"
target="_blank" alt="">caption: 'Read & Repair — Wireless Imagination' ↬ link to .jpg</a>
</figure>
<figure>
<img src="https://pbs.twimg.com/media/E1CKa-zWEAQuizc?format=jpg&name=large"><br> ↬
<a class="windowlinks" href="https://twitter.com/CRTpixels" target="_blank" alt=""> caption: 'CRT Pixels' ↬ link
to .jpg</a>
</figure>
</div>
<a href="http://www.wintermute.org/brendan/" id="brendan">
<img src="https://archive.transmediale.de/sites/default/files/public/styles/6col/public/node/participant/field_participant_image/16950/Brendan_Howell_p1855_web_zuklein.jpg?itok=oEwY0erf" alt="Brendan Howell">
</a>
<a href="http://www.wintermute.org/brendan/" id="brendan">
<img
src="https://archive.transmediale.de/sites/default/files/public/styles/6col/public/node/participant/field_participant_image/16950/Brendan_Howell_p1855_web_zuklein.jpg?itok=oEwY0erf"
alt="Brendan Howell">
</a>
<a href="https://silviolorusso.com" id="silvio">
<img src="https://media-exp1.licdn.com/dms/image/C4D03AQEPRwVQ4I_P3Q/profile-displayphoto-shrink_800_800/0/1516954117428?e=1626307200&v=beta&t=PpaCo0I8VLPpM_dt_y77TdiFVu4W5T966F1LyUO65KM" alt="Silvio Lorusso">
</a>
<a href="https://silviolorusso.com" id="silvio">
<img
src="https://media-exp1.licdn.com/dms/image/C4D03AQEPRwVQ4I_P3Q/profile-displayphoto-shrink_800_800/0/1516954117428?e=1626307200&v=beta&t=PpaCo0I8VLPpM_dt_y77TdiFVu4W5T966F1LyUO65KM"
alt="Silvio Lorusso">
</a>
<p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly * <u>Nota</u>: deze interface is in experimentele fase ☆ﾟ.*･｡ﾟ en sommige dingen kunnen niet altijd soepel werken *</p>
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
<p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always
smoothly * <u>Nota</u>: deze interface is in experimentele fase ☆ﾟ.*･｡ﾟ en sommige dingen kunnen niet altijd
soepel werken *</p>
</div>
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
</div>
</body>
</html>
</html>

4
interact.min.js
View File

File diff suppressed because one or more lines are too long

195
narrowscripts.js
View File

@ -1,195 +0,0 @@
// 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 = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';
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");
}
function fsidemobile(x) {
if (x.matches) { // If media query matches
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
} else {
element.classList.toggle("");
}
}
var x = window.matchMedia("(max-width: 768px)")
fsidemobile(x)
x.addListener(fsidemobile)
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();
}
// 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();
// }
// }

39
narrowstyle-extra.css
View File

@ -1,39 +0,0 @@
/* ADD HERE YOUR OWN S*T*Y*L*E */
/* once the event is over remember these and the corresponding classes
on index.html and put all back to 'placeholder mode' dank je! */
/* 17/05/2021 Silvio's User Condition #02 */
#showEther.fullscreen {
position: relative;
width: 85%;
}
#showEther.fullscreen > div {
width: 50%;
float: left;
}
#showEther.fullscreen > div > iframe {
width: 100%;
height: 600px;
}
#brendan, #silvio {
width: 80px;
height: auto;
position: fixed;
bottom: 100px;
right: 80px;
}
#brendan {
bottom: 230px;
}
#brendan > img, #silvio > img {
border-radius: 50px;
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
}

543
narrowstyle.css
View File

@ -1,543 +0,0 @@
@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;
}
body {
margin: 0rem;
font-family: "Computer Modern Typewriter Light";
background-color: #393c56;
color: #ffe4fd;
height: 100%;
}
iframe,
video {
border: none;
width: inherit;
}
a,
button {
cursor: pointer;
}
#about {
margin: 5rem 2%;
}
p.about {
width: 70%;
}
.note {
font-size: 0.8rem;
position: fixed;
bottom: 7px;
right: 25px;
margin: 0.2rem;
margin-left: 310px;
background-color: #393c56;
}
.linkmore {
font-family: "Computer Modern Classical Serif Italic";
position: fixed;
top: 0;
right: 0;
margin: 1%;
color: #ffffe5;
z-index: 99;
max-width: 80px;
}
.linkmore a, .linkmore a:visited {
font-size: 1rem;
line-height: 0.6rem;
color: #ffffe5;
text-decoration: none;
text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
padding: 0rem 0rem 2rem 0rem;
}
.linkmore a:hover {
text-decoration: underline;
text-underline-position: unset;
text-decoration-style: wavy;
}
#side {
box-shadow: inset 0rem -0.4rem 1rem #ffe4fd;
}
.sidebar {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
box-shadow: 1rem 0rem 6rem #ffe4fd;
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 #ffe4fd;
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: #393c56;
color: #ffe4fd;
position: fixed;
top: 0;
left: 0;
margin: 0.5rem;
border: none;
}
button.minimize:hover {
color: #393c56;
background-color: #ffe4fd;
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: #aec7ea;
}
.sidetop a {
color: #ffe4fd;
margin-top: auto;
}
.middle {
height: auto;
font-size: 0.8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
/* box-shadow: -0.2rem -0.2rem 1rem #ffe4fd;*/
width: 100%;
padding: 0.5rem 1rem;
}
.middle p {
margin: 0px;
}
#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 #ff029c;
}
}
@-webkit-keyframes glowbutton {
to {
box-shadow: 0 0 8px #ff029c;
}
}
.windowlinks {
color: #ffe4fd;
}
.sidebottom {
height: 45vh;
box-shadow: 10rem -6rem 4rem #ffe4fd;
}
.sidebottom p {
margin: 0.25rem 0rem;
}
.sidebottom a {
color: #aec7ea;
}
.sidebottom p:last-child {
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: -moz-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
background: linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
/*content: " OFF";*/
}
.bhide_chat_off:hover {
background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%);
background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 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 #ffe4fd;
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 #ffe4fd;
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: #393c56;
background-color: #ffe4fd;
}
button.b-narrow:hover {
background-color: #393c56;
color: #ffe4fd;
}
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;
}*/
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%;
}
}
Write Preview
Loading…
Cancel
Save