varia
/
web-narrowcast
12
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

Upload files to ''

master
JoanaChicau 3 years ago
parent
47761e6823
commit
9df315e257
4 changed files with 122 additions and 43 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. BIN
      cmunbto.eot
  2. BIN
      cmunbto.ttf
  3. 32
      narrowcast-playground.html
  4. 133
      narrowstyle.css

BIN
cmunbto.eot
View File

Binary file not shown.

BIN
cmunbto.ttf
View File

Binary file not shown.

32
narrowcast-playground.html
View File

@ -10,7 +10,9 @@
<div class="about"><a>back<span> ↗</span><br>↬ stage </a></div> <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"> <div class="sidetop">
<a href="">Event Last not Least</a> <a href="">Event Last not Least</a>
<a href="">Event Date Before Last</a> <a href="">Event Date Before Last</a>
@ -49,18 +51,23 @@
</div> </div>
<div class="live"> <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> <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> </div>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined --> <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
@ -70,6 +77,13 @@
https://codepen.io/zz85/pen/gbOoVP --> https://codepen.io/zz85/pen/gbOoVP -->
<script type="text/javascript"> <script type="text/javascript">
function fside() {
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
}
interact('.resize-drag') interact('.resize-drag')
.resizable({ .resizable({
// resize from all edges and corners // resize from all edges and corners

133
narrowstyle.css
View File

@ -1,30 +1,30 @@
@font-face { @font-face {
font-family: 'Computer Modern Classical Serif Italic'; font-family: 'Computer Modern Classical Serif Italic';
src: url('ClassicalSerifItalic/cmunci.eot'); src: url('cmunci.eot');
src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'), src: url('cmunci.eot?#iefix') format('embedded-opentype'),
url('ClassicalSerifItalic/cmunci.woff') format('woff'), url('cmunci.woff') format('woff'),
url('ClassicalSerifItalic/cmunci.ttf') format('truetype'), url('cmunci.ttf') format('truetype'),
url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg'); url('cmunci.svg#cmunci') format('svg');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Computer Modern Typewriter Light'; font-family: 'Computer Modern Typewriter Light';
src: url('TypewriterLight/cmunbtl.eot'); src: url('cmunbtl.eot');
src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'), src: url('cmunbtl.eot?#iefix') format('embedded-opentype'),
url('TypewriterLight/cmunbtl.woff') format('woff'), url('cmunbtl.woff') format('woff'),
url('TypewriterLight/cmunbtl.ttf') format('truetype'), url('cmunbtl.ttf') format('truetype'),
url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg'); url('cmunbtl.svg#cmuntt') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Computer Modern Typewriter Light'; font-family: 'Computer Modern Typewriter Light';
src: url('TypewriterLight/cmunbto.eot'); src: url('cmunbto.eot');
src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'), src: url('cmunbto.eot?#iefix') format('embedded-opentype'),
url('TypewriterLight/cmunbto.woff') format('woff'), url('cmunbto.woff') format('woff'),
url('TypewriterLight/cmunbto.ttf') format('truetype'), url('cmunbto.ttf') format('truetype'),
url('TypewriterLight/cmunbto.svg#cmunbto') format('svg'); url('cmunbto.svg#cmunbto') format('svg');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@ -45,15 +45,16 @@ body{
background-color: #393c56; background-color: #393c56;
color: #ffe4fd;; color: #ffe4fd;;
} }
iframe { iframe, video {
border: none; border: none;
width: inherit;
} }
a { a, button {
cursor: pointer; cursor: pointer;
} }
.about { .about {
font-family: 'Computer Modern Classical Serif Italic'; font-family: 'Computer Modern Classical Serif Italic';
font-size: 1.6rem; font-size: 1.2rem;
line-height: 0.6rem; line-height: 0.6rem;
position: fixed; position: fixed;
top: 0; top: 0;
@ -66,7 +67,6 @@ a {
} }
.sidebar { .sidebar {
height: 100%; height: 100%;
width: 300px;
padding: 1rem; padding: 1rem;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
@ -75,15 +75,41 @@ a {
box-shadow: 0.2rem -0.2rem 1rem #ffe4fd; box-shadow: 0.2rem -0.2rem 1rem #ffe4fd;
overflow-x: hidden; 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 { .sidetop, .sidebottom {
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; scrollbar-width: none;
overflow: -moz-scrollbars-none; overflow: -moz-scrollbars-none;
-ms-overflow-style: none; -ms-overflow-style: none;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
overflow: -ms-autohiding-scrollbar; overflow: -ms-autohiding-scrollbar;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sidetop { .sidetop {
height: 45vh; height: 45vh;
@ -135,21 +161,60 @@ flex-direction: column;
.resize-drag { .resize-drag {
width: 620px; width: 620px;
border-radius: 2rem 0.2rem 2rem 0.6rem; padding: 1.4rem 0.4rem 0.4rem 1.4rem;
padding: 2rem 0.4rem 0.4rem 2rem;
margin: 1rem; margin: 1rem;
touch-action: none; touch-action: none;
/* This makes things *much* easier */ /* This makes things *much* easier */
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd; box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd;
position: relative;
} }
.resize-drag::before { .drag::before, .resize-drag::before, .live > *::before {
content: "◉ ➫ drag"; content: "⇱";
font-size: 2rem; font-size: 2rem;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
color: #ff029c; color: #393c56;
background-color: #ff029c; position: absolute !important;
position: absolute;
z-index: 999; 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;
}
}

Write Preview
Loading…
Cancel
Save