created layout fem hack meeting stream mar 13

index.html

@@ -13,23 +13,27 @@
   <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.02.28: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank" >Read & Repair: Wireless Imagination</a></p>
+
+	<!-- <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>
       <p>2020.04.18: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</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 class="resize-drag" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
-    </iframe>
+    </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>
+    <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> -->
+    </div> 
     
 
     <!-- CHAT INTERFACE -->
-    <!-- <div class="resize-drag">
+    <div class="halfscreen">
-    <iframe src="https://chat.vvvvvvaria.org/"></iframe><br>
+    <iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬ 
-    <a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_">chat.vvvvvvaria.org</a> 
+    <a class="windowlinks" href="https://chat.vvvvvvaria.org/"  target="_blank"> chat.vvvvvvaria.org</a>
-    </div> -->
+    </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">
+    <div class="halfscreen">
-        <iframe src="https://pad.vvvvvvaria.org/fhm#1.notes"></iframe><br>
+        <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>
+        <a class="windowlinks" href="https://pad.vvvvvvaria.org/fhm#1.notes"  target="_blank">  pad.vvvvvvaria.org/fhm#1.notes</a>
-        </div> -->
+    </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");

narrowstyle.css

@@ -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 {
-.resize-drag::before,
-.live > *::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%;
+  }
+
+}