better slide presentation

brentvatne · May 11, 2012 · f52ca3d · f52ca3d
1 parent aed8e72
commit f52ca3d
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 72 deletions.
diff --git a/app/assets/dynamic/stylesheets/application.scss b/app/assets/dynamic/stylesheets/application.scss
@@ -2,6 +2,7 @@
 @import 'typography.scss';
 @import 'github_buttons.scss';
 @import 'notifications.scss';
+@import 'slides.scss';
 
 .section-title {
   padding-bottom: 40px;
@@ -36,44 +37,6 @@
     color: #B8B8B8;
   }
 
-  .slide-preview {
-    width: 126px;
-    height: 120px;
-    box-sizing: border-box;
-    background-color: #F9F9FA;
-    border: 2px solid #F0F0F0;
-    border-radius: 5px;
-    padding: 10px;
-    margin-right: 10px;
-    display: inline-block;
-    vertical-align: top;
-    text-decoration: none;
-    z-index: 1000;
-    transition: all 0.4s ease-in-out;
-    -moz-transition: all 0.4s ease-in-out;
-    -webkit-transition: all 0.4s ease-in-out;
-    -o-transition: all 0.4s ease-in-out;
-    overflow: hidden;
-    position: relative;
-    &:hover {
-      .left-button {
-        left: 5px;
-      }
-      .right-button {
-        right: 5px;
-      }
-      .delete-button {
-        top: 0px;
-      }
-
-
-      border-color: #B8B8B8;
-      color: #5C5C5C;
-    }
-    code {
-      background-color: #F9F9FA !important;
-    }
-  }
 }
 
 .deck-list {
@@ -192,22 +155,6 @@
   height: 40px;
 }
 
