slideoff 0.2 → 0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1d0aa4b8f01cf7a42842d9b123398462f220e839
-  data.tar.gz: f9a9cf3439952674be0967dc8536e72a32e88658
+  metadata.gz: a50c9f4b9fb5933f3b718b4cb7caf0d7f01fdca9
+  data.tar.gz: c0e85071f700e4a6bf231965401ce202de73751d
 SHA512:
-  metadata.gz: 3d0d5a0798c3bf125e700ed516d9967b48b2412c18f4e83b0d02a40c77e64c4f3a93d94bbc29aae56f9aed60561abe8847cf3380d4eb438f4a42c6f699725a53
-  data.tar.gz: c8d670ec6a1033eabb8a939e40c7cf92ab6d9c194697ab834bbe57fb896cb30fc2c89c889c04d186fe3a5c525d87530e08acb5bc6a0dd94f1fa47fe3c64aaeb3
+  metadata.gz: 41639965b9d4ea7e04852eefc93a64c84abba6175e77866d66c68397b559e6b627e438849dbe7ca1285263011aba24209c28f4eebabdbf73bf13addb32f4b9f4
+  data.tar.gz: cda24d0ee6c9ce12cfa6a9fad72a3ed8aa7d725003b1ab496d0d938b615c69de62a6660c09e2b820693d49679aa5c38f248f7b57a985a6c8bff1c0de4ea641a6

data/README.md

