flesh out demos page some more

browserify · Mar 19, 2014 · db6c96d · db6c96d
1 parent fb684e2
commit db6c96d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/demos.html b/demos.html
@@ -21,11 +21,24 @@ <h3 id="top-subtitle" class="large-font">Live examples running in your browser</
     </section>
     <section id="middle-section" class="middle-section color-b" >
       <div class="content" style="box-sizing: border-box; font-size: 20px; line-height: 30px; width: 720px; margin: 0 auto;">
-        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=9557700" frameborder="0" allowfullscreen></iframe>
-        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=9556868" frameborder="0" allowfullscreen></iframe>
-        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=9557776" frameborder="0" allowfullscreen></iframe>
+        <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Exploding Dots</h2>
+        <p>This demo by @anvaka uses the <a href="https://www.npmjs.org/package/ngraph.generators">ngraph.generators</a> and <a href="https://www.npmjs.org/package/ngraph.vivasvg">ngraph.vivasvg</a> modules to create an animated exploding SVG dot cluster.
+        <script src="https://gist.github.com/maxogden/9556868.js?file=index.js"></script>
+        <p>Here is the above code running in an iframe, click it to run the animation.</p>
+        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=maxogden/9556868" frameborder="0" allowfullscreen></iframe>
+        <hr>
+        <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Infinite 2D Cave Generator</h2>
+        <p>This demo by @hughsk uses 7 small modules to create an explorable 2D procedurally generated cave.</p>
+        <script src="https://gist.github.com/maxogden/9557700.js?file=index.js"></script>
+        <p>Click the canvas to give it focus and then use WSAD or Arrow keys to explore.</p>
+        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=maxogden/9557700" frameborder="0" allowfullscreen></iframe>
+        <hr>
+        <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">2D velocity control</h2>
+        <p>This demo by @sethvincent uses some modules from his <a href="http://crtrdg.com/">CRTRDG</a> 2D game library.</p>
+        <script src="https://gist.github.com/maxogden/9557776.js?file=index.js"></script>
+        <p>Click the canvas to give it focus and then use WSAD keys to explore.</p>
+        <iframe width="720" height="315" src="http://requirebin.com/embed?gist=maxogden/9557776" frameborder="0" allowfullscreen></iframe>
       </div>
     </section>
-
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@ <h3 id="top-subtitle" class="large-font">Browserify lets you require('modules')
       </center>
     </section>
     <section id="middle-section" class="middle-section color-b" >
-      <header data-gss-id="13">
+      <header>
          <h1 style="font-size: 65px; margin-bottom: 15px;"><a name="rel_pos_size">Use Modules In The Browser</a></h1>
          <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Write your browser code with node.js-style requires</h2>
       </header>
@@ -123,10 +123,10 @@ <h1 style="font-size: 65px; margin-bottom: 15px;"><a name="community" href="#com
       </div>
     </section>
     <section id="bottom-section" class="bottom-section color-c">
-      <header data-gss-id="13">
-         <h1 data-gss-id="20" style="box-sizing: border-box; font-size: 65px; margin-bottom: 15px;"><a name="rel_pos_size">Install</a></h1>
+      <header>
+         <h1 style="box-sizing: border-box; font-size: 65px; margin-bottom: 15px;"><a name="rel_pos_size">Install</a></h1>
 
-         <h2 class="subtitle" data-gss-id="16" style="box-sizing: border-box; font-size: 18px; margin-bottom: 30px;">use Browserify from the Command Line</h2>
+         <h2 class="subtitle" style="box-sizing: border-box; font-size: 18px; margin-bottom: 30px;">use Browserify from the Command Line</h2>
       </header>
       <div id="install" class="content" style="box-sizing: border-box; font-size: 20px; line-height: 30px; width: 720px; margin: 0 auto;">
 

diff --git a/style.css b/style.css
@@ -95,6 +95,19 @@ h2 {
   text-align: center;
 }
 
+.content p { 
+  margin: 40px 0;
+}
+
+.content iframe {
+  margin-bottom: 40px;
+  border: 1px solid #ddd;
+}
+
+.content hr {
+  margin-bottom: 40px;
+}
+
 div, p, blockquote, button {
   margin: 0;
 }