Full slide images

4 files changed, 185 insertions, 158 deletions

diff --git a/images/sky.jpg b/images/sky.jpg
new file mode 100644
index 0000000..480893c
--- /dev/null
+++ b/images/sky.jpg
diff --git a/template.html b/template.html
index da89780..4ff22b0 100644
--- a/template.html
+++ b/template.html
@@ -167,6 +167,7 @@ function helloWorld(world) {
     </hgroup>
     <article>
       <img src="images/chart.png" alt="Description" title="Description">
+      <footer class="source">source: place source info here</footer>
     </article>
   </slide>
 
@@ -176,6 +177,7 @@ function helloWorld(world) {
     </hgroup>
     <article class="flexbox vcenter" style="height: 80%;">
       <img src="images/barchart.png" alt="Description" title="Description">
+      <footer class="source">source: place source info here</footer>
     </article>
   </slide>
 
@@ -267,29 +269,35 @@ function helloWorld(world) {
     <hgroup>
       <h2>Slide Styles</h2>
     </hgroup>
-    <article class="smaller columns-2">
-      <ul>
-        <li class="red">class="red"</li>
-        <li class="red2">class="red2"</li>
-        <li class="red3">class="red3"</li>
-        <li class="blue">class="blue"</li>
-        <li class="blue2">class="blue2"</li>
-        <li class="blue3">class="blue3"</li>
-        <li class="green">class="green"</li>
-        <li class="green2">class="green2"</li>
-      </ul>
-      <ul>
-        <li class="green3">class="green3"</li>
-        <li class="yellow">class="yellow"</li>
-        <li class="yellow2">class="yellow2"</li>
-        <li class="yellow3">class="yellow3"</li>
-        <li class="gray">class="gray"</li>
-        <li class="gray2">class="gray2"</li>
-        <li class="gray3">class="gray3"</li>
-        <li class="gray4">class="gray4"</li>
-      </ul>
+    <article class="smaller">
+      <div class="columns-2">
+        <ul>
+          <li class="red">class="red"</li>
+          <li class="red2">class="red2"</li>
+          <li class="red3">class="red3"</li>
+          <li class="blue">class="blue"</li>
+          <li class="blue2">class="blue2"</li>
+          <li class="blue3">class="blue3"</li>
+          <li class="green">class="green"</li>
+          <li class="green2">class="green2"</li>
+        </ul>
+        <ul>
+          <li class="green3">class="green3"</li>
+          <li class="yellow">class="yellow"</li>
+          <li class="yellow2">class="yellow2"</li>
+          <li class="yellow3">class="yellow3"</li>
+          <li class="gray">class="gray"</li>
+          <li class="gray2">class="gray2"</li>
+          <li class="gray3">class="gray3"</li>
+          <li class="gray4">class="gray4"</li>
+        </ul>
+      </div>
+      <div>
+        <button>Button</button> <button disabled>Disabled</button>
+      </div>
     </article>
   </slide>
+
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup class="auto-fadein">
@@ -298,6 +306,13 @@ function helloWorld(world) {
     </hgroup>
   </slide>
 
+  <slide class="fill nobackground" style="background-image: url(images/sky.jpg)">
+    <hgroup>
+      <h2 class="white">Full Image (with Optional Header)</h2>
+    </hgroup>
+    <footer class="source white">www.flickr.com/photos/25797459@N06/5438799763/</footer>
+  </slide>
+
   <slide class="segue dark quote nobackground">
     <aside class="gdbar right bottom"><img src="images/google_developers_icon_128.png"></aside>
     <article class="flexbox vleft auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index a6c1826..6024807 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -233,11 +233,11 @@ slides > slide {
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
-  -webkit-transition: all 0.6s ease-out;
-  -moz-transition: all 0.6s ease-out;
-  -ms-transition: all 0.6s ease-out;
-  -o-transition: all 0.6s ease-out;
-  transition: all 0.6s ease-out;
+  -webkit-transition: all 0.6s ease-in-out;
+  -moz-transition: all 0.6s ease-in-out;
+  -ms-transition: all 0.6s ease-in-out;
+  -o-transition: all 0.6s ease-in-out;
+  transition: all 0.6s ease-in-out;
 }
 /* line 116, ../sass/default.scss */
 slides > slide.far-past {
@@ -279,7 +279,7 @@ slides > slide.dark {
   background: #515151;
 }
 /* line 168, ../sass/default.scss */
-slides > slide:not(.fill):not(.nobackground):before {
+slides > slide:not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
   position: absolute;
@@ -295,7 +295,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   line-height: 1.9;
 }
 /* line 180, ../sass/default.scss */
-slides > slide:not(.fill):not(.nobackground):after {
+slides > slide:not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
   position: absolute;
@@ -319,7 +319,7 @@ slides > slide.title-slide:after {
 }
 /* line 203, ../sass/default.scss */
 slides > slide.backdrop {
-  z-index: -1;
+  z-index: -10;
   display: block !important;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6));
   background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
@@ -566,7 +566,7 @@ button {
   background: -o-linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
   background: -ms-linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
   background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
-  border: 1px solid #999;
+  border: 1px solid #a9a9a9;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -580,17 +580,16 @@ button {
   user-select: none;
   cursor: pointer;
   text-shadow: 1px 1px white;
-  font-weight: 700;
   font-size: 10pt;
 }
 
-/* line 422, ../sass/default.scss */
-button:hover {
-  border-color: black;
+/* line 421, ../sass/default.scss */
+button:not(:disabled):hover {
+  border-color: #515151;
 }
 
-/* line 426, ../sass/default.scss */
-button:active {
+/* line 425, ../sass/default.scss */
+button:not(:disabled):active {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));
   background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
   background: -moz-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
@@ -599,87 +598,102 @@ button:active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 430, ../sass/default.scss */
+/* line 429, ../sass/default.scss */
+:disabled {
+  color: #a9a9a9;
+}
+
+/* line 433, ../sass/default.scss */
 .blue {
   color: #4387fd;
 }
 
-/* line 433, ../sass/default.scss */
+/* line 436, ../sass/default.scss */
 .blue2 {
   color: #3c8ef3;
 }
 
-/* line 436, ../sass/default.scss */
+/* line 439, ../sass/default.scss */
 .blue3 {
   color: #2a7cdf;
 }
 
-/* line 439, ../sass/default.scss */
+/* line 442, ../sass/default.scss */
 .yellow {
   color: #ffd14d;
 }
 
-/* line 442, ../sass/default.scss */
+/* line 445, ../sass/default.scss */
 .yellow2 {
   color: #f9cc46;
 }
 
-/* line 445, ../sass/default.scss */
+/* line 448, ../sass/default.scss */