From 55d0a7a4eea9952087493417064863e4a80075ec Mon Sep 17 00:00:00 2001
From: JoanaChicau <joaninha_quelhas@hotmail.com>
Date: Tue, 23 Mar 2021 12:20:19 +0100
Subject: [PATCH] added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info
---
 index.html      | 24 ++++++++++++++++++++----
 narrowstyle.css |  5 +++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 032a3a1..cfba9cd 100644
--- a/index.html
+++ b/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>23rd March'21 18:00 CET: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</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>
 
 
     </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 -->
diff --git a/narrowstyle.css b/narrowstyle.css
index 865b776..5c9043f 100644
--- a/narrowstyle.css
+++ b/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;