7 files changed, 175 insertions, 123 deletions

diff --git a/images/barchart.png b/images/barchart.png
new file mode 100644
index 0000000..5349b86
--- /dev/null
+++ b/images/barchart.png
diff --git a/images/chart.png b/images/chart.png
new file mode 100644
index 0000000..faef742
--- /dev/null
+++ b/images/chart.png
diff --git a/images/io2012_logo.png b/images/io2012_logo.png
new file mode 100644
index 0000000..e92436d
--- /dev/null
+++ b/images/io2012_logo.png
diff --git a/js/slides.js b/js/slides.js
index e397d96..1a6bb57 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -176,11 +176,11 @@ SlideDeck.prototype.loadConfig_ = function() {
 
   if (settings.title) {
     document.title = settings.title + ' - Google IO 2012';
-    document.querySelector('[data-config-title]').textContent = settings.title;
+    document.querySelector('[data-config-title]').innerHTML = settings.title;
   }
 
   if (settings.subtitle) {
-    document.querySelector('[data-config-subtitle]').textContent = settings.subtitle;
+    document.querySelector('[data-config-subtitle]').innerHTML = settings.subtitle;
   }
 
   if (this.config_.presenters) {
diff --git a/template.html b/template.html
index b0e2dc6..ee762d9 100644
--- a/template.html
+++ b/template.html
@@ -160,6 +160,24 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide>
+    <hgroup>
+      <h2>Slide with Image</h2>
+    </hgroup>
+    <article>
+      <img src="images/chart.png" alt="Description" title="Description">
+    </article>
+  </slide>
+
+  <slide>
+    <hgroup>
+      <h2>Slide with Image (centered horz/vert)</h2>
+    </hgroup>
+    <article class="flexbox vcenter" style="height: 80%;">
+      <img src="images/barchart.png" alt="Description" title="Description">
+    </article>
+  </slide>
+
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup class="auto-fadein">
@@ -206,7 +224,7 @@ function helloWorld(world) {
   var slideConfig = {
     // Slide settings
     settings: {
-      title: 'Title Goes Here',
+      title: 'Title Goes Here<br>Up To Two Lines',
       subtitle: 'Subtitle Goes Here',
       theme: 'default',
       hashtag: '#html5', //TODO
diff --git a/theme/css/default.css b/theme/css/default.css
index 39b7f53..0c9a7d3 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -223,7 +223,7 @@ body {
   background-attachment: fixed;
 }
 
-/* line 51, ../sass/default.scss */
+/* line 50, ../sass/default.scss */
 slides > slide {
   width: 900px;
   height: 700px;
@@ -248,13 +248,13 @@ slides > slide {
   transition: all 0.3s ease-out;
 }
 
-/* line 67, ../sass/default.scss */
+/* line 66, ../sass/default.scss */
 slides.layout-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
 
-/* line 72, ../sass/default.scss */
+/* line 71, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
@@ -273,10 +273,10 @@ slides.nobackground slide:not(.fill)::before {
   color: inherit !important;
 }
 */
-/* line 98, ../sass/default.scss */
+/* line 97, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):before {
   font-size: 12pt;
-  content: "#io2012 @yourtwitter";
+  content: "#io2012";
   position: absolute;
   bottom: 20px;
   left: 60px;
@@ -289,7 +289,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 110, ../sass/default.scss */
+/* line 109, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -299,12 +299,27 @@ slides > slide:not(.fill):not(.nobackground):after {
   line-height: 1.9;
 }
 
+/* line 120, ../sass/default.scss */
+slides > slide.title-slide:after {
+  content: '';
+  background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
+  -moz-background-size: contain;
+  -webkit-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  width: 100%;
+  height: 60px;
+}
+
 /*slides.layout-widescreen > slide:not(.nobackground),
 slides.layout-faux-widescreen > slide:not(.nobackground) {
   background-position-x: 0, 840px;
 }*/
 /* Slides */
-/* line 127, ../sass/default.scss */
+/* line 139, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
@@ -316,7 +331,7 @@ slides > slide {
   background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
   background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
 }
-/* line 138, ../sass/default.scss */
+/* line 150, ../sass/default.scss */
 slides > slide.far-past {
   display: block;
   -moz-transform: translate(-2040px);
@@ -330,7 +345,7 @@ slides > slide.far-past {
   -ms-transform: translate3d(-2040px, 0, 0);
   transform: translate3d(-2040px, 0, 0);
 }
-/* line 144, ../sass/default.scss */
+/* line 156, ../sass/default.scss */
 slides > slide.past {
   display: block;
   -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
@@ -344,7 +359,7 @@ slides > slide.past {
   -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
   transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
 }
-/* line 150, ../sass/default.scss */
+/* line 162, ../sass/default.scss */
 slides > slide.current {
   display: block;
   -moz-transform: translate(0);
@@ -358,15 +373,18 @@ slides > slide.current {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-/* line 155, ../sass/default.scss */
+/* line 167, ../sass/default.scss */
 slides > slide.current .auto-fadein {
   opacity: 1;
 }
-/* line 159, ../sass/default.scss */
+/* line 171, ../sass/default.scss */
 slides > slide.current .gdbar {
+  -moz-background-size: 100% 100%;
+  -webkit-background-size: 100% 100%;
+  -o-background-size: 100% 100%;
   background-size: 100% 100%;
 }
-/* line 164, ../sass/default.scss */
+/* line 176, ../sass/default.scss */
 slides > slide.next {
   display: block;
   -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
@@ -380,7 +398,7 @@ slides > slide.next {
   -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
   transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
 }
-/* line 170, ../sass/default.scss */
+/* line 182, ../sass/default.scss */
 slides > slide.far-next {
   display: block;
   -moz-transform: translate(2040px);
@@ -394,20 +412,20 @@ slides > slide.far-next {
   -ms-transform: translate3d(2040px, 0, 0);