-.slide {
-  border: 1px solid #E4E4E6;
-  border-radius: 5px;
-  width: 698px;
-  height: 500px;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
-  p {
-  padding: 0px 20px 0px 20px;
-  }
-}
-
-.preview {
-}
-
 .slide-edit-area {
   background-color: #F9F9FA;
   form {
@@ -246,7 +193,7 @@
   text-align: center;
 }
 
-h1 {
+h1.outside-slide {
   text-align: center;
   position: relative;
 }
@@ -343,7 +290,7 @@ h1 {
   border-radius: 0px 0px 15px 15px;
   box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
 
-  p {
+  .outside-slide {
     display: inline-block;
     width: 400px;
   }

diff --git a/app/assets/dynamic/stylesheets/slides.scss b/app/assets/dynamic/stylesheets/slides.scss
@@ -0,0 +1,140 @@
+.micro-slide {
+  width: 126px;
+  height: 120px;
+  box-sizing: border-box;
+  background-color: #F9F9FA;
+  border: 2px solid #F0F0F0;
+  border-radius: 5px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: top;
+  text-decoration: none;
+  z-index: 1000;
+  p {
+    padding-top: 0px;
+    margin: 0px;
+  }
+  transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  overflow: hidden;
+  position: relative;
+  &:hover {
+    .left-button {
+      left: 5px;
+    }
+    .right-button {
+      right: 5px;
+    }
+    .delete-button {
+      top: 0px;
+    }
+
+
+    border-color: #B8B8B8;
+    color: #5C5C5C;
+  }
+  code {
+    background-color: #F9F9FA !important;
+  }
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.slide {
+  position: relative;
+
+  border: 1px solid #E4E4E6;
+  border-radius: 5px;
+  width: 698px;
+  height: 500px;
+  $padding: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
+
+  // Images
+
+  img[alt='fullscreen'] {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  // Paragraphs
+
+  p {
+    margin: 0;
+    padding: 5px $padding 5px $padding;
+  }
+
+  p, li, code {
+    font-size: 18px;
+    line-height: 18px * 1.3;
+  }
+
+  code {
+    border-radius: 5px;
+  }
+
+  // Headers
+
+  h1, h2, h3, h4, h5, h6 {
+    padding-left: $padding;
+    font-weight: bold;
+    padding-top: 5px;
+  }
+
+  h1 {
+    font-size: 73px;
+    line-height: 73px * 1.3;
+    margin-top:20px;
+    margin: 0px 0px 0px 0px;
+  }
+
+  h2 {
+    font-size: 56px;
+    line-height: 56px * 1.3;
+    margin: 0px 0px 0px 0px;
+  }
+
+  h3 {
+    font-size: 43px;
+    line-height: 43px * 1.3;
+  }
+
+  h4 {
+    font-size: 33px;
+    line-height: 33px * 1.3;
+  }
+
+  h5 {
+    font-size: 25px;
+    line-height: 25px * 1.3;
+  }
+
+  h6 {
+    font-size: 18px;
+    line-height: 18px * 1.3;
+  }
+
+  // Lists
+
+  ul {
+    $bullet-offset: 10px;
+    padding-left: $padding + $bullet-offset;
+
+    li:before { 
+      content:"-"; 
+      position:relative; 
+      left: -1 * $bullet-offset;
+    }
+  }
+}
diff --git a/app/assets/static/javascripts/vendor/highlight.pack.js b/app/assets/static/javascripts/vendor/highlight.pack.js
diff --git a/app/models/slide.rb b/app/models/slide.rb
@@ -8,7 +8,7 @@ class Slide
 
     property :id,      Serial
     property :number,  Integer
-    property :content, String
+    property :content, Text
 
     def content_as_html
       render(content)
@@ -18,7 +18,8 @@ def render(markdown_text)
       @markdown ||= Redcarpet::Markdown.new(Redcarpet::Render::HTML,
                                             :autolink => true,
                                             :space_after_headers => true,
-                                            :fenced_code_blocks => true,)
+                                            :fenced_code_blocks => true,
+                                            :superscript => true)
       @markdown.render(markdown_text)
     end
   end

diff --git a/app/views/decks/edit.erb b/app/views/decks/edit.erb
@@ -5,8 +5,8 @@
 
 <% if deck.slides.empty? %>
   <div class="notice inline-notification">
-    <p>Make your first slide!</p>
-    <p><a href="/decks/<%= deck.id %>/slides/new" class="button big">Create a slide</a></p>
+    <p class="outside-slide">Make your first slide!</p>
+    <p class="outside-slide"><a href="/decks/<%= deck.id %>/slides/new" class="button big">Create a slide</a></p>
   </div>
 <% else %>
   <%= erb 'slides/list', :locals => {:deck => deck} %>

diff --git a/app/views/decks/index.erb b/app/views/decks/index.erb
@@ -6,8 +6,8 @@
 
 <% if decks.empty? %>
   <div class="notice inline-notification">
-    <p>You haven't created any yet. Go on, you know you want to.</p>
-    <p><a href="/decks/new" class="button big">Create your first deck!</a></p>
+    <p class="outside-slide">You haven't created any yet. Go on, you know you want to.</p>
+    <p class="outside-slide"><a href="/decks/new" class="button big">Create your first deck!</a></p>
   </div>
 <% else %>
   <ul class="deck-list">

diff --git a/app/views/decks/new.erb b/app/views/decks/new.erb
@@ -1,5 +1,5 @@
 <div class="new-deck">
-  <h1>What should the deck be named?</h1>
+  <h1 class="outside-slide">What should the deck be named?</h1>
   <% form_tag '/decks', :method => 'post' do %>
     <%= text_field_tag :name, :autocomplete => 'off' %>
     <%= submit_tag "Create it!", :class => 'button big' %>

diff --git a/app/views/home.erb b/app/views/home.erb
@@ -8,11 +8,11 @@
 </script>
 
 <div class="home">
-  <h1>Make presentation slides in your browser</h1>
+  <h1 class="outside-slide">Make presentation slides in your browser</h1>
 
-  <p>Deck lets you make javascript powered slide decks with markdown without leaving your browser.</p>
+  <p class="outside-slide">Deck lets you make javascript powered slide decks with markdown without leaving your browser.</p>
 
-  <p class="sign-in-button-wrapper"><a href="/auth/google_oauth2" class="button big">Sign in using your Google account</a></p>
+  <p class="sign-in-button-wrapper outside-slide"><a href="/auth/google_oauth2" class="button big">Sign in using your Google account</a></p>
 </div>
 
 <% # Render a template with: template("template_name") %>

diff --git a/app/views/layout.erb b/app/views/layout.erb
@@ -52,7 +52,7 @@
   <script src='/javascripts/vendor/underscore.js'></script>
   <script src='/javascripts/vendor/backbone.js'></script>
   <script src='/javascripts/vendor/moment.js'></script>
-  <script src='/javascripts/vendor/higlight.pack.js'></script>
+  <script src='/javascripts/vendor/highlight.pack.js'></script>
   <link rel="stylesheet" href="http://yandex.st/highlightjs/6.2/styles/monokai.min.css">
 
 </body>

diff --git a/app/views/slides/edit.erb b/app/views/slides/edit.erb
@@ -24,8 +24,8 @@
 
 <% if deck.slides.empty? %>
   <div class="notice inline-notification">
-    <p>Make your first slide!</p>
-    <p><a href="/decks/<%= deck.id %>/slides/new" class="button big">Create a slide</a></p>
+    <p class="outside-slide">Make your first slide!</p>
+    <p class="outside-slide"><a href="/decks/<%= deck.id %>/slides/new" class="button big">Create a slide</a></p>
   </div>
 <% else %>
   <%= erb 'slides/list', :locals => {:deck => deck} %>

diff --git a/app/views/slides/list.erb b/app/views/slides/list.erb
@@ -1,7 +1,7 @@
 <ul class="slide-list">
   <% deck.slides.all.each do |slide| %>
     <a href="/slides/<%= slide.id %>/edit" >
-      <li class="slide-preview">
+      <li class="micro-slide">
         <%= slide.content_as_html %>
 
         <a href="/decks/<%= deck.id %>/slides/<%= slide.id %>/delete" class="delete-button">

diff --git a/app/views/slides/new.erb b/app/views/slides/new.erb
@@ -1,4 +1,4 @@
-<h1 class="short-section-title"><%= deck.name %></h1>
+<h1 class="short-section-title outside-slide"><%= deck.name %></h1>
 
 <div class="new-slide">
   <div class="slide-edit-area">