@@ -16,58 +16,72 @@ Click here for a [demonstration](http://slideoff-test.dsiw-it.de/).
 * **pygments** for syntax highlighting
 * **wget** for static site generation
 * **python3** for serving static presentation
-* **git** for installing themes and make your slides version controled
-* **scp** for uploading to remote host
-* **Browser** for viewing presentation
+* **git** for installing themes and make your slides version controlled
+* **scp** for uploading to remote host via secure copy
+* **wkhtmltopdf** for generating PDF
+* **Browser** for viewing your presentation
+
+## Features
+
+* Write your slides in the simplest markup language `markdown`
+* Very portable presentation. You only need to upload your presentation to your web server via `scp` and open your URL.
+* Change the theme via overriding CSS in `style.css` or create a new one.
+* Install different themes
+* Export to pdf via `slideoff pdf`
+* Use the best features from web technologies. Be dynamic and interactive via Javascript, easy styling via CSS, ...
 
 
 ## First presentation
 
+1. Install ruby and some dependencies from Requirements section
 1. `gem install slideoff` Install Slideoff
 1. `slideoff init mypres` Initialize presentation in `mypres/`
 1. `$EDITOR presentation.json` and add your Flickr API key
 1. `$EDITOR main/index.md` Edit your slides
 1. `slideoff serve` Start server
 1. Open <http://localhost:9000/>
-1. Use the arrows keys to navigate between slides
+1. Use the arrow keys to navigate between slides
 
 ## Themes
 
-Several themes are available: `io2012`, `shower`, `3d_slideshow`, `reveal`,
-`html5rocks`, `CSSS`, `memories` and `modern`. To choose the theme for your
+Several themes are available: `modern`, `io2012`, `shower`, `3d_slideshow`, `reveal`,
+`html5rocks`, `CSSS` and `memories`. To choose the theme for your
 presentation, edit the `presentation.json` file and change the `"theme"`
 element.
 
-You can also create your own theme, for example, by copying the template:
+**Attention: Some of the following features are only implemented in `modern` theme.**
 
-```sh
-mkdir -p ~/.slideoff
-cp -r themes/template ~/.slideoff/my-theme
-$EDITOR ~/.slideoff/my-theme/README
-```
+Override some theme styles by using `style.css` in the presentation directory. Another way is to clone the theme via
+`slideoff install_theme <git-url>` and make changes there. Be sure to use the correct theme name in `presentation.json`.
+
+Asset lookup in this order:
+1. `./<asset_name>`
+1. `.config/slideoff/themes/<theme_name>/<asset_name>`
+1. `installation_dir/themes/<theme_name>/<asset_name>`
+1. `installation_dir/themes/common/<asset_name>`
 
 
 ## Markup for the slides
 
-This slides are writen in [Markdown](http://daringfireball.net/projects/markdown/syntax)
+This slides are written in [Markdown](http://daringfireball.net/projects/markdown/syntax)
 and `!SLIDE` is the indicator for a new slide.
 
 Example:
 
     !SLIDE
-    # Title of the first slide #
-    ## A subtitle ##
+    # Title of the first slide
+    ## A subtitle
     And some text...
 
     !SLIDE
-    # Another slide #
+    # Another slide
 
     * a
     * bullet
     * list
 
     !SLIDE
-    # Third slide #
+    # Third slide
 
     1. **bold**
     2. _italics_
@@ -90,6 +104,8 @@ like this:
     end
     ```
 
+Different syntax highlighting styles exist in modern theme: `colorful`, `github`, `solarized-light`, `solarized-dark`
+
 
 ##Flickr integration
 
@@ -171,7 +187,7 @@ and all `li`-HTML-Elements will be displayed after some key strokes. For example
 
 If you like to add some opacity to visited elements, you can add `incr-list hover` to `!SLIDE`.
 
-If you don't like to increment list items only, you can do it more precise. You only have to add `!PAUSE` in your slide. For example:
+If you don't like to always increment list items, you can do it more precise. You only have to add `!PAUSE` to your slide. For example:
 
 ```
 !SLIDE
@@ -187,13 +203,6 @@ This paragraph will be displayed first.
 
 Try it in your example presentation after initialization.
 
-## Export to PDF
-
-Change to list mode with stroking `esc` key and use your normal printer dialog. You have to specify the correct margins and paper dimensions. I added a custom "PX 1024x640" and set width to 270mm and height to 169mm and all margins to 0.
-
-You can export your presentation to PDF by installing
-[phantomjs](http://phantomjs.org/) and then run `slideoff2pdf`.
-
 
 ## Issues or Suggestions
 

data/bin/slideoff

@@ -7,7 +7,7 @@ require "slideoff"
 
 include GLI::App
 
-version "0.3.5" # Slideoff::VERSION
+version Slideoff::VERSION
 
 
 desc 'Create new slideoff presentation'
@@ -25,11 +25,12 @@ end
 
 desc 'Install new slideoff theme'
 arg_name 'repository_url'
-long_desc 'Installs theme under ~/.slideoff.'
+arg_name 'theme_name'
+long_desc "Installs theme under #{Slideoff::CONFIG.dir}/themes"
 command [:install_theme] do |c|
   c.action do |global_options,options,args|
     raise "repository_url is required" if args.empty?
-    Slideoff::Utils.install_theme(args[0])
+    Slideoff::Utils.install_theme(args[0], args[1])
     puts "Done."
   end
 end
@@ -78,7 +79,7 @@ desc 'Generate static version of presentation'
 long_desc 'Creates a static version of the presentation in "static" directory'
 command [:static] do |c|
   c.desc 'Port on which to run'
-  c.default_value Slideoff::Server::DEFAULT_PORT
+  c.default_value 4141
   c.flag [:p,:port]
 
   c.action do |global_options,options,args|
@@ -106,6 +107,20 @@ command [:serve_static] do |c|
 end
 
 
+desc 'Generate PDF of presentation'
+long_desc 'Generate PDF of presentation'
+command [:pdf] do |c|
+  c.desc 'Port on which to run'
+  c.default_value "4343"
+  c.flag [:p,:port]
+
+  c.action do |global_options,options,args|
+    pdf_filename = Slideoff::Utils.generate_pdf_file(options)
+    puts "Generated #{pdf_filename}."
+  end
+end
+
+
 pre do |global,command,options,args|
   # Pre logic here
   # Return true to proceed; false to abourt and not call the

data/lib/slideoff.rb

@@ -11,5 +11,5 @@ module Slideoff
   autoload :FlickrAPI,       "slideoff/flickr_api"
 
   CONFIG = ConfigBuilder.new(Dir.pwd)
-  VERSION = "0.2"
+  VERSION = "0.3"
 end

data/lib/slideoff/config_builder.rb

@@ -6,6 +6,7 @@ require "ostruct"
 module Slideoff
   class ConfigBuilder < OpenStruct
     DEFAULT = {
+      "dir" => "#{ENV['HOME']}/.config/slideoff",
       "title" => "No title",
       "theme" => "shower",
       "duration" => 60,
@@ -18,10 +19,10 @@ module Slideoff
     }
 
     def initialize(_dir)
-      infos = extract_normal_infos(_dir) || extract_infos_from_showoff(_dir) || {}
+      config = DEFAULT.merge({pwd: _dir})
 
+      infos = extract_presentation_infos(_dir) || extract_showoff_presentation_infos(_dir) || {}
       unless infos.empty?
-        infos = DEFAULT.merge({dir: _dir}.merge(infos))
         infos['sections'] = infos['sections'].reduce({}) do |new_hash, (k, hash)|
           new_hash.merge!(k => SECTION_DEFAULT.merge(hash))
         end
@@ -32,17 +33,18 @@ module Slideoff
         ENV["FLICKR_API_KEY"] = infos['flickr_api_key']
       end
 
-      super(infos)
+      super(config.merge(infos))
     end
 
     private
 
-    def extract_normal_infos(dir)
-      parse_file(dir, "presentation")
+    def extract_presentation_infos(dir)
+      parse_json_file(dir, "presentation")
     end
 
-    def extract_infos_from_showoff(dir)
-      infos = parse_file(dir, "showoff")
+    # backward compability for showoff
+    def extract_showoff_presentation_infos(dir)
+      infos = parse_json_file(dir, "showoff")
       sections = infos["sections"].map {|s| s["section"] }
       {
         "title" => infos["name"],
@@ -51,7 +53,7 @@ module Slideoff
       }
     end
 
-    def parse_file(dir, file)
+    def parse_json_file(dir, file)
       filename = "#{dir}/#{file}.json"
       return {} unless File.exists?(filename)
       Yajl::Parser.parse(File.read filename)

data/lib/slideoff/presentation.rb

@@ -40,10 +40,10 @@ module Slideoff
     def path_for_asset(asset)
       [CONFIG, theme, common].each { |dir| convert_styles(dir) }
 
-      Dir[     "#{CONFIG.dir}#{asset}"].first ||
-        Dir[  "#{theme.dir}#{asset}"].first ||
-        Dir[ "#{common.dir}#{asset}"].first ||
-        Dir["#{CONFIG.dir}/**#{asset}"].first
+      Dir[     "#{CONFIG.pwd}#{asset}"].first ||
+        Dir[    "#{theme.dir}#{asset}"].first ||
+        Dir[   "#{common.dir}#{asset}"].first ||
+        Dir["#{CONFIG.pwd}/**#{asset}"].first
     end
 
     def convert_styles(dir)
@@ -56,7 +56,7 @@ module Slideoff
 
     def build_theme(title)
       Theme.new.tap do |t|
-        dir = File.expand_path("~/.slideoff/#{title}")
+        dir = File.expand_path("#{CONFIG.dir}/themes/#{title}")
         if File.exists?(dir)
           t.dir = dir
         else
@@ -72,7 +72,7 @@ module Slideoff
 
     def sections
       @parts.map.with_index do |(dir, options), section_num|
-        raw = Dir["#{CONFIG.dir}/#{dir}/**/*.md"].sort.map do |f|
+        raw = Dir["#{CONFIG.pwd}/#{dir}/**/*.md"].sort.map do |f|
           File.read(f)
         end.join("\n\n")
         parts = raw.split(/!SLIDE */)

data/lib/slideoff/server.rb

@@ -25,12 +25,12 @@ module Slideoff
       server.start
     end
 
-    private
-
     def presentation
       Slideoff::Presentation.new(dir)
     end
 
+    private
+
     def logger
       logger = Log4r::Logger.new(self.class.name)
       logger.add(stdout_outputter)

data/lib/slideoff/utils.rb

@@ -360,7 +360,7 @@ Home                            | Goto first slide
 End                             | Goto last slide
 
 !SLIDE
-# Keybindings (1)
+# Keybindings (2)
 
 Key                             | Action
 ------------------------------- | -------------------------
@@ -386,6 +386,13 @@ PageDown / Down / right / l / j | Goto next slide
   "sections": {
     "main": {"title": "Modern theme", "show_chapter": false, "show_toc": false}
   }
+}
+          EOF
+        end
+        File.open('style.css', 'w') do |file|
+          file.write <<-EOF
+/* Override your theme styles */
+.slide {
 }
           EOF
         end
@@ -393,15 +400,13 @@ PageDown / Down / right / l / j | Goto next slide
       end
     end
 
-    def install_theme(git_repository_url)
-      slideoff_home = File.join(ENV['HOME'], '.slideoff')
-      FileUtils.mkdir_p slideoff_home
-
-      theme_name = git_repository_url.split('/').last
-      theme_path = File.join(slideoff_home, theme_name)
+    def install_theme(git_repository_url, theme_name)
+      theme_name ||= git_repository_url.split('/').last.gsub(/slideoff-|theme-/, '')
+      theme_path = File.join(CONFIG.dir, 'themes', theme_name)
+      FileUtils.mkdir_p File.dirname(theme_path)
       `git clone #{git_repository_url} #{theme_path}`
-      puts "Cloned under #{theme_path}"
 
+      puts
       puts "Please make sure that '#{theme_name}' is set in your presentation.json"
     end
 
@@ -415,19 +420,12 @@ PageDown / Down / right / l / j | Goto next slide
     end
 
     def generate_static(options = {})
-      pid = Process.fork { Slideoff::Server.new(options).start }
-
-      sleep 2
-
-      begin
+      fork_server(options) do
         FileUtils.mkdir_p(static_dir)
         Dir.chdir(static_dir) do |dir|
-          `wget -E -H -k -nH -p http://lh:#{options[:port]}/`
+          `wget -E -H -k -nH -p http://127.0.0.1:#{options[:port]}/`
           File.write('robots.txt', "User-agent: *\nDisallow: /\n")
         end
-      ensure
-        Process.kill "QUIT", pid
-        Process.wait pid
       end
     end
 
@@ -436,18 +434,49 @@ PageDown / Down / right / l / j | Goto next slide
       `python3 -m http.server #{port}`
     end
 
+    def generate_pdf_file(options = {})
+      pdf_file = "talk_#{convert_to_filename(CONFIG.title)}.pdf"
+      fork_server(options) do
+        page_width = '8000px'
+        page_height = '6000px'
+        page_margin = 0
+        source = "http://127.0.0.1:#{options[:port]}"
+        dest = pdf_file
+        `wkhtmltopdf --page-width #{page_width} --page-height #{page_height} -B #{page_margin} -R #{page_margin} -L #{page_margin} -T #{page_margin} #{source} #{dest}`
+      end
+
+      pdf_file
+    end
+
+    private
 
-    def parents(dir)
+    def self.parents(dir)
       splitted = dir.split(File::SEPARATOR)
       splitted.length.times.reduce([]) { |_parents, i| _parents << splitted[0..i].join(File::SEPARATOR) }
     end
 
-    def remote_cmd(cmds)
+    def self.remote_cmd(cmds)
       `ssh #{CONFIG.remote_host} "#{Array(cmds).join(';')}"`
     end
 
-    def static_dir
-      "../static_#{File.basename(Dir.pwd)}"
+    def self.static_dir
+      "public"
+    end
+
+    def self.convert_to_filename(string)
+      string.downcase.gsub(/[^a-z0-9.-]/, '')
+    end
+
+    def self.fork_server(options)
+      pid = Process.fork { Slideoff::Server.new(options).start }
+      sleep 2
+
+      begin
+        yield
+      ensure
+        Process.kill "QUIT", pid
+        Process.wait pid
+      end
     end
   end
 end

data/themes/modern/css/print.css

@@ -0,0 +1,6 @@
+@page {
+  margin: 0;
+  size: 1024px 768px; }
+@media print {
+  .slide {
+    page-break-after: always; } }

data/themes/modern/css/screen.css

@@ -239,6 +239,15 @@ table {
     opacity: 0; }
   100% {
     opacity: 0; } }
+@keyframes blink {
+  0% {
+    opacity: 1; }
+  49% {
+    opacity: 1; }
+  50% {
+    opacity: 0; }
+  100% {
+    opacity: 0; } }
 body {
   font: 30px/2 'Open Sans', sans-serif;
   counter-reset: problem 0; }
@@ -281,8 +290,8 @@ a {
   color: #FFF;
   text-align: center;
   -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
-  -webkit-transform: rotate(45deg) translateY(-1em);
   transform: rotate(45deg) translateY(-1em); }
 
 .slide {
@@ -362,7 +371,8 @@ a {
   .slide kbd.inline, .slide code.inline, .slide samp.inline {
     padding: 2px 7px; }
 .slide blink {
-  -webkit-animation: blink 1.0s infinite; }
+  -webkit-animation: blink 1.0s infinite;
+  animation: blink 1.0s infinite; }
 .slide mark {
   padding-left: 5px;
   padding-right: 5px;
@@ -412,12 +422,12 @@ a {
       color: #AAA5A0;
       padding-right: 20px;
       margin-right: 15px; }
-.slide.cover figure, .slide.chapter figure, .slide.section figure {
+.slide.cover figure, .slide.section figure {
   position: initial;
   max-height: initial;
   text-align: initial;
   vertical-align: initial; }
-  .slide.cover figure img, .slide.chapter figure img, .slide.section figure img {
+  .slide.cover figure img, .slide.section figure img {
     max-height: initial; }
 .slide figure {
   position: relative;
@@ -573,7 +583,7 @@ a {
 .slide table {
   left: 50%;
   position: relative;
-  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
   margin: 0 0 28px;
   width: 100%;
   border-collapse: collapse;
@@ -589,12 +599,12 @@ a {
 .slide img, .slide iframe {
   position: absolute;
   left: 50%;
-  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
   max-height: 580px;
   max-width: 850px; }
   .slide img.inline, .slide iframe.inline {
     position: initial;
-    -webkit-transform: none; }
+    transform: none; }
 .slide iframe {
   box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
   border: 1px solid #e6e6e6;
@@ -602,29 +612,29 @@ a {
   height: 100%; }
 .slide iframe::-webkit-scrollbar {
   display: none; }
-.slide.cover, .slide.chapter, .slide.section, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution {
+.slide.cover, .slide.section, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution {
   z-index: 1; }
-  .slide.cover:after, .slide.chapter:after, .slide.section:after, .slide.shout:after, .slide.chapter:after, .slide.chapter-html:after, .slide.problem-solution:after, .slide.problem:after, .slide.solution:after {
+  .slide.cover:after, .slide.section:after, .slide.shout:after, .slide.chapter:after, .slide.chapter-html:after, .slide.problem-solution:after, .slide.problem:after, .slide.solution:after {
     content: '';
     border: none; }
-  .slide.cover h1, .slide.chapter h1, .slide.section h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 {
+  .slide.cover h1, .slide.section h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 {
     display: none; }
-  .slide.cover h2, .slide.chapter h2, .slide.section h2, .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 {
+  .slide.cover h2, .slide.section h2, .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 {
     border: none; }
-  .slide.cover code, .slide.chapter code, .slide.section code, .slide.shout code, .slide.chapter code, .slide.chapter-html code, .slide.problem-solution code, .slide.problem code, .slide.solution code {
+  .slide.cover code, .slide.section code, .slide.shout code, .slide.chapter code, .slide.chapter-html code, .slide.problem-solution code, .slide.problem code, .slide.solution code {
     color: white;
     font-size: 0.8em;
     padding: 20px;
     background-color: rgba(0, 0, 0, 0.3);
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.33);
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); }
-  .slide.cover footer, .slide.chapter footer, .slide.section footer, .slide.shout footer, .slide.chapter footer, .slide.chapter-html footer, .slide.problem-solution footer, .slide.problem footer, .slide.solution footer {
+  .slide.cover footer, .slide.section footer, .slide.shout footer, .slide.chapter footer, .slide.chapter-html footer, .slide.problem-solution footer, .slide.problem footer, .slide.solution footer {
     display: none; }
-.slide.cover, .slide.chapter, .slide.section {
+.slide.cover, .slide.section {
   background: #000; }
-  .slide.cover hgroup, .slide.chapter hgroup, .slide.section hgroup {
+  .slide.cover hgroup, .slide.section hgroup {
     background-color: transparent; }
-  .slide.cover > div, .slide.chapter > div, .slide.section > div {
+  .slide.cover > div, .slide.section > div {
     position: absolute;
     top: 0;
     left: 0;
@@ -632,7 +642,7 @@ a {
     padding: 0;
     width: 1024px;
     height: 768px; }
-  .slide.cover .left-33, .slide.chapter .left-33, .slide.section .left-33 {
+  .slide.cover .border-info, .slide.section .border-info, .slide.cover .left-33, .slide.section .left-33, .slide.cover .right-33, .slide.section .right-33, .slide.cover .left-50, .slide.section .left-50, .slide.cover .right-50, .slide.section .right-50 {
     padding: 60px 0px;
     font: 38px/1 'Open Sans', sans-serif;
     font-weight: lighter;
@@ -642,79 +652,86 @@ a {
     height: 768px;
     position: relative;
     box-sizing: border-box; }
-    .slide.cover .left-33 h1, .slide.chapter .left-33 h1, .slide.section .left-33 h1 {
+    .slide.cover .border-info h1, .slide.section .border-info h1, .slide.cover .left-33 h1, .slide.section .left-33 h1, .slide.cover .right-33 h1, .slide.section .right-33 h1, .slide.cover .left-50 h1, .slide.section .left-50 h1, .slide.cover .right-50 h1, .slide.section .right-50 h1 {
       font: 500 46px/1 'Open Sans';
       display: block;
       margin-bottom: 0.6em; }
-    .slide.cover .left-33 h2, .slide.chapter .left-33 h2, .slide.section .left-33 h2 {
+    .slide.cover .border-info h2, .slide.section .border-info h2, .slide.cover .left-33 h2, .slide.section .left-33 h2, .slide.cover .right-33 h2, .slide.section .right-33 h2, .slide.cover .left-50 h2, .slide.section .left-50 h2, .slide.cover .right-50 h2, .slide.section .right-50 h2 {
       font-size: 28px;
       margin-bottom: 0.6em;
       vertical-align: middle;
       line-height: 38px; }
-    .slide.cover .left-33 p, .slide.chapter .left-33 p, .slide.section .left-33 p {
+    .slide.cover .border-info p, .slide.section .border-info p, .slide.cover .left-33 p, .slide.section .left-33 p, .slide.cover .right-33 p, .slide.section .right-33 p, .slide.cover .left-50 p, .slide.section .left-50 p, .slide.cover .right-50 p, .slide.section .right-50 p {
       padding-left: 50px;
       padding-right: 50px; }
-    .slide.cover .left-33 .vcenter, .slide.chapter .left-33 .vcenter, .slide.section .left-33 .vcenter {
+    .slide.cover .border-info .vcenter, .slide.section .border-info .vcenter, .slide.cover .left-33 .vcenter, .slide.section .left-33 .vcenter, .slide.cover .right-33 .vcenter, .slide.section .right-33 .vcenter, .slide.cover .left-50 .vcenter, .slide.section .left-50 .vcenter, .slide.cover .right-50 .vcenter, .slide.section .right-50 .vcenter {
       height: 460px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-box-pack: center; }
-    .slide.cover .left-33 ul, .slide.chapter .left-33 ul, .slide.section .left-33 ul {
+    .slide.cover .border-info ul, .slide.section .border-info ul, .slide.cover .left-33 ul, .slide.section .left-33 ul, .slide.cover .right-33 ul, .slide.section .right-33 ul, .slide.cover .left-50 ul, .slide.section .left-50 ul, .slide.cover .right-50 ul, .slide.section .right-50 ul {
       width: 100%;
       margin: 0; }
-      .slide.cover .left-33 ul li, .slide.chapter .left-33 ul li, .slide.section .left-33 ul li {
+      .slide.cover .border-info ul li, .slide.section .border-info ul li, .slide.cover .left-33 ul li, .slide.section .left-33 ul li, .slide.cover .right-33 ul li, .slide.section .right-33 ul li, .slide.cover .left-50 ul li, .slide.section .left-50 ul li, .slide.cover .right-50 ul li, .slide.section .right-50 ul li {
         padding: 0.5em 50px; }
-  .slide.cover img, .slide.chapter img, .slide.section img, .slide.cover svg, .slide.chapter svg, .slide.section svg, .slide.cover video, .slide.chapter video, .slide.section video,
+  .slide.cover .left-33, .slide.section .left-33 {
+    width: 36%; }
+  .slide.cover .right-33, .slide.section .right-33 {
+    width: 36%;
+    left: 64%; }
+  .slide.cover .left-50, .slide.section .left-50 {
+    width: 50%; }
+  .slide.cover .right-50, .slide.section .right-50 {
+    width: 50%;
+    left: 50%; }
+  .slide.cover img, .slide.section img, .slide.cover svg, .slide.section svg, .slide.cover video, .slide.section video,
   .slide.cover object,
-  .slide.chapter object,
-  .slide.section object, .slide.cover canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover iframe, .slide.chapter iframe, .slide.section iframe {
+  .slide.section object, .slide.cover canvas, .slide.section canvas, .slide.cover iframe, .slide.section iframe {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1; }
-  .slide.cover iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover img, .slide.chapter img, .slide.section img {
+  .slide.cover iframe, .slide.section iframe, .slide.cover img, .slide.section img {
     max-height: none;
     max-width: none; }
-  .slide.cover iframe, .slide.chapter iframe, .slide.section iframe {
+  .slide.cover iframe, .slide.section iframe {
     z-index: 0; }
-  .slide.cover.w img, .slide.chapter img, .slide.section img, .slide.cover.w svg, .slide.chapter svg, .slide.section svg, .slide.cover.w video, .slide.chapter video, .slide.section video,
+  .slide.cover.w img, .slide.cover.chapter img, .slide.chapter.section img, .slide.section img, .slide.cover.w svg, .slide.cover.chapter svg, .slide.chapter.section svg, .slide.section svg, .slide.cover.w video, .slide.cover.chapter video, .slide.chapter.section video, .slide.section video,
   .slide.cover.w object,
-  .slide.chapter object,
-  .slide.section object, .slide.cover.w canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe {
+  .slide.cover.chapter object,
+  .slide.chapter.section object,
+  .slide.section object, .slide.cover.w canvas, .slide.cover.chapter canvas, .slide.chapter.section canvas, .slide.section canvas, .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe {
     top: 50%;
     width: 100%;
-    -webkit-transform: translateY(-50%);
     transform: translateY(-50%); }
-  .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover.w img, .slide.chapter img, .slide.section img {
+  .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe, .slide.cover.w img, .slide.cover.chapter img, .slide.chapter.section img, .slide.section img {
     max-height: none;
     max-width: none; }
-  .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe {
+  .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe {
     z-index: 0; }
-  .slide.cover.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.h video, .slide.h.chapter video, .slide.h.section video,
+  .slide.cover.h img, .slide.h.section img, .slide.cover.h svg, .slide.h.section svg, .slide.cover.h video, .slide.h.section video,
   .slide.cover.h object,
-  .slide.h.chapter object,
-  .slide.h.section object, .slide.cover.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe {
+  .slide.h.section object, .slide.cover.h canvas, .slide.h.section canvas, .slide.cover.h iframe, .slide.h.section iframe {
     left: 50%;
     height: 100%;
-    -webkit-transform: translateX(-50%);
     transform: translateX(-50%); }
-  .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.h img, .slide.h.chapter img, .slide.h.section img {
+  .slide.cover.h iframe, .slide.h.section iframe, .slide.cover.h img, .slide.h.section img {
     max-height: none;
     max-width: none; }
-  .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe {
+  .slide.cover.h iframe, .slide.h.section iframe {
     z-index: 0; }
-  .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.w.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.w.h video, .slide.h.chapter video, .slide.h.section video,
+  .slide.cover.w.h img, .slide.cover.h.chapter img, .slide.h.chapter.section img, .slide.h.section img, .slide.cover.w.h svg, .slide.cover.h.chapter svg, .slide.h.chapter.section svg, .slide.h.section svg, .slide.cover.w.h video, .slide.cover.h.chapter video, .slide.h.chapter.section video, .slide.h.section video,
   .slide.cover.w.h object,
-  .slide.h.chapter object,
-  .slide.h.section object, .slide.cover.w.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe {
+  .slide.cover.h.chapter object,
+  .slide.h.chapter.section object,
+  .slide.h.section object, .slide.cover.w.h canvas, .slide.cover.h.chapter canvas, .slide.h.chapter.section canvas, .slide.h.section canvas, .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe {
     top: 0;
     left: 0;
-    -webkit-transform: none;
     transform: none; }
-  .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img {
+  .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe, .slide.cover.w.h img, .slide.cover.h.chapter img, .slide.h.chapter.section img, .slide.h.section img {
     max-height: none;
     max-width: none; }
-  .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe {
+  .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe {
     z-index: 0; }
 .slide.noheader hgroup {
   display: none; }
@@ -731,7 +748,6 @@ a {
   left: 128px;
   color: #FFF;
   font-size: 100px;
-  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   border-bottom: none;
   z-index: 1; }
@@ -744,7 +760,6 @@ a {
   right: 0;
   top: 50%;
   color: #FFF;
-  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   font-size: 100px;
   line-height: 1em;
@@ -807,41 +822,33 @@ a {
   background-color: rgba(70, 65, 60, 0.8); }
 .slide.img-place-middle img {
   margin-top: 50px; }
-.slide .col2 {
-  position: relative;
-  -webkit-columns: 2; }
-  .slide .col2 li {
+.slide .col, .slide .col2, .slide .col3, .slide .col4 {
+  position: relative; }
+  .slide .col li, .slide .col2 li, .slide .col3 li, .slide .col4 li {
     margin-left: 2em;
     text-indent: -2em; }
+  .slide .col img, .slide .col2 img, .slide .col3 img, .slide .col4 img {
+    position: initial;
+    transform: none; }
+.slide .col2 {
+  -webkit-columns: 2;
+  -moz-columns: 2; }
 .slide .col3 {
-  position: relative;
-  -webkit-columns: 3; }
-  .slide .col3 li {
-    margin-left: 2em;
-    text-indent: -2em; }
+  -webkit-columns: 3;
+  -moz-columns: 3; }
 .slide .col4 {
-  position: relative;
-  -webkit-columns: 4; }
-  .slide .col4 li {
-    margin-left: 2em;
-    text-indent: -2em; }
-  .slide .col4 img {
-    position: initial;
-    -webkit-transform: none; }
+  -webkit-columns: 4;
+  -moz-columns: 4; }
 .slide .place, .slide.img-place-middle img {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%); }
   .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r, .slide .place.b.r, .slide.img-place-middle img.b.r, .slide .place.b.l, .slide.img-place-middle img.b.l {
-    -webkit-transform: none;
     transform: none; }
   .slide .place.t, .slide.img-place-middle img.t, .slide .place.b, .slide.img-place-middle img.b {
-    -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0); }
   .slide .place.l, .slide.img-place-middle img.l, .slide .place.r, .slide.img-place-middle img.r {
-    -webkit-transform: translate(0, -50%);
     transform: translate(0, -50%); }
   .slide .place.t, .slide.img-place-middle img.t, .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r {
     top: 0; }
@@ -950,16 +957,16 @@ a {
   line-height: 1;
   font-size: 17px; }
 
-#slide-0-0 {
+.slide.title {
   color: #46413C;
   font-size: 70px;
   font-weight: 700;
   font: 100 50px/1.4 'Open Sans',sans-serif; }
-  #slide-0-0 hgroup {
+  .slide.title hgroup {
     background-color: #46413C; }
-  #slide-0-0 dl {
+  .slide.title dl {
     font: 100 30px/1.6 'Open Sans', sans-serif; }
-  #slide-0-0 > div {
+  .slide.title > div {
     position: absolute;
     top: 0;
     left: 0;
@@ -967,11 +974,11 @@ a {
     padding: 60px 96px 38px 78px;
     width: 850px;
     height: 670px; }
-  #slide-0-0 footer {
+  .slide.title footer {
     display: block; }
-  #slide-0-0 hgroup {
+  .slide.title hgroup {
     margin-bottom: 0; }
-    #slide-0-0 hgroup h1, #slide-0-0 hgroup h2 {
+    .slide.title hgroup h1, .slide.title hgroup h2 {
       text-transform: none;
       color: white;
       float: none;
@@ -981,11 +988,11 @@ a {
       position: relative;
       left: 0;
       right: 0; }
-  #slide-0-0 p {
+  .slide.title p {
     font: 30px/1.6 'Open Sans', sans-serif;
     color: #46413C;
     margin: 30px 0; }
-    #slide-0-0 p.date {
+    .slide.title p.date {
       font-family: 'Open Sans', sans-serif;
       font-size: 16px; }
 
@@ -1012,13 +1019,11 @@ a {
       text-align: left;
       -webkit-transform-origin: 0 0;
       transform-origin: 0 0;
-      -webkit-transform: scale(0.5);
       transform: scale(0.5); } }
     @media screen and (max-width: 1180px) {
       .list .slide {
         top: 526px;
         margin: -526px -718px 0 0;
-        -webkit-transform: scale(0.25);
         transform: scale(0.25); } }
 @media screen {
       .list .slide:before {
@@ -1032,13 +1037,11 @@ a {
         content: '';
         -webkit-transform-origin: 0 0;
         transform-origin: 0 0;
-        -webkit-transform: scale(2);
         transform: scale(2); } }
       @media screen and (max-width: 1180px) {
         .list .slide:before {
           width: 256px;
           height: 192px;
-          -webkit-transform: scale(4);
           transform: scale(4); } }
 @media screen {
       .list .slide:after {
@@ -1050,7 +1053,6 @@ a {
           width: 512px;
           -webkit-transform-origin: 0 0;
           transform-origin: 0 0;
-          -webkit-transform: scale(2);
           transform: scale(2); } }
 @media screen {
       .list .slide:hover:before {
@@ -1067,7 +1069,7 @@ a {
         left: 0;
         z-index: 2;
         content: ''; }
-      .list .slide.cover:after, .list .slide.chapter:after, .list .slide.section:after, .list .slide.shout:after, .list .slide.chapter:after, .list .slide.chapter-html:after, .list .slide.problem-solution:after, .list .slide.problem:after, .list .slide.solution:after {
+      .list .slide.cover:after, .list .slide.section:after, .list .slide.shout:after, .list .slide.chapter:after, .list .slide.chapter-html:after, .list .slide.problem-solution:after, .list .slide.problem:after, .list .slide.solution:after {
         content: attr(data-slide) "/" attr(data-slides); }
       .list .slide.disabled {
         opacity: 0.8;
@@ -1087,7 +1089,6 @@ a {
           color: #F5F5F5;
           background: rgba(255, 255, 255, 0.4);
           z-index: 1;
-          /* -webkit-transform: rotate(45deg); */
           text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
           text-transform: uppercase; }
 
@@ -1108,38 +1109,35 @@ a {
       position: absolute;
       top: 0;
       left: 0;
-      margin-left: 150%; }
+      display: none; }
       .full .slide .next {
         visibility: hidden; }
         .full .slide .next.active {
           visibility: visible; }
       .full .slide:target {
-        margin: 0; }
-      .full .slide.shout.right h1, .full .slide.right.chapter h1, .full .slide.right.chapter-html h1, .full .slide.right.problem-solution h1, .full .slide.right.problem h1, .full .slide.right.solution h1, .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2, .full .slide.shout.up h1, .full .slide.up.chapter h1, .full .slide.up.chapter-html h1, .full .slide.up.problem-solution h1, .full .slide.up.problem h1, .full .slide.up.solution h1, .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2, .full .slide.shout.left h1, .full .slide.chapter h1, .full .slide.left.chapter-html h1, .full .slide.chapter-html.chapter h1, .full .slide.left.problem-solution h1, .full .slide.problem-solution.chapter h1, .full .slide.chapter.problem h1, .full .slide.chapter.solution h1, .full .slide.left.problem h1, .full .slide.left.solution h1, .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2, .full .slide.shout.down h1, .full .slide.down.chapter h1, .full .slide.down.chapter-html h1, .full .slide.down.problem-solution h1, .full .slide.down.problem h1, .full .slide.down.solution h1, .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 {
+        display: block; }
+      .full .slide.shout.right h1, .full .slide.right.chapter h1, .full .slide.right.chapter-html h1, .full .slide.right.problem-solution h1, .full .slide.right.problem h1, .full .slide.right.solution h1, .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2, .full .slide.shout.up h1, .full .slide.up.chapter h1, .full .slide.up.chapter-html h1, .full .slide.up.problem-solution h1, .full .slide.up.problem h1, .full .slide.up.solution h1, .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2, .full .slide.shout.left h1, .full .slide.left.chapter h1, .full .slide.left.chapter-html h1, .full .slide.left.problem-solution h1, .full .slide.left.problem h1, .full .slide.left.solution h1, .full .slide.shout.left h2, .full .slide.left.chapter h2, .full .slide.left.chapter-html h2, .full .slide.left.problem-solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2, .full .slide.shout.down h1, .full .slide.down.chapter h1, .full .slide.down.chapter-html h1, .full .slide.down.problem-solution h1, .full .slide.down.problem h1, .full .slide.down.solution h1, .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 {
         opacity: 0;
-        transition: all 0.7s ease-out; }
-      .full .slide.shout.right:target h2, .full .slide.right.chapter:target h2, .full .slide.right.chapter-html:target h2, .full .slide.right.problem-solution:target h2, .full .slide.right.problem:target h2, .full .slide.right.solution:target h2, .full .slide.shout.up:target h2, .full .slide.up.chapter:target h2, .full .slide.up.chapter-html:target h2, .full .slide.up.problem-solution:target h2, .full .slide.up.problem:target h2, .full .slide.up.solution:target h2, .full .slide.shout.left:target h2, .full .slide.chapter:target h2, .full .slide.left.chapter-html:target h2, .full .slide.chapter-html.chapter:target h2, .full .slide.left.problem-solution:target h2, .full .slide.problem-solution.chapter:target h2, .full .slide.chapter.problem:target h2, .full .slide.chapter.solution:target h2, .full .slide.left.problem:target h2, .full .slide.left.solution:target h2, .full .slide.shout.down:target h2, .full .slide.down.chapter:target h2, .full .slide.down.chapter-html:target h2, .full .slide.down.problem-solution:target h2, .full .slide.down.problem:target h2, .full .slide.down.solution:target h2 {
+        transition: all 0.5s ease-out; }
+      .full .slide.shout.right:target h2, .full .slide.right.chapter:target h2, .full .slide.right.chapter-html:target h2, .full .slide.right.problem-solution:target h2, .full .slide.right.problem:target h2, .full .slide.right.solution:target h2, .full .slide.shout.up:target h2, .full .slide.up.chapter:target h2, .full .slide.up.chapter-html:target h2, .full .slide.up.problem-solution:target h2, .full .slide.up.problem:target h2, .full .slide.up.solution:target h2, .full .slide.shout.left:target h2, .full .slide.left.chapter:target h2, .full .slide.left.chapter-html:target h2, .full .slide.left.problem-solution:target h2, .full .slide.left.problem:target h2, .full .slide.left.solution:target h2, .full .slide.shout.down:target h2, .full .slide.down.chapter:target h2, .full .slide.down.chapter-html:target h2, .full .slide.down.problem-solution:target h2, .full .slide.down.problem:target h2, .full .slide.down.solution:target h2 {
         opacity: 1;
-        -webkit-transform: translateX(0) translateY(-50%);
         transform: translateX(0) translateY(-50%); }
       .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2 {
-        -webkit-transform: translateX(-100%) translateY(-50%);
         transform: translateX(-100%) translateY(-50%); }
-      .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2 {
-        -webkit-transform: translateX(100%) translateY(-50%);
+      .full .slide.shout.left h2, .full .slide.left.chapter h2, .full .slide.left.chapter-html h2, .full .slide.left.problem-solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2 {
         transform: translateX(100%) translateY(-50%); }
       .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2 {
-        -webkit-transform: translateX(0) translateY(100%);
         transform: translateX(0) translateY(100%); }
       .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 {
-        -webkit-transform: translateX(0) translateY(-100%);
         transform: translateX(0) translateY(-100%); }
     .full .inactive, .full .current {
-      -webkit-transition: opacity 0.5s ease-in-out 0.0s; }
+      -webkit-transition: opacity 0.5s ease-in-out 0.0s;
+      -moz-transition: opacity 0.5s ease-in-out 0.0s; }
     .full .inactive {
       opacity: 0; }
     .full .visited {
-      -webkit-transition: opacity 0.5s ease-in-out 0.3s; }
+      -webkit-transition: opacity 0.5s ease-in-out 0.3s;
+      -moz-transition: opacity 0.5s ease-in-out 0.3s; }
       .full .visited .hide-visited {
         display: none; }
       .full .visited.hide-visited {
@@ -1151,7 +1149,8 @@ a {
       .full li.current:before {
         content: '\2023\00A0\00A0\2009'; }
     .full .border-separated li {
-      -webkit-transition: all 0.5s; }
+      -webkit-transition: all 0.5s;
+      -moz-transition: all 0.5s; }
     .full .border-separated li.inactive {
       margin-left: -400px; }
     .full .border-separated li.current, .full .border-separated li.visited {
@@ -1170,7 +1169,6 @@ a {
         height: 8px;
         padding-left: -10px;
         background: url(../images/progress-grayDark.svg) 100% 0 no-repeat;
-        -webkit-background-clip: content-box;
         background-clip: content-box;
         transition: width 0.3s linear; }
     .full .box.shadow {
@@ -1178,6 +1176,5 @@ a {
       border-radius: 3px; }
     .full .disabled {
       display: none; } }
-@page {
-  margin: 0;
-  size: 1024px 768px; }
+
+/*# sourceMappingURL=screen.css.map */