created layout fem hack meeting stream mar 13

4 years ago · f05ad61ebb
2 changed files with 100 additions and 30 deletions
--- a/index.html
+++ b/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>
+    <!-- <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");
--- a/narrowstyle.css
+++ b/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,
-.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%;
+  }
+
+}