Browse Source

Upload files to ''

master
JoanaChicau 2 weeks ago
parent
commit
9df315e257
4 changed files with 122 additions and 43 deletions
  1. BIN
      cmunbto.eot
  2. BIN
      cmunbto.ttf
  3. +23
    -9
      narrowcast-playground.html
  4. +99
    -34
      narrowstyle.css

BIN
cmunbto.eot View File


BIN
cmunbto.ttf View File


+ 23
- 9
narrowcast-playground.html View File

@ -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


+ 99
- 34
narrowstyle.css View File

@ -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…
Cancel
Save