added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info

index.html

@@ -19,8 +19,8 @@
     <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>28th March'21: <a href="https://varia.zone/en/"  target="_blank" >Read & Repair</a></p>
+      <p>28th March'21 — 11:00 CET: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
-      <p>23rd March'21 18:00 CET: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
+      <p>23rd March'21 — 18:00 CET: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
 
 
     </div>
@@ -69,10 +69,12 @@
       <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
       <audio id="audioBG"
       preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
-      <source src="http://w-i-t-m.net:8001/meander">
+            <source src="http://w-i-t-m.net:8001/meander">
       </audio>
       <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
-      <!-- <span id="tracktime"> 00:00 / 0 </span> -->↬ <br><a class="windowlinks" href="http://w-i-t-m.net:8001/meander"  target="_blank"> direct link to audio</a>
+      <!-- <span id="tracktime"> 00:00 / 0 </span> -->
+      <br>
+      <span class="audio-link">  ↬ <a class="windowlinks" href="http://w-i-t-m.net:8001/meander"  target="_blank"> direct link to audio</a></span>
     </div>
 
 
@@ -151,6 +153,20 @@ 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) // Call listener function at run time
+x.addListener(fsidemobile) // Attach listener function on state changes
 </script>
 
 <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->

narrowstyle.css

@@ -350,6 +350,7 @@ button.minimize:hover {
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .audio-stream > input {
@@ -466,6 +467,10 @@ content: 'PAUSE';
     margin: 6rem 0% 0% 6rem;
   }
 
+  .audio-link{
+    margin: 2rem 0% 0% 0%;
+  }
+
   .lil-face{
     position: relative;
     margin: 0% 0% 2rem 1rem;