Permalink
Browse files

Updated the example slideshow

  • Loading branch information...
1 parent f4ae734 commit 549ba31ebde854bed11aecfa69ecce7bd1290b8a @dmfrancisco committed Jul 28, 2011
View
@@ -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;
}
View
@@ -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>
@@ -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;
@@ -1,16 +1,13 @@
<div class="slide-body">
- <hgroup>
- <h1>Intraslide animation</h1>
- <h2>I'm calling these "actions"</h2>
- </hgroup>
- <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>
- <pre>
-&lt;p class=&quot;action&quot;&gt;This will be hidden when the slide loads&lt;/p&gt;
- </pre>
+ <h1>What is slideshow.html?</h1>
+
+ <p><strong>slideshow.html</strong> is the resulting file of running <code>./watch</code> on your terminal.</p>
+ <p><strong>watch</strong> is a ruby script that will monitor a source folder.</p>
+ <p>This source folder contains:</p>
<ul>
- <li class="action">Bullet point</li>
- <li class="action">Another bullet point</li>
- <li class="action">Yet another bullet point</li>
- <li class="action">You get the idea</li>
+ <li class="action">A master.html file where you set the title and other configurations</li>
+ <li class="action">One slide&lt;N&gt;.html.partial file per slide</li>
+ <li class="action">CSS, JavaScript, images and other files you may want to add to your presentation</li>
</ul>
+ <p class="action"><strong>slideshow.html</strong> is just a compiled file with all this information.</p>
</div>
@@ -1,12 +1,19 @@
<div class="slide-body">
- <hgroup>
- <h1>Custom events</h1>
- <h2>These may or may not be useful for you</h2>
- </hgroup>
- <p>When a new slide is loaded, a "newSlide" event is fired. (Take a look at your console.)</p>
- <p>There's also an event triggered when a new "action" is revealed.</p>
- <pre>
-//Example usage
-$(&#x27;html&#x27;).bind(&#x27;newSlide&#x27;, function(e,id) { console.log(id) });
- </pre>
-</div>
+ <h1>What is slideshow.html?</h1>
+
+ <p>So, you need Ruby to create your presentation,</p>
+ <p style="text-align:right" class="action">but you do not to present or publish it.</p>
+ <div class="gap"></div>
+ <p class="action">Everytime you make a change in one of your slides, <br>the <strong>slideshow.html</strong> file gets updated.</p>
+ <div class="gap"></div>
+ <p class="action">It even automatically refreshes in your browser.</p>
+</div>
+
+<style>
+ #slide3 p {
+ font-size: 35px;
+ }
+ #slide3 .gap {
+ height: 35px;
+ }
+</style>
@@ -1,17 +1,3 @@
<div class="slide-body">
- <hgroup>
- <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>
+ <h1>Thank you!</h1>
</div>
@@ -1,5 +0,0 @@
-<div class="slide-body">
- <hgroup>
- <h1>Plays well with images</h1>
- </hgroup>
-</div>
@@ -1,12 +0,0 @@
-<div class="slide-body">
- <hgroup>
- <h1>Other details</h1>
- <h2>Small stuff</h2>
- </hgroup>
- <p>The hash updates with each slide.</p>
- <p>The slideshow itself has 3 dependencies: jQuery, htmlSlides.js, and a small stylesheet.</p>
- <p>The slide script has one option, the option to hide the toolbar at the top:</p>
- <pre>
-htmlSlides.init({ toolbar: true });
- </pre>
-</div>
@@ -1,7 +0,0 @@
-<div class="slide-body">
- <hgroup>
- <h1>That's all</h1>
- </hgroup>
- <p>Get it at <a href="http://github.com/robflaherty/html-slideshow">github</a>.</p>
- <p>- Rob Flaherty / <a href="http://twitter.com/ravelrumba">@ravelrumba</a> / <a href="mailto:rob@ravelrumba.com">rob@ravelrumba.com</a></p>
-</div>

0 comments on commit 549ba31

Please sign in to comment.