From c90853851284c42ce8871f825f16205d733e1186 Mon Sep 17 00:00:00 2001
From: JoanaChicau <web@joanachicau.com>
Date: Mon, 12 Apr 2021 22:37:11 +0200
Subject: [PATCH] started translation on index + added extra css file

and fixed small css things
---
 index.html            | 54 ++++++++++++++++++++++++-------------------
 narrowstyle-extra.css |  4 ++++
 narrowstyle.css       | 14 +++++++----
 3 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 narrowstyle-extra.css

diff --git a/index.html b/index.html
index 1839cd9..b0090c8 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
 
   <!-- OUR STYLES -->
   <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
+  <link rel="stylesheet" type="text/css" media="all" href="narrowstyle-extra.css"></link>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
 
   <!-- OUR SCRIPTS -->
@@ -21,33 +22,35 @@
   <div class="linkmore">
     <a href="https://vvvvvvaria.org/logs/zamopuzo"  target="_blank">back ↗ stage </a> 
     <br>
-    <a href="https://stream.vvvvvvaria.org/about.html"> about ↝ </a>
+    <a href="https://stream.vvvvvvaria.org/about.html"> about ↯ over ↻ </a>
   </div>
 
   <div id="side" class="sidebar sidemin">
   <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>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a></p>
+      <!--  ADD A FUTURE EVENT HERE  -->
+      <!-- once the event is over remember to move to the sidebottom section -->
+      <!-- if no event is left please add this placeholder: <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a> <br> meer TBA binnenkort! -->
+
+      <p>more TBA soon! <a href="https://varia.zone/en"  target="_blank" > &#128064; </a> <br> meer TBA binnenkort! </p>
 
 
     </div>
 
     <div class="middle">
-      <p>⇈ Will be awesome ⇈</p>
+      <p>⇈ Will be awesome ⇈ <br> ⇈ Zal geweldig zijn ⇈</p>
       <p id="livetitle">LIVE ↝ N↻W ⇶ </p>
       <p id="livesubtitle"></p>
-      <p>⇊ Was amazing ↷ </p>
+      <p>⇊ Was amazing ↷ <br>⇊ Was geweldig ↷ </p>
     </div>
 
     <div class="sidebottom">
 
-    <p>28th March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
+    <p>28 March'21: <a href="https://varia.zone/en/rr-sense-full-1.html"  target="_blank" >Read & Repair</a></p>
 
 
-	<p>23rd March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
+	<p>23 March'21: <a href="http://varia.zone/en/usercond01.html"  target="_blank" >User Condition S01E01</a></p>
 
 	<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html"  target="_blank" >FHM #1  Feminist Hack Meetings: Feminist Servers</a></p>
 
@@ -73,21 +76,21 @@
 		<!-- placeholder iframe loading -->
 		<button onclick="hideshowWelcome()" class="" id="bhide_wel">WELCOME</button>
 		<!-- chat -->
-		<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHATTING</button> 
+		<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHATTING <br> CHATTEN</button> 
 		<!-- etherpad -->
-		<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">WRITING</button>
+		<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">WRITING <br> SCHRIJVEN</button>
 		<!-- audio streaming or files -->
-		<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">LISTENING</button>
+		<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">LISTENING <br> LUISTEREN</button>
 		<!-- jitsi or alike -->
-	    <button onclick="hideshowJitsi()" class="bhide_chat_off" id="bhide_jit">CALLING</button>
+	    <button onclick="hideshowJitsi()" class="bhide_chat_off" id="bhide_jit">CALLING <br> BELLEN</button>
 		<!-- PDFs -->
-		<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">READING</button>
+		<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">READING <br> LEZING</button>
 		<!-- video streaming or files -->
-		<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">WATCHING</button>
+		<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">WATCHING <br> KIJKEND</button>
 		<!-- image single -->
-		<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE</button>
+		<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE <br>  BEELD</button>
 		<!-- image multiple -->
-		<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY</button>
+		<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
 	</div>
 
 
@@ -96,6 +99,7 @@
 
 
     <!-- AFTER-EVENTS PLACEHOLDER   -->
+    <!-- PLACEHOLDER link: https://loading.vvvvvvaria.org  -->
 
 	<iframe class="fullscreen" id="showWel" src="https://loading.vvvvvvaria.org" allow="camera; microphone" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
     </iframe>
