Updated the example slideshow

dmfrancisco · Jul 28, 2011 · 549ba31 · 549ba31
1 parent f4ae734
commit 549ba31
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 71 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -8,15 +8,19 @@
 #deck h1 {
     font-size: 55px;
     font-weight: bold;
-    padding-bottom: 15px;
+    padding-bottom: 25px;
 }
 #deck h2 {
     font-size: 35px;
     padding-bottom: 45px;
 }
 #deck p, #deck li {
-    font-size: 20px;
+    font-size: 30px;
+    margin: 20px 0 20px 0;
+}
+#deck ul {
+    margin-left: 60px;
 }
 #deck ul li {
-  list-style-type: square;
+    list-style-type: square;
 }
diff --git a/src/master.html b/src/master.html
@@ -14,12 +14,12 @@
   <!-- These are the styles you'll add to make the slides look great -->
   <link rel="stylesheet" href="<%= @root %>/css/styles.css" />
 
-  <title>Example Slideshow</title>
+  <title>slideshow.html</title>
 </head>
 <body>
   <div id="content">
     <div id="deck">
-      <% 7.times do |i| %>
+      <% 4.times do |i| %>
         <section>
           <%= partial "slide#{i+1}.html" %>
         </section>
@@ -28,7 +28,7 @@
   </div>
 
   <footer id="toolbar" class="hide-background">
-    <h1 class="hide">Optional title</h1>
+    <h1 class="hide">An example slideshow</h1>
     <nav>
       <ul>
         <li><button id="prev-btn" title="Previous slide" class="hide">Previous Slide</button></li>

diff --git a/src/slide1.html.partial b/src/slide1.html.partial
@@ -1,5 +1,5 @@
 <div class="slide-body">
-  <h1>yahpa</h1>
+  <h1>slideshow.html</h1>
   <h2><em>yet another</em><br>HTML5 Presentation Assembler</h2>
 </div>
 
@@ -9,10 +9,10 @@
   }
   #slide1 .slide-body {
     text-align: center;
-    padding-top: 100px;
+    padding-top: 170px;
   }
   #slide1 h1 {
-    font-size: 162pt;
+    font-size: 82pt;
     letter-spacing: -3px;
     border-bottom: 10px dotted black;
     display: inline;

diff --git a/src/slide2.html.partial b/src/slide2.html.partial
@@ -1,16 +1,13 @@
 <div class="slide-body">
-  <hgroup>
+  <h1>What is slideshow.html?</h1>
-    <h1>Intraslide animation</h1>
+
-    <h2>I'm calling these "actions"</h2>
+  <p><strong>slideshow.html</strong> is the resulting file of running <code>./watch</code> on your terminal.</p>
-  </hgroup>
+  <p><strong>watch</strong> is a ruby script that will monitor a source folder.</p>
-    <p>You can hide/reveal content within the slides by giving something a class of "action". Actions are revealed in the order in which they occur in the HTML. Advancing to the next slide will first reveal actions on the page if they exist.</p>
+  <p>This source folder contains:</p>
-  <pre>
-&lt;p class=&quot;action&quot;&gt;This will be hidden when the slide loads&lt;/p&gt;
-  </pre>
   <ul>
-    <li class="action">Bullet point</li>
+    <li class="action">A master.html file where you set the title and other configurations</li>
-    <li class="action">Another bullet point</li>
+    <li class="action">One slide&lt;N&gt;.html.partial file per slide</li>
-    <li class="action">Yet another bullet point</li>
+    <li class="action">CSS, JavaScript, images and other files you may want to add to your presentation</li>
-    <li class="action">You get the idea</li>
   </ul>
+  <p class="action"><strong>slideshow.html</strong> is just a compiled file with all this information.</p>
 </div>
diff --git a/src/slide3.html.partial b/src/slide3.html.partial
@@ -1,12 +1,19 @@
 <div class="slide-body">
-  <hgroup>
+  <h1>What is slideshow.html?</h1>
-    <h1>Custom events</h1>
+
-    <h2>These may or may not be useful for you</h2>
+  <p>So, you need Ruby to create your presentation,</p>
-  </hgroup>
+  <p style="text-align:right" class="action">but you do not to present or publish it.</p>
-  <p>When a new slide is loaded, a "newSlide" event is fired. (Take a look at your console.)</p>
+  <div class="gap"></div>
-  <p>There's also an event triggered when a new "action" is revealed.</p>
+  <p class="action">Everytime you make a change in one of your slides, <br>the <strong>slideshow.html</strong> file gets updated.</p>
-  <pre>
+  <div class="gap"></div>
-//Example usage
+  <p class="action">It even automatically refreshes in your browser.</p>
-$(&#x27;html&#x27;).bind(&#x27;newSlide&#x27;, function(e,id) { console.log(id) });
+</div>
-  </pre>
+
-</div>
+<style>
+  #slide3 p {
+    font-size: 35px;
+  }
+  #slide3 .gap {
+    height: 35px;
+  }
+</style>
diff --git a/src/slide4.html.partial b/src/slide4.html.partial
@@ -1,17 +1,3 @@
 <div class="slide-body">
-  <hgroup>
+  <h1>Thank you!</h1>
-    <h1>Building slides</h1>
-    <h2>It's easy</h2>
-  </hgroup>
-  <p>Each slide goes within a <code>section</code> element, like this:</p>
-  <pre>
-&lt;section&gt;
-      &lt;hgroup&gt;
-          &lt;h1&gt;Your heading&lt;/h1&gt;
-          &lt;h2&gt;Your subheading&lt;/h2&gt;
-      &lt;/hgroup&gt;
-      &lt;p&gt;All your slide content...&lt;/p&gt;
-&lt;/section&gt;
-  </pre>
-  <p>You don't have to worry about numbering the slides. The script will count the number of <code>section</code> elements and give each one a numbered ID on page load.</p>
 </div>
diff --git a/src/slide5.html.partial b/src/slide5.html.partial
diff --git a/src/slide6.html.partial b/src/slide6.html.partial
diff --git a/src/slide7.html.partial b/src/slide7.html.partial