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

created layout fem hack meeting stream mar 13

Browse Source
This commit is contained in:
JoanaChicau 2021-03-13 14:07:27 +01:00
parent f1b75af891
commit f05ad61ebb
2 changed files with 100 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -13,22 +13,26 @@
<div class="about"><a href="https://vvvvvvaria.org/logs/zamopuzo" target="_blank">back<span> ↗</span><br>↬ stage </a></div>
<div id="side" class="sidebar sidemin">
<button class="minimize" onclick="fside()"> ⇔</button>
<button class="minimize" onclick="fside()">⇔</button>
<div class="sidetop">
<!-- to add a new event copy paste above — as the ones below. -->
<!-- once the event is over remember to move to the sidebottom section-->
<p>2021.03.23: <a href="" target="_blank" >User Condition S01E01</a></p>
<p>2021.03.13: <a href="" target="_blank" >Feminist Hack Meetings: Feminist Servers</a></p>
</div>
<div class="middle">
<p>⇈ Will be awesome ↟ </p>
<p>⇈ Will be awesome ⇈</p>
<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
<p id="livesubtitle">Feminist Hack Meetings: Feminist Servers</p>
<p>⇊ Was amazing ↷ </p>
</div>
<div class="sidebottom">
<!-- <p>2021.03.13: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank" >FHM #1 Feminist Hack Meetings: Feminist Servers</a></p>
-->
<p>2021.02.28: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
<p>2020.06.27: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank" >RE#SISTER: Corporeal Whispers</a></p>
<p>2020.06.19: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank" >Niek Hilkmann - Groeten uit Charlois</a></p>
@ -37,11 +41,11 @@
</div>
</div>
<div class="live">
<div class="live live-flex">
<iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe>
<!-- <iframe class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe> -->
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
@ -63,12 +67,10 @@
type="video/mp4">
</video>
-->
<!-- <div class="resize-drag">
<div class="fullscreen">
<video
id="player"
class="video-js vjs-default-skin"
height="360"
width="640"
controls
preload="none"
>
@ -77,28 +79,28 @@
type="application/x-mpegURL"
/>
</video><br>
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_">URL of the BBB</a>
</div> -->
<a class="windowlinks" href="https://bbb.constantvzw.org/b/ang-twu-g0m-hib" target="_blank">if you want to join the call click here to access direct link of the BBB!</a>
</div>
<!-- CHAT INTERFACE -->
<!-- <div class="resize-drag">
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br>
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_">chat.vvvvvvaria.org</a>
</div> -->
<div class="halfscreen">
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> chat.vvvvvvaria.org</a>
</div>
<!-- AUDIO STREAM -->
<!--<audio controls loop="" class="resize-drag" src="http://w-i-t-m.net:8001/meander" type="audio/mp3"> </audio>-->
<!-- <audio controls loop="" class="halfscreen" src="http://w-i-t-m.net:8001/meander" type="audio/mp3"> </audio> -->
<!-- EXAMPLE ETHERPAD -->
<!-- <div class="resize-drag">
<iframe src="https://pad.vvvvvvaria.org/fhm#1.notes"></iframe><br>
<a class="windowlinks" href="https://pad.vvvvvvaria.org/fhm#1.notes" target="_">pad.vvvvvvaria.org/fhm#1.notes</a>
</div> -->
<div class="halfscreen">
<iframe src="https://pad.vvvvvvaria.org/fhm#1.notes"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/fhm#1.notes" target="_blank"> pad.vvvvvvaria.org/fhm#1.notes</a>
</div>
<!-- <p class="note"> * move and resize the elements above by dragging their corners / sides and click on the page to set the position *</p> -->
<p class="note"> the iterface is in experimental phase and some things may not work properly. There is the option to open the url of each element in a new window.</p>
<p class="note"> <u>Note</u>: this iterface 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>
@ -114,14 +116,14 @@ function fside() {
</script>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
<!--<script src="interact.min.js"></script>-->
<script src="interact.min.js"></script>
<!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
<!-- also found this other options:
https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP -->
<!--<script>
<script>
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener
@ -166,7 +168,7 @@ function dragMoveListener (event) {
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
</script>-->
</script>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script>
var player = videojs("#player");

78
narrowstyle.css
View File

@ -67,6 +67,7 @@ button {
bottom: 0;
right: 0;
margin: 0.2rem;
background-color: #393c56;
}
.about {
@ -112,7 +113,13 @@ button {
}
button.minimize {
box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd;
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
border-radius: 0.5rem 5rem 5rem 5rem;
line-height: 1rem;
text-align: center;
vertical-align: middle;
display: inline;
height: 2rem;
font-size: 1rem;
width: 2rem;
background-color: #393c56;
@ -124,6 +131,12 @@ button.minimize {
border: none;
}
button.minimize:hover {
color: #393c56;
background-color: #ffe4fd;
border-radius: inset 0.5rem 5rem 5rem 5rem;
}
.sidetop,
.sidebottom {
overflow-y: scroll;
@ -154,7 +167,7 @@ button.minimize {
}
.middle {
height: 80px;
height: auto;
font-size: 0.8rem;
display: flex;
flex-direction: column;
@ -172,6 +185,15 @@ button.minimize {
font-size: 2rem;
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 {
@ -214,6 +236,38 @@ button.minimize {
/* width: 100%; */
}
.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 2rem 0rem;
}
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
width: 100%;
}
.fullscreen > * {
height: 60vh;
}
.halfscreen {
margin: 1%;
width: 46%;
}
.halfscreen > * {
height: 60vh;
}
.thirdscreen {
width: 25%;
}
.live > * {
/* touch-action: none;*/
}
@ -229,9 +283,7 @@ button.minimize {
position: relative;
}
.drag::before,
.resize-drag::before,
.live > *::before {
.resize-drag::before {
content: "⇱";
font-size: 2rem;
width: 1rem;
@ -281,3 +333,19 @@ button.minimize {
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
}
}
/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 768px) {
.live-flex {
flex-direction: column;
}
.halfscreen , .thirdscreen {
width: 100%;
}
}