Browse Source

added ReadRepair HTML elements + style

also did a bit cleaning on the CSS
master
JoanaChicau 4 years ago
parent
commit
14372fad10
  1. 58
      index.html
  2. 104
      narrowstyle.css

58
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>
-->
<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="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>
<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">

104
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%;
.img-gallery figure {
width: 98%;
}
.chat iframe {
height: 50vh;
}
.audio {
width: 80%;
position: relative;
margin: 6rem 0% 0% 6rem;
}
.audio-link{
margin: 2rem 0% 0% 0%;
}
.lil-face{
position: relative;
margin: 0% 0% 2rem 1rem;
bottom: inherit;
right: inherit;
}
}

Loading…
Cancel
Save