Browse Source

added script hide sidebar on mobile

also added other minor adjustments on mobile and updated Read and Repair link and time info
master
JoanaChicau 4 years ago
parent
commit
55d0a7a4ee
  1. 22
      index.html
  2. 5
      narrowstyle.css

22
index.html

@ -19,8 +19,8 @@
<div class="sidetop"> <div class="sidetop">
<!-- to add a new event copy paste above — as the ones below. --> <!-- to add a new event copy paste above — as the ones below. -->
<!-- once the event is over remember to move to the sidebottom section--> <!-- 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> </div>
@ -72,7 +72,9 @@
<source src="http://w-i-t-m.net:8001/meander"> <source src="http://w-i-t-m.net:8001/meander">
</audio> </audio>
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px"> <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> </div>
@ -151,6 +153,20 @@ function fside() {
var element = document.getElementById("side"); var element = document.getElementById("side");
element.classList.toggle("sideminclicked"); 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> </script>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined --> <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->

5
narrowstyle.css

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

Loading…
Cancel
Save