Upload files to ''

narrowcast-playground.html

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

narrowstyle.css

@@ -1,30 +1,30 @@
 @font-face {
 	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-style: italic;
 }
 @font-face {
 	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-style: normal;
 }
 @font-face {
 	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-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,6 +75,32 @@ 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;
@@ -135,21 +161,60 @@ flex-direction: column;
 
 .resize-drag {
   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;
   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 {
+.drag::before, .resize-drag::before, .live > *::before {
-	content: "◉ ➫ drag";
+	content: "⇱";
 	font-size: 2rem;
 	width: 1rem;
 	height: 1rem;
-	color: #ff029c;
+	color: #393c56; 
-	background-color: #ff029c;
+	position: absolute !important;
-	position: absolute;
 	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;   
+  	  }
+  }
+
+
+