slideshow-templates 2.4.0

data/templates/s6/print.css

@@ -0,0 +1 @@
+/*********************************
 * CSS @media print rules (not projection or screen)
 */
 * Make sure all slides are visible (to make them all appear in prin)
 */
         display: block !important;
       }
 * Extra styling for first slide (title slide)
 */
     border-bottom: 1px dotted silver;
   }
 * Turn on print-specific stuff/classes
 */
 * Turn off online (screen/projection)-specific stuff/classes
 */
 * The following rule keeps the layout stuff out of print.
 * Remove at your own risk!
 */

data/templates/s6/projection.css

@@ -0,0 +1,109 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toogle between slideshow/outline mode using t-key
+ */
+
+html,
+body,
+.presentation { margin: 0; padding: 0; }
+
+
+.slide { display: none; 
+         position: absolute;
+         top: 0; left: 0; 
+         margin: 0;
+         padding: 2% 4% 0% 4%;      /* css note: order is => top right bottom left  */
+         width: 92%; height: 95%;    /* css note: to get to 100% add padding/border/margin */
+         overflow-x: hidden; overflow-y: auto;
+         z-index: 2;
+       }
+
+#slide1 { display: block; }
+
+.notes  { display: none; } /* handout notes/note (use note? handout? notes? */
+
+
+/********* format layout block
+ *
+ *  .layout
+ *    > #header
+ *    > #footer
+ *    > #controls      (holding navigation controls)
+ *       > #navLinks
+ *          > #toggle
+ *          > #navList
+ *            > #jumplist
+ *    > #currentSlide  (e.g. 1/7)
+ *
+ */
+
+.layout { display: block; }
+
+#header {  position: fixed;
+           top: 0; left: 0;
+           width: 100%; height: 0.5em;
+           z-index: 1;
+        }
+   
+#footer {  position: fixed;
+           top: auto; bottom: 0;
+           padding: 1em 0;   /* css note: order is => 1st top,bottom; 2nd right,left */
+           width: 100%; height: 1em;
+           z-index: 5;
+    
+           /* todo: move font-size and font-style to blank.css */    
+           font-size: 100%; font-weight: bold; 
+        }
+  
+/* todo: move font-size and font-style to blank.css */
+
+  #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; }
+  #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; }
+
+
+/*************************
+ * format for navigation controls 
+ */
+
+
+#controls { position: fixed;
+              left: 60%; bottom: 0;
+              width: 40%;
+              z-index: 100;
+              text-align: right;
+              font: bold 1.2em Verdana, Helvetica, sans-serif;
+            }
+  
+  #controls :focus { outline: 1px dotted white;}
+  
+  #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } 
+   
+  #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; }
+  
+  #controls #navLinks :link,
+  #controls #navLinks :visited {text-decoration: none; }
+
+  #controls #navList #jumplist { background: white; color: black; }
+
+/*************************
+ * format for 
+ * currentSlide block ( e.g. 2/20 )
+ */
+
+#currentSlide { position: fixed;
+                left: 45%; bottom: 1em;
+                width: 10%;
+                z-index: 10;
+                text-align: center;
+                font-size: 0.8em;
+              }
+
+#currentSlide :link,
+#currentSlide :visited {  text-decoration: none; }
+
+

data/templates/s6/screen.css