@@ -104,6 +108,7 @@
 
 
     <!-- CHAT   -->
+    <!-- PLACEHOLDER link:  -->
     <div class="chat halfscreen hide" id="showChat">
       <iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬ 
       <a class="windowlinks" href="https://chat.vvvvvvaria.org/"  target="_blank">  direct link to chat! </a>
@@ -113,6 +118,7 @@
 
 
 	<!--  ETHERPAD  -->
+	<!-- PLACEHOLDER link:  -->
 	<div class="halfscreen hide" id="showEther">
         <iframe src="https://pad.vvvvvvaria.org/read_repair_supreme_connections"></iframe><br> ↝
         <a class="windowlinks" href="https://pad.vvvvvvaria.org/read_repair_supreme_connections"  target="_blank">  direct to pad </a>
@@ -122,7 +128,7 @@
 
 
    <!-- AUDIO -->
-
+   <!-- PLACEHOLDER link:  -->
    <div class="audio-stream fullscreen hide" id="showAudio">
 		<audio id="player" preload="none" src="https://ice.suroh.tk/meander "> </audio>
 		<p>
@@ -139,7 +145,7 @@
 
 
     <!-- JITSI  -->
-    
+    <!-- PLACEHOLDER link:  -->   
     <div class="halfscreen hide" id="showJit"> 
     	<iframe src="https://meet.jit.si/varia.broadcats" allow="camera; microphone" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
     	</iframe>
@@ -149,7 +155,7 @@
 
 
 	<!-- ESSAY  -->
-
+    <!-- PLACEHOLDER link:  -->
     <div class="halfscreen hide" id="showEssay">
       <iframe src=""></iframe><br> ↬ 
       <a class="windowlinks" href=""  target="_blank">  direct link to PDF</a>
@@ -158,7 +164,7 @@
 
 
 	<!-- VIDEO  -->
-
+    <!-- PLACEHOLDER link:  -->
 	 <div class="fullscreen hide" id="showVideo">
 		<video 
 		      id="player"
@@ -178,7 +184,7 @@
 
 
     <!-- IMAGE -->
-
+    <!-- PLACEHOLDER link:  -->
 	<figure class="halfscreen hide"  id="showImg">
 		<img src="https://varia.zone/images/de_varia.jpg">
 		<br> ↬ 
@@ -190,10 +196,10 @@
 
 
 	<!-- IMAGE GALLERY -->
-
+    <!-- PLACEHOLDER link:  -->
 	<div class="img-gallery hide" id="showGal">
 
-		<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
+		<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p>
 
 		<figure>	
 			<img src="https://varia.zone/images/de_varia.jpg"><br> ↬
@@ -219,7 +225,7 @@
 
      
 
-   <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *</p> 
+   <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly * <u>Nota</u>: deze interface is in experimentele fase ☆ﾟ.*･｡ﾟ en sommige dingen kunnen niet altijd soepel werken *</p> 
 
    <!--  <p class="note"> <u>Note</u>: this interface 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> -->
 
diff --git a/narrowstyle-extra.css b/narrowstyle-extra.css
new file mode 100644
index 0000000..8e3d5ba
--- /dev/null
+++ b/narrowstyle-extra.css
@@ -0,0 +1,4 @@
+/* ADD HERE YOUR OWN S*T*Y*L*E */
+
+/* once the event is over remember these and the corresponding classes 
+on index.html and put all back to 'placeholder mode' dank je! */
diff --git a/narrowstyle.css b/narrowstyle.css
index a9e479e..2f34117 100644
--- a/narrowstyle.css
+++ b/narrowstyle.css
@@ -301,14 +301,18 @@ button.minimize:hover {
 }
 
 .bhide_chat_off{
-  background: rgb(242,217,242);
-  background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
-  background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
-  background: linear-gradient(0deg, rgba(242,217,242,1) 33%, rgba(57,60,86,1) 49%, rgba(255,228,253,1) 67%, rgba(255,228,253,1) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2d9f2",endColorstr="#ffe4fd",GradientType=1); 
+background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
+background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
+background: linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%);
   /*content: " OFF";*/
 }
 
+.bhide_chat_off:hover {
+background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%);
+background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%);
+background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%);
+}
+
 .live {
   margin-left: 300px;
   display: inline-block;