forked from varia/web-narrowcast
Upload files to ''
This commit is contained in:
parent
47761e6823
commit
9df315e257
BIN
cmunbto.eot
Normal file
BIN
cmunbto.eot
Normal file
Binary file not shown.
BIN
cmunbto.ttf
Normal file
BIN
cmunbto.ttf
Normal file
Binary file not shown.
@ -10,7 +10,9 @@
|
||||
|
||||
<div class="about"><a>back<span> ↗</span><br>↬ stage </a></div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div id="side" class="sidebar sidemin">
|
||||
<button class="minimize" onclick="fside()"> ⇔</button>
|
||||
|
||||
<div class="sidetop">
|
||||
<a href="">Event Last not Least</a>
|
||||
<a href="">Event Date Before Last</a>
|
||||
@ -49,18 +51,23 @@
|
||||
</div>
|
||||
|
||||
<div class="live">
|
||||
<video class="resize-drag" autoplay="" loop="">
|
||||
<!-- <source src="https://commons.wikimedia.org/wiki/File:Clear_to_cloudy_hot_Jupiters_(heic1524a).webm"
|
||||
type="video/webm"> type="video/mp4" -->
|
||||
<source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
|
||||
type="video/mp4">
|
||||
</video>
|
||||
|
||||
<iframe class="resize-drag" src="https://archive.org/embed/VJ_Mission_Boundary_Issues" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
|
||||
<video class="resize-drag" autoplay="" loop="">
|
||||
<!-- <source src="https://commons.wikimedia.org/wiki/File:Clear_to_cloudy_hot_Jupiters_(heic1524a).webm"
|
||||
type="video/webm"> type="video/mp4" -->
|
||||
<source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
|
||||
type="video/mp4">
|
||||
|
||||
</video>
|
||||
|
||||
<iframe class="resize-drag" src="https://archive.org/embed/VJ_Mission_Boundary_Issues" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
<iframe class="resize-drag" src="https://etherdump.vvvvvvaria.org/"></iframe>
|
||||
|
||||
<audio controls loop="" class="resize-drag" src="https://ia803201.us.archive.org/31/items/md_music_ecco_the_dolphin/08%20-%20Island%20Zone%20-%20Andr%C3%A1s%20Magyari%2C%20Spencer%20Nilsen%2C%20Brian%20Coburn.mp3" type="audio/mp3"></audio>
|
||||
<audio controls loop="" class="resize-drag" src="https://ia803201.us.archive.org/31/items/md_music_ecco_the_dolphin/08%20-%20Island%20Zone%20-%20Andr%C3%A1s%20Magyari%2C%20Spencer%20Nilsen%2C%20Brian%20Coburn.mp3" type="audio/mp3">
|
||||
</audio>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
|
||||
@ -70,6 +77,13 @@
|
||||
https://codepen.io/zz85/pen/gbOoVP -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function fside() {
|
||||
var element = document.getElementById("side");
|
||||
element.classList.toggle("sideminclicked");
|
||||
}
|
||||
|
||||
|
||||
interact('.resize-drag')
|
||||
.resizable({
|
||||
// resize from all edges and corners
|
||||
|
||||
133
narrowstyle.css
133
narrowstyle.css
@ -1,30 +1,30 @@
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Classical Serif Italic';
|
||||
src: url('ClassicalSerifItalic/cmunci.eot');
|
||||
src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'),
|
||||
url('ClassicalSerifItalic/cmunci.woff') format('woff'),
|
||||
url('ClassicalSerifItalic/cmunci.ttf') format('truetype'),
|
||||
url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg');
|
||||
src: url('cmunci.eot');
|
||||
src: url('cmunci.eot?#iefix') format('embedded-opentype'),
|
||||
url('cmunci.woff') format('woff'),
|
||||
url('cmunci.ttf') format('truetype'),
|
||||
url('cmunci.svg#cmunci') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Typewriter Light';
|
||||
src: url('TypewriterLight/cmunbtl.eot');
|
||||
src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'),
|
||||
url('TypewriterLight/cmunbtl.woff') format('woff'),
|
||||
url('TypewriterLight/cmunbtl.ttf') format('truetype'),
|
||||
url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg');
|
||||
src: url('cmunbtl.eot');
|
||||
src: url('cmunbtl.eot?#iefix') format('embedded-opentype'),
|
||||
url('cmunbtl.woff') format('woff'),
|
||||
url('cmunbtl.ttf') format('truetype'),
|
||||
url('cmunbtl.svg#cmuntt') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Computer Modern Typewriter Light';
|
||||
src: url('TypewriterLight/cmunbto.eot');
|
||||
src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'),
|
||||
url('TypewriterLight/cmunbto.woff') format('woff'),
|
||||
url('TypewriterLight/cmunbto.ttf') format('truetype'),
|
||||
url('TypewriterLight/cmunbto.svg#cmunbto') format('svg');
|
||||
src: url('cmunbto.eot');
|
||||
src: url('cmunbto.eot?#iefix') format('embedded-opentype'),
|
||||
url('cmunbto.woff') format('woff'),
|
||||
url('cmunbto.ttf') format('truetype'),
|
||||
url('cmunbto.svg#cmunbto') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -45,15 +45,16 @@ body{
|
||||
background-color: #393c56;
|
||||
color: #ffe4fd;;
|
||||
}
|
||||
iframe {
|
||||
iframe, video {
|
||||
border: none;
|
||||
width: inherit;
|
||||
}
|
||||
a {
|
||||
a, button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.about {
|
||||
font-family: 'Computer Modern Classical Serif Italic';
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 0.6rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -66,7 +67,6 @@ a {
|
||||
}
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
@ -75,15 +75,41 @@ a {
|
||||
box-shadow: 0.2rem -0.2rem 1rem #ffe4fd;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidemin {
|
||||
width: 300px;
|
||||
transition: width 2s;
|
||||
}
|
||||
|
||||
.sideminclicked {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.sideminclicked + .live {
|
||||
transition: margin-left 2s;
|
||||
margin-left: 40px;
|
||||
}
|
||||
button.minimize{
|
||||
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
|
||||
font-size: 1rem;
|
||||
width: 2rem;
|
||||
background-color: #393c56;
|
||||
color: #ffe4fd;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0.5rem;
|
||||
border: none;
|
||||
}
|
||||
.sidetop, .sidebottom {
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
-ms-overflow-style: none;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
overflow: -ms-autohiding-scrollbar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
-ms-overflow-style: none;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
overflow: -ms-autohiding-scrollbar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidetop {
|
||||
height: 45vh;
|
||||
@ -135,21 +161,60 @@ flex-direction: column;
|
||||
|
||||
.resize-drag {
|
||||
width: 620px;
|
||||
border-radius: 2rem 0.2rem 2rem 0.6rem;
|
||||
padding: 2rem 0.4rem 0.4rem 2rem;
|
||||
padding: 1.4rem 0.4rem 0.4rem 1.4rem;
|
||||
margin: 1rem;
|
||||
touch-action: none;
|
||||
/* This makes things *much* easier */
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd;
|
||||
position: relative;
|
||||
}
|
||||
.resize-drag::before {
|
||||
content: "◉ ➫ drag";
|
||||
.drag::before, .resize-drag::before, .live > *::before {
|
||||
content: "⇱";
|
||||
font-size: 2rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #ff029c;
|
||||
background-color: #ff029c;
|
||||
position: absolute;
|
||||
color: #393c56;
|
||||
position: absolute !important;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resize-drag {
|
||||
animation: corners 8s infinite alternate;
|
||||
-o-animation: corners 8s infinite alternate;
|
||||
-moz-animation: corners 8s infinite alternate;
|
||||
-webkit-animation: corners 8s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes corners {
|
||||
0% {
|
||||
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
|
||||
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
|
||||
}
|
||||
70% {
|
||||
border-radius: 2rem 0rem 1rem 2rem;
|
||||
-webkit-border-radius: 2rem 0rem 1rem 2rem;
|
||||
}
|
||||
100% {
|
||||
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
|
||||
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; }
|
||||
@-webkit-keyframes corners {
|
||||
0% {
|
||||
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
|
||||
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
|
||||
}
|
||||
70% {
|
||||
border-radius: 2rem 0rem 1rem 2rem;
|
||||
-webkit-border-radius: 2rem 0rem 1rem 2rem;
|
||||
}
|
||||
100% {
|
||||
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
|
||||
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user