anglk
/
web-narrowcast
forked from varia/web-narrowcast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added ReadRepair HTML elements + style 

also did a bit cleaning on the CSS
master
JoanaChicau 4 years ago
parent
a4966595bf
commit
14372fad10
2 changed files with 92 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      index.html
  2. 104
      narrowstyle.css

58
index.html
View File

@ -53,8 +53,9 @@
<!-- AFTER EVENTS PLACEHOLDER --> <!-- AFTER EVENTS PLACEHOLDER -->
<!-- uncomment after the event to display the iframe below --> <!-- 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 <!-- essay frame
@ -89,17 +90,50 @@
</div> </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 --> <!-- AUDIO NEW CODE -->
<span class="stream"> <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><br> <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>
Press play (best listened in FireFox). It might take a minute to load. <p>
<div> Press play (best listened in FireFox). It might take a minute to load.</p>
<button class="stream-button" onclick="document.getElementById('player').play()">Play</button> <div class="audio-buttons">
<button class="stream-button" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src;">Stop</button> <button class="stream-button b-narrow" onclick="document.getElementById('player').play()">Play</button>
<button class="stream-button" onclick="document.getElementById('player').volume += 0.1">Vol +</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" 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> <button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</span> </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 <!-- lil face
<div class="lil-face loading"> <div class="lil-face loading">

104
narrowstyle.css
View File

@ -88,6 +88,7 @@ button {
font-size: 1rem; font-size: 1rem;
color: #ffffe5; color: #ffffe5;
text-decoration: none; text-decoration: none;
text-shadow: 0.1rem 0.01rem 0.05rem #393c56;
} }
#side { #side {
@ -254,6 +255,9 @@ button.minimize:hover {
padding: 0rem 0rem 2rem 0rem; padding: 0rem 0rem 2rem 0rem;
} }
.live-flex a {
word-wrap: break-word;
}
.fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe { .fullscreen, .fullscreen > video, .fullscreen > #player , .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
width: 100%; width: 100%;
@ -264,7 +268,7 @@ button.minimize:hover {
.halfscreen { .halfscreen {
margin: 1%; margin: 1%;
width: 46%; width: 44.5%;
} }
.halfscreen > * { .halfscreen > * {
@ -348,7 +352,7 @@ button.minimize:hover {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -357,6 +361,19 @@ button.minimize:hover {
margin: 0% 2rem 0% 2rem; 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 { button.b-narrow {
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
border: 0.03rem solid #393c56; border: 0.03rem solid #393c56;
@ -375,6 +392,11 @@ button.b-narrow:hover {
background-color: #393c56; background-color: #393c56;
color: #ffe4fd; color: #ffe4fd;
} }
button.vol {
border-radius: 5rem 0.5rem 5rem 5rem;
}
.b-play::before { .b-play::before {
content: 'PLAY'; content: 'PLAY';
} }
@ -383,40 +405,35 @@ content: 'PLAY';
content: 'PAUSE'; content: 'PAUSE';
} }
/* SILVIO */ .img-gallery {
display: flex;
.essay { flex-direction: row;
width: 55%; flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding: 1rem;
} }
.essay iframe { .img-gallery-title {
width: 100%; width: 100%;
height: 80vh; margin: 0rem 1rem;
}
.chat {
margin: 0% 2% 0% 1%;
width: 42%;
} }
.chat iframe { .img-gallery figure {
width: 100%; width: 20%;
height: 80vh; margin: 0.5rem;
padding-top: 3rem;
} }
.audio { .img-gallery img {
width: 50%; width: 100%;
right: 12%; border-radius: 1rem 0.5rem 1rem 0.5rem;
position: absolute;
bottom: 60px;
} }
.lil-face{ /* ehterpad — maybe remove?
position: absolute; #editorcontainerbox {
bottom: 50px; margin-bottom: 39px;
right: 38px; }*/
}
/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */ /* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
@ -442,40 +459,9 @@ content: 'PAUSE';
margin: 4rem 0% 2rem 0%; margin: 4rem 0% 2rem 0%;
} }
/* SILVIO MOBILE*/ .img-gallery figure {
width: 98%;
.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%;
}
.lil-face{
position: relative;
margin: 0% 0% 2rem 1rem;
bottom: inherit;
right: inherit;
}
} }

Write Preview
Loading…
Cancel
Save