image compress. reflect/center/more flexbox classes

6 files changed, 188 insertions, 145 deletions

diff --git a/images/chart.png b/images/chart.png
index 09b5451..016ca90 100644
--- a/images/chart.png
+++ b/images/chart.png
diff --git a/images/chrome-logo-tiny.png b/images/chrome-logo-tiny.png
index 6dcf46e..88ef9bd 100644
--- a/images/chrome-logo-tiny.png
+++ b/images/chrome-logo-tiny.png
diff --git a/template.html b/template.html
index 3b81007..070b539 100644
--- a/template.html
+++ b/template.html
@@ -26,9 +26,9 @@ URL: https://code.google.com/p/io-2012-slides
 <slides class="layout-widescreen">
 
   <slide class="logoslide nobackground">
-    <section class="flexbox vcenter">
+    <article class="flexbox vcenter">
       <span><img src="images/google_developers_logo.png"></span>
-    </section>
+    </article>
   </slide>
 
   <slide class="title-slide segue nobackground">
@@ -197,7 +197,7 @@ function helloWorld(world) {
       <h2>Slide with Image</h2>
     </hgroup>
     <article>
-      <img src="images/chart.png" alt="Description" title="Description">
+      <img src="images/chart.png" class="reflect" alt="Description" title="Description">
       <footer class="source">source: place source info here</footer>
     </article>
   </slide>
@@ -206,7 +206,7 @@ function helloWorld(world) {
     <hgroup>
       <h2>Slide with Image (Centered horz/vert)</h2>
     </hgroup>
-    <article class="flexbox vcenter" style="height: 80%;">
+    <article class="flexbox vcenter">
       <img src="images/barchart.png" alt="Description" title="Description">
       <footer class="source">source: place source info here</footer>
     </article>
@@ -323,8 +323,8 @@ function helloWorld(world) {
           <li class="gray4">class="gray4"</li>
         </ul>
       </div>
-      <div>
-        <button>Button</button> <button disabled>Disabled</button>
+      <div class="centered" style="margin-top:2em">
+        I am centered text with a <button>Button</button> and <button disabled>Disabled</button> button.
       </div>
     </article>
   </slide>
diff --git a/theme/css/default.css b/theme/css/default.css
index 722620f..7cfbdb1 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -66,13 +66,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 /**
  * Base SlideDeck Styles
  */
-/* line 42, ../scss/_base.scss */
+/* line 48, ../scss/_base.scss */
 html {
   height: 100%;
   overflow: hidden;
 }
 
-/* line 47, ../scss/_base.scss */
+/* line 53, ../scss/_base.scss */
 body {
   margin: 0;
   padding: 0;
@@ -92,22 +92,22 @@ body {
   -o-transition: opacity 800ms ease-in 100ms;
   transition: opacity 800ms ease-in 100ms;
 }
-/* line 63, ../scss/_base.scss */
+/* line 69, ../scss/_base.scss */
 body.loaded {
   opacity: 1;
 }
 
-/* line 68, ../scss/_base.scss */
+/* line 74, ../scss/_base.scss */
 input, button {
   vertical-align: middle;
 }
 
-/* line 72, ../scss/_base.scss */
+/* line 78, ../scss/_base.scss */
 slides > slide[hidden] {
   display: none !important;
 }
 
-/* line 76, ../scss/_base.scss */
+/* line 82, ../scss/_base.scss */
 slides {
   width: 100%;
   height: 100%;
@@ -125,7 +125,7 @@ slides {
   transform-style: preserve-3d;
 }
 
-/* line 87, ../scss/_base.scss */
+/* line 93, ../scss/_base.scss */
 slides > slide {
   display: block;
   position: absolute;
@@ -346,31 +346,35 @@ slides > slide.backdrop:after, slides > slide.backdrop:before {
 slides > slide > hgroup + article {
   margin-top: 45px;
 }
-/* line 213, ../scss/default.scss */
+/* line 214, ../scss/default.scss */
+slides > slide > hgroup + article.flexbox.vcenter, slides > slide > hgroup + article.flexbox.vleft, slides > slide > hgroup + article.flexbox.vright {
+  height: 80%;
+}
+/* line 219, ../scss/default.scss */
 slides > slide > hgroup + article p {
   margin-bottom: 1em;
 }
-/* line 218, ../scss/default.scss */
+/* line 224, ../scss/default.scss */
 slides > slide > article:only-child {
   height: 100%;
 }
-/* line 221, ../scss/default.scss */
+/* line 227, ../scss/default.scss */
 slides > slide > article:only-child > iframe {
   height: 100%;
 }
 
-/* line 227, ../scss/default.scss */
+/* line 233, ../scss/default.scss */
 slides.layout-faux-widescreen > slide {
   padding: 40px 160px;
 }
 
-/* line 236, ../scss/default.scss */
+/* line 242, ../scss/default.scss */
 slides.layout-widescreen > slide,
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
-/* line 241, ../scss/default.scss */
+/* line 247, ../scss/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -386,26 +390,26 @@ slides.layout-faux-widescreen > slide.far-past {
   -o-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 248, ../scss/default.scss */
+/* line 254, ../scss/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
   opacity: 0;
 }
-/* line 255, ../scss/default.scss */
+/* line 261, ../scss/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
   opacity: 1;
 }
-/* line 262, ../scss/default.scss */
+/* line 268, ../scss/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
   opacity: 0;
   pointer-events: none;
 }
-/* line 270, ../scss/default.scss */
+/* line 276, ../scss/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
@@ -421,39 +425,39 @@ slides.layout-faux-widescreen > slide.far-next {
   -o-transform: translate3d(2260px, 0, 0);
   transform: translate3d(2260px, 0, 0);
 }
-/* line 277, ../scss/default.scss */
+/* line 283, ../scss/default.scss */
 slides.layout-widescreen #prev-slide-area,
 slides.layout-faux-widescreen #prev-slide-area {
   margin-left: -650px;
 }
-/* line 281, ../scss/default.scss */
+/* line 287, ../scss/default.scss */
 slides.layout-widescreen #next-slide-area,