tutorial

1 files changed, 12 insertions, 9 deletions

diff --git a/shader-combo.html b/shader-combo.html
index bd9f1c0..99c5a6c 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -18,7 +18,7 @@ a { color: #00f; }
 #uploaded-url { display: none; width: 400px; }
 #uploaded-url + br { display: none; }
 
-#header { clear: right; width:100%; padding: 0; font-size: 12px; position: fixed;bottom:0;background: rgba(255,255,255,0.9); }
+#header { width:calc(100% - 10px); padding: 0; font-size: 12px; position: fixed; bottom:0; left: 0; padding: 5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #888; z-index: 2;}
 .gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; }
 .gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
 .gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }
@@ -29,10 +29,12 @@ a { color: #00f; }
 .dragging { cursor: -webkit-grabbing !important; }
 .ui-sortable-helper { cursor: -webkit-grabbing !important; }
 
-#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
-#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
-#instructions.dragging iframe { pointer-events: none; }
-#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+#instructions { top:20px;right:20px; width:190px;height:465px; }
+#tutorial { top:40px;right:30px; width:290px;height:325px; display: block;}
+.iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+.iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+.iframe.dragging iframe { pointer-events: none; }
+.iframe .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 
 #frame-controls { display: none; }
 #frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
@@ -53,7 +55,7 @@ a { color: #00f; }
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
 
-#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #333; }
+#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #243; }
 #corner { position: fixed; top: -5px; right: 0px; }
 
 </style>
@@ -63,7 +65,7 @@ a { color: #00f; }
 <div id="corner">
 	<h1 id="logo">shaderblaster</h1>
 	<button id="show-help">help</button>
-	<button id="show-about">about</button>
+	<button id="show-commands">commands</button>
 	<select id="examples">
 		<option>examples</option>
 	</select>
@@ -98,7 +100,7 @@ a { color: #00f; }
 	<span id="gallery-form" class="form">
 		<button id="gallery-random">asdf random</button>
 		<form id="gallery-search">
-			<input type="text" id="dumpfm-search-query" value="duck bill">
+			<input type="text" id="dumpfm-search-query" value="webcam">
 			<button id="gallery-search">search dump</button>
 		</form>
 		<div id="gallery-images" class="gallery"></div>
@@ -153,7 +155,8 @@ a { color: #00f; }
 
 <div id="workspace"></div>
 
-<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/gif.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode.min.js"></script>