@@ -0,0 +1,50 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toogle between slideshow/outline mode using t-key
+ */
+
+
+/****
+ * hide layout stuff (header, footer, navLinks, navList etc.)
+ */
+
+.layout * { display: none; }
+
+.projection { display: none; }
+
+/*************
+ * make toggle button visible and reposition to upper right corner *
+ * note: toogle button is nested inside #controls > #navLinks > #toogle
+ */
+
+#controls,
+#navLinks,
+#toggle    { display: block;
+             visibility: visible;
+             margin: 0; padding: 0;
+           }
+
+#toggle { position: fixed;
+          top: 0; right: 0;
+          padding: 0.5em; 
+          border-left: 1px solid;
+          border-bottom: 1px solid;
+          background: white;
+        }
+
+
+/*************
+ * making the outline look pretty-ish
+ */
+
+#slide1, #slide1 h1, #slide1 h2, #slide1 h3, #slide1 h4 {border: none; margin: 0;}
+#slide1 h1 {padding-top: 1.5em;}
+
+.slide { margin: 1.5em 0 0; border-top: 1px solid #888; }
+.slide h1 { border-bottom: 1px solid #AAA; }
+

data/templates/slides.html.erb

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
+   <title><%= @headers['title'] %></title>
+
+<meta name="generator" content="<%= @headers['generator'] %>">
+<meta name="author"    content="<%= @headers['author']%>" >
+
+<!-- helper/macro that lets you add (CSS3) gradient using headers
+     see http://slideshow.rubyforge.org/themes.html
+     
+  <%=  gradient_from_headers() %>   -->
+
+<!-- S6 style sheet links -->
+<link rel="stylesheet" href="<%= "#{@name}.css" %>" media="projection" id="styleProjection">
+<link rel="stylesheet" href="s6/screen.css"         media="screen"     id="styleScreen">
+<link rel="stylesheet" href="s6/print.css"          media="print">
+
+<!-- S6 JS -->
+<script src="s6/jquery.js"></script>
+<script src="s6/jquery.slideshow.js"></script>
+<script>
+  $(document).ready( function() {
+    Slideshow.init();
+  } );
+
+  <%= content_for :js %>
+</script>
+
+<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
+<!--[if IE]>
+<script src="s6/jquery.microsoft.js"></script>
+<![endif]-->
+
+<%= content_for :head %>
+
+</head>
+<body>
+
+<div class="layout"> 
+  <div id="header"></div>
+  <div id="footer">
+    <h1><%= @headers['footer'] %></h1>
+    <h2><%= @headers['subfooter'] %></h2>
+  </div>
+</div>
+
+<div class="presentation">
+   
+<%= @content %>
+
+</div><!-- presentation -->
+</body>
+</html>

data/templates/slides.pdf.html.erb

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+   <title><%= @headers['title'] %></title>
+   
+   <%= content_for :head %>
+
+<style>
+html, body { margin: 0; padding: 0; }
+
+body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
+
+a:link, a:visited { color: black; }
+
+h1 { font-size: 30pt;  }
+h2 { font-size: 28pt;  }
+h3 { font-size: 25pt;  }
+p, li, dt, dd, td, th { font-size: 18pt; }
+
+pre { font-size: 14pt;  }
+pre.small { font-size: 11pt; }
+
+pre.code {
+        background-color: azure;
+        padding: 5px;
+      }
+     
+ul { list-style-type: square; }    
+   
+.center { text-align: center; }   
+     
+.slide { page-break-after: always;
+         min-height: 100mm;
+         padding: 40px;
+         
+         border: 1px dotted black;
+
+/*      
+  background: -moz-linear-gradient( top, maroon, red);
+*/
+       }
+
+<%= content_for :css %>
+
+/*
+for princexml (CSS3 paged media support)
+@page { size: A4 landscape }
+*/
+</style>
+
+</head>
+<body>
+
+<div class="presentation">
+
+<%= @content %>
+
+  </div> <!-- presentation -->
+</body>
+</html> 
+

data/templates/style.css.erb

@@ -0,0 +1,91 @@
+@import url(s6/projection.css); /* required to make the slide show run at all */
+     
+body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
+
+a:link, a:visited { color: black; }
+
+.slide h1 { font-size: 30pt;  }
+
+.slide h1 {  text-align: center; }
+
+.slide h1.fullscreen { position: absolute;
+                       top: 40%;
+                       width: 100%; }
+
+/* lets you create slides with no heading (because heading is hidden but gets included in toc) */
+.slide h1.hidden     { display: none; }
+
+
+.slide h2 { font-size: 28pt;  }
+
+h3 { font-size: 25pt;  }
+
+/* todo: add special formating for .cover slide
+   lets you use h1(cover). for title/cover slide (a la S5 slide0) but more generic (not bound to 1st slide)
+*/
+
+.cover h1 { /* tbd */ }
+.cover h2 { /* tbd */ }
+
+/* todo: add special formating for h1, h2 in footer */
+
+#footer h1 { /* tbd */ }
+#footer h2 { /* tbd */ }
+
+
+p, li, dt, dd, td, th { font-size: 18pt; }
+
+ul { list-style-type: square; }    
+
+/**********************************/
+/* general text-alignment classes */
+
+.left   { text-align: left; }
+.center { text-align: center; }
+.right  { text-align: right;  }
+
+/**********************************/
+/* general font-size classes      */
+
+.small { font-size: 97%; }
+
+.x-small,
+.smaller { font-size: 88%; }
+
+.xx-small,
+.smallest,
+.tiny      { font-size: 82%; }
+
+
+
+pre { font-size: 16pt;  }
+
+.code { 
+        background-color: azure;
+        padding: 5px;
+      }
+     
+.footnote a:first-of-type  { text-decoration: none; }
+
+
+p.small  { font-size: 97%; }
+
+p.x-small,
+p.smaller,  
+p.footnote { font-size: 88%; }
+
+p.xx-small,
+p.smallest,
+p.tiny     { font-size: 82%; }
+
+
+.help p,
+.help td  { font-size: 88%; }
+
+ 
+.step { color: silver; }
+/* or hide next steps e.g.  .step { visibility: hidden; } */
+.stepcurrent { color: black; }
+
+
+<%= content_for :css %>

data/templates/welcome.text

@@ -0,0 +1,167 @@
+%%%%%%%%%%%%%%%%%%
+%% Some Headers
+
+Title: Slide Show (S9) 10-Minute Tutorial
+
+
+%%%%%%%%%%%%%%
+%% Let's go.
+
+Slide Show (S9) 10-Minute Tutorial
+==================================
+
+Agenda
+
+* What's Slide Show (S9)? 
+* Wiki-Style Markup Language - Markdown, Textile
+* How it works - Just press F11! 
+* What's S5? What's S6?
+* Gradient Themes Using "Loss-Free" Vector Graphics in S9 
+* Turn Your Online Wiki Pages into Slide Shows - Sputnik Case Study
+
+
+What's Slide Show (S9)?
+=======================
+
+### What? 
+
+A Free Web Alternative to PowerPoint and KeyNote in Ruby
+
+
+### Getting Started in 1-2-3 Easy Steps
+
+* Step 1: Author your slides in plain text using a wiki-style markup language
+* Step 2: Generate your slide show using the `slideshow` gem
+* Step 3: Open up your slide show in your browser and hit the space bar to flip through your slides
+* That's it. Showtime!
+
+
+Wiki-Style Markup Language - Markdown
+=====================================
+
+Lets you create slide shows and author slides in plain text
+using a wiki-style markup language that's easy-to-write and easy-to-read.
+Sample:
+
+```
+What's Slide Show (S9)?
+=======================
+
+### What? 
+
+A Free Web Alternative to PowerPoint and KeyNote in Ruby
+
+### Getting Started in 1-2-3 Easy Steps
+
+- Step 1: Author your slides in plain text using a wiki-style markup language
+- Step 2: Generate your slide show using the `slideshow` gem
+- Step 3: Open up your slide show in your browser 
+- That's it. Showtime!
+```
+
+
+How it works - Just press F11!
+==============================
+
+The Slide Show (S9) Ruby gem turns your slides in plain text into a web page 
+that's an all-in-one-page handout and a live slide show all at once.
+
+
+    $ slideshow tutorial
+    
+    => Preparing slide show 'tutorial.html'...
+    => Done.
+
+
+Turn your web page into a slide show and your browser into full screen projection
+with a single push button (F11).  Hit the space bar or the right arrow, down arrow
+or page down key to flip through your slides.
+
+That's all. It's that simple.
+
+
+Slide Show (S9) Template Pack Options
+=====================================
+
+{% left %}
+
+### What's S5?
+
+Simple Standards-based Slide Show System (S5) -Eric Meyer's (of CSS fame) public domain (free, open source) slide show package inspired by Opera Show and others
+that works in all modern browsers (without any plugin required
+because it includes its own slide show machinery in JavaScript).
+
+(Use the `s5blank` or `s5themes` template pack to create S5 slide shows.)
+
+{% end %}
+
+{% right %}
+
+### What's S6?
+
+S6 started as a rewrite of Eric Meyer's S5 using the jQuery JavaScript library -- offering easier to understand and easier to extend code. Add plugins, effects and more. Contributions welcome!
+
+(Use the `s6blank` or `s6syntax` template pack to create S6 slide shows.)
+
+{% end %}
+
+### What's Slidy? What's Slippy? What's Google HTML5 Slides? 
+
+Check the [Slide Show Template Gallery](http://slideshow.rubyforge.org/templates.html)
+for more template packs and samples.
+
+
+
+Gradient Themes Using "Loss-Free" Vector Graphics in S9
+=======================================================
+
+### CSS3 Background Gradients 
+
+Using modern browser such as Firefox (3.6+), Chrome and Safari you can
+now theme your slide shows using using "loss-free" vector
+graphics in plain old CSS. Thanks to gradient support in backgrounds in CSS3.
+
+For example, the linear gradient from top to bottom with four color is defined
+in CSS3 as:
+
+```
+.gradient_yellow_orange {
+  
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%,
+                 from(yellow), to(orange),
+                 color-stop(0.33,orange), color-stop(0.66,yellow));
+  
+  background: -moz-linear-gradient(top, yellow, orange, yellow, orange);
+}
+```
+
+Using Slide Show (S9) you can use the `gradient` helper that
+generates the CSS3 for you:
+
+```
+{{{{ gradient yellow orange yellow orange }}
+```
+
+
+Turn Your Online Wiki Pages into Slide Shows - Sputnik Case Study
+=================================================================
+
+Inspired by the Slide Show (S9) Ruby gem - Yuri Takhteyev has
+added S9-style slide shows
+to [Sputnik](http://sputnik.freewisdom.org/en/Slideshow_Demo) - a wiki in Lua.
+
+Lets you author slide shows online in your browser.
+It's - surprise, surpise - a wiki and, thus, lets you
+ work togther with others on a slide show, 
+track changes and versions, link and get linked, and much much more.
+
+
+Thanks - Learn More - Questions? Comments?
+==========================================
+
+Gerald Bauer designed and developed the Slide Show (S9) Ruby gem. 
+Find out more @ [`slideshow.rubyforge.org`](http://slideshow.rubyforge.org)
+
+Questions? Comments? Send them along
+to the [Free Web Slide Show Alternatives - S5, S6, S9 And Friends - Forum/Mailing List](http://groups.google.com/group/webslideshow).
+Thanks!