From 14372fad10a655023a854dd10717addeaa3e9288 Mon Sep 17 00:00:00 2001
From: JoanaChicau <joaninha_quelhas@hotmail.com>
Date: Sat, 27 Mar 2021 14:28:07 +0100
Subject: [PATCH] added ReadRepair HTML elements + style

also did a bit cleaning on the CSS
---
 index.html      |  60 ++++++++++++++++++++++------
 narrowstyle.css | 104 +++++++++++++++++++++---------------------------
 2 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/index.html b/index.html
index 6def799..b5d7e7a 100644
--- a/index.html
+++ b/index.html
@@ -53,8 +53,9 @@
 
     <!-- AFTER EVENTS PLACEHOLDER   -->
     <!-- uncomment after the event to display the iframe below  -->
-    <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> -->
 
 
     <!-- essay frame 
@@ -89,17 +90,50 @@
     </div>
  	-->
 
-  <!-- AUDIO NEW CODE -->
-  <span class="stream">
-<audio id="player" preload="none" src="https://vvvvvvaria.org/archive/2020-04-18-we-hope-this-email-finds-you-well/we-hope-this-email-finds-you-well.wav"> </audio><br>
-Press play (best listened in FireFox). It might take a minute to load.
-<div>
-<button class="stream-button" onclick="document.getElementById('player').play()">Play</button>
-<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
-<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
-<button class="stream-button" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
-</div>
-</span>
+
+	<div class="halfscreen">
+        <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"> pad.vvvvvvaria.org/read_repair_supreme_connections</a>
+    </div>
+
+
+    <div class="halfscreen">
+      <iframe src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"></iframe><br> ↬ 
+      <a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_intelligent_life_scraps.pdf"  target="_blank">theusercondition.computer</a>
+    </div>
+
+   <!-- AUDIO NEW CODE -->
+   <span class="audio-stream">
+		<audio id="player" preload="none" src="https://vvvvvvaria.org/archive/2020-04-18-we-hope-this-email-finds-you-well/we-hope-this-email-finds-you-well.wav"> </audio>
+		<p>
+		Press play (best listened in FireFox). It might take a minute to load.</p>
+		<div class="audio-buttons">
+			<button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
+			<button class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button>
+			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
+			<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
+		</div>
+	</span>
+
+	<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ </p>
+	<div class="img-gallery">
+		<figure>	
+			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg">
+			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg" target="_blank">read_supreme_connections_Wired-Audio-Angle1-Dog2-317_RGB.jpg</a>
+		</figure>
+		<figure>
+			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png">
+			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_anger.png" target="_blank">read_supreme_connections_anger</a>
+		</figure>
+		<figure>
+			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png">
+			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_happiness.png" target="_blank">read_supreme_connections_happiness.png</a>
+		</figure>
+		<figure>
+			<img src="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg">
+			<a class="windowlinks" href="https://vvvvvvaria.org/~ccl/r_n_r/supreme-connections/read_supreme_connections_the_blonde_composer.jpg" target="_blank">read_supreme_connections_the_blonde_composer.jpg</a>
+		</figure>
+	</div>
 
     <!-- lil face 
     <div class="lil-face loading">
diff --git a/narrowstyle.css b/narrowstyle.css
index 5c9043f..1f09d04 100644
--- a/narrowstyle.css
+++ b/narrowstyle.css
@@ -88,6 +88,7 @@ button {
   font-size: 1rem;
   color: #ffffe5;
   text-decoration: none;
+  text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
 }
 
 #side {
@@ -254,6 +255,9 @@ button.minimize:hover {
   padding: 0rem 0rem 2rem 0rem;
 }
 
+.live-flex a {
+  word-wrap: break-word;
+}
 
 .fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe  {
   width: 100%;
@@ -264,7 +268,7 @@ button.minimize:hover {
 
 .halfscreen {
   margin: 1%;
-  width: 46%;
+  width: 44.5%;
 }
 
 .halfscreen > * {
@@ -348,7 +352,7 @@ button.minimize:hover {
   transform: translate(-50%, -50%);
   position: relative;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
 }
@@ -357,6 +361,19 @@ button.minimize:hover {
   margin: 0% 2rem 0% 2rem;
 }
 
+.audio-stream button {
+  margin: 0.5rem 0rem;
+}
+
+.audio-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  width: 80%;
+  margin: 0rem 1rem;
+}
+
 button.b-narrow {
   box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
   border: 0.03rem solid #393c56;
@@ -375,6 +392,11 @@ button.b-narrow:hover {
   background-color: #393c56;
   color: #ffe4fd; 
 }
+
+button.vol {
+    border-radius: 5rem 0.5rem 5rem 5rem;
+}
+
 .b-play::before {
 content: 'PLAY';
 }
@@ -383,40 +405,35 @@ content: 'PLAY';
 content: 'PAUSE';
 }
 
-/* SILVIO */
-
-.essay {
-  width: 55%;
+.img-gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem;
 }
 
-.essay iframe {
+.img-gallery-title {
   width: 100%;
-  height: 80vh;
-}
+  margin: 0rem 1rem;
 
-.chat {
-  margin: 0% 2% 0% 1%;
-  width: 42%;
 }
 
-.chat iframe {
-  width: 100%;
-  height: 80vh;
-  padding-top: 3rem;
+.img-gallery figure {
+  width: 20%;
+  margin: 0.5rem;
 }
 
-.audio {
-  width: 50%;
-  right: 12%;
-  position: absolute;
-  bottom: 60px;
+.img-gallery img {
+  width: 100%;
+  border-radius: 1rem 0.5rem 1rem 0.5rem;
 }
 
-.lil-face{
-  position: absolute;
-  bottom: 50px;
-  right: 38px;
-}
+/* ehterpad — maybe remove?
+#editorcontainerbox {
+    margin-bottom: 39px;
+}*/
 
 /* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
 
@@ -442,40 +459,9 @@ content: 'PAUSE';
     margin: 4rem 0% 2rem 0%;
   }
 
-  /* SILVIO MOBILE*/
-
-  .essay {
-    width: 85%;
-  }
-
-  .essay iframe {
-    width: 100%;
-    height: 50vh;
-  }
-
-  .chat {
-    width: 85%;
-  }
-
-  .chat iframe {
-    height: 50vh;
-  }
-
-  .audio {
-    width: 80%;
-    position: relative;
-    margin: 6rem 0% 0% 6rem;
-  }
-
-  .audio-link{
-    margin: 2rem 0% 0% 0%;
+  .img-gallery figure {
+    width: 98%;
   }
 
-  .lil-face{
-    position: relative;
-    margin: 0% 0% 2rem 1rem;
-    bottom: inherit;
-    right: inherit;
-  }
 
 }