aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-08 17:51:12 -0700
committerEric Bidelman2012-04-08 17:51:12 -0700
commit79c730f664bd8bda196c13282c5650f4ab282b25 (patch)
tree3c6bc4ffcd0891266435f936961f7f2c7af7232f
parentdb92c5e0c26ba0bb545993bb48533d39f1934b95 (diff)
downloadio-slides-remote-79c730f664bd8bda196c13282c5650f4ab282b25.tar.gz
More styling. Fixes for FF
Diffstat
-rw-r--r--images/google_developers_logo_white.pngbin0 -> 10427 bytes
-rw-r--r--js/slides.js26
-rw-r--r--template.html137
-rw-r--r--theme/css/default.css298
-rw-r--r--theme/sass/_base.scss10
-rw-r--r--theme/sass/default.scss126
6 files changed, 446 insertions, 151 deletions
diff --git a/images/google_developers_logo_white.png b/images/google_developers_logo_white.png
new file mode 100644
index 0000000..4fe17f7
--- /dev/null
+++ b/images/google_developers_logo_white.png
Binary files differ
diff --git a/js/slides.js b/js/slides.js
index f6d5cc6..dab51f9 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -65,15 +65,18 @@ SlideDeck.prototype.addEventListeners_ = function() {
65 window.addEventListener('popstate', this.handlePopState_.bind(this), false); 65 window.addEventListener('popstate', this.handlePopState_.bind(this), false);
66 66
67 // Google Developer icon gray bar should reanimate on every slide enter. 67 // Google Developer icon gray bar should reanimate on every slide enter.
68 var titleSlide = document.querySelector('#title-slide'); 68 var gbars = document.querySelectorAll('slide > .gdbar');
69 titleSlide.addEventListener('slideenter', function(e) { 69 for (var i = 0, gbar; gbar = gbars[i]; ++i) {
70 this.buildNextItem_(); 70 var slide = gbar.parentElement;
71 }.bind(this), false); 71 slide.addEventListener('slideenter', function(e) {
72 titleSlide.addEventListener('slideleave', function(e) { 72 this.buildNextItem_();
73 var bar = e.target.querySelector('.gdbar'); 73 }.bind(this), false);
74 bar.classList.remove('build-current'); 74 slide.addEventListener('slideleave', function(e) {
75 bar.classList.add('to-build'); 75 var bar = e.target.querySelector('.gdbar');
76 }, false); 76 bar.classList.remove('build-current');
77 bar.classList.add('to-build');
78 }, false);
79 }
77}; 80};
78 81
79/** 82/**
@@ -175,8 +178,7 @@ SlideDeck.prototype.loadConfig_ = function() {
175 } 178 }
176 179
177 if (!!!('usePrettify' in settings) || settings.usePrettify) { 180 if (!!!('usePrettify' in settings) || settings.usePrettify) {
178 console.log('Use prettify'); 181 prettyPrint();
179 //TODO
180 } 182 }
181 183
182 if (settings.analyticsId) { 184 if (settings.analyticsId) {
@@ -489,7 +491,7 @@ SlideDeck.prototype.addFavIcon_ = function(favIcon) {
489 * @param {string} theme 491 * @param {string} theme
490 */ 492 */
491SlideDeck.prototype.loadTheme_ = function(theme) { 493SlideDeck.prototype.loadTheme_ = function(theme) {
492 var styles = [theme]; 494 var styles = [/*'../../js/prettify/prettify',*/ theme];
493 for (var i = 0, style; themeUrl = styles[i]; i++) { 495 for (var i = 0, style; themeUrl = styles[i]; i++) {
494 var style = document.createElement('link'); 496 var style = document.createElement('link');
495 style.rel = 'stylesheet'; 497 style.rel = 'stylesheet';
diff --git a/template.html b/template.html
index a55f3fe..3ac5bf0 100644
--- a/template.html
+++ b/template.html
@@ -7,14 +7,15 @@
7</head> 7</head>
8<body style="opacity: 0;"> 8<body style="opacity: 0;">
9 9
10<slides> 10<slides class="layout-widescreen">
11 <slide class="logoslide"> 11
12 <section class="flexcenter"> 12 <slide class="logoslide nobackground">
13 <img src="images/google_developers_logo.png"> 13 <section class="flexbox vcenter">
14 <span><img src="images/google_developers_logo.png"></span>
14 </section> 15 </section>
15 </slide> 16 </slide>
16 17
17 <slide id="title-slide"> 18 <slide id="title-slide" class="nobackground">
18 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> 19 <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
19 <hgroup> 20 <hgroup>
20 <h1>Title Goes Here</h1> 21 <h1>Title Goes Here</h1>
@@ -27,44 +28,145 @@
27 </slide> 28 </slide>
28 29
29 <slide> 30 <slide>
30 <h2>Presentation Bullet Slide Layout</h2> 31 <h2>Slide with Bullets</h2>
31 <article> 32 <article>
32 <ul> 33 <ul>
33 <li>Bullet 1</li> 34 <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li>
34 <li>Bullet 2 35 <li>Title capitalization is title case
35 <ul> 36 <ul>
36 <li>Bullet 3</li> 37 <li>Subtitle capitalization is title case</li>
37 </ul> 38 </ul>
38 </li> 39 </li>
39 <li>Bullet 4</li> 40 <li>Subtitle capitalization is title case</li>
41 <li>Titles and subtitles should never have a period at the end</li>
40 </ul> 42 </ul>
41 </article> 43 </article>
42 </slide> 44 </slide>
43 45
44 <slide> 46 <slide>
45 <hgroup> 47 <hgroup>
46 <h2>Presentation Bullet Slide Layout</h2> 48 <h2>Slide with Bullets that Build</h2>
47 <h3>Subtitle Placeholder</h3> 49 <h3>Subtitle Placeholder</h3>
48 </hgroup> 50 </hgroup>
49 <article> 51 <article>
50 A Slide2 52 <p>A list where items build:</p>
53 <ul class="build">
54 <li>Blah</li>
55 <li>Blah</li>
56 <li>Blah</li>
57 </ul>
58 <p>Another list, but items fade as they build:</p>
59 <ul class="build fade">
60 <li>Hover over me!</li>
61 <li>Hover over me!</li>
62 <li>Hover over me!</li>
63 </ul>
64 </article>
65 </slide>
66
67 <slide>
68 <h2>Slide with Smaller Font</h2>
69 <article class="smaller">
70 <ul>
71 <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li>
72 <li>Title capitalization is title case
73 <ul>
74 <li>Subtitle capitalization is title case</li>
75 </ul>
76 </li>
77 <li>Subtitle capitalization is title case</li>
78 <li>Titles and subtitles should never have a period at the end</li>
79 </ul>
51 </article> 80 </article>
52 </slide> 81 </slide>
53 82
54 <slide hidden> 83 <slide hidden>
55 A hidden slide 84 Hidden slides are left out of the presentation.
85 </slide>
86
87 <slide>
88 <hgroup>
89 <h2>Code Slide (with Subtitle Placeholder)</h2>
90 <h3>Subtitle Placeholder</h3>
91 </hgroup>
92 <article>
93 <pre class="prettyprint" data-lang="javascript">
94&lt;script type='text/javascript'&gt;
95 // Say hello world until the user starts questioning
96 // the meaningfulness of their existence.
97 function helloWorld(world) {
98 for (var i = 42; --i &gt;= 0;) {
99 alert('Hello ' + String(world));
100 }
101 }
102&lt;/script&gt;
103</pre>
104 </article>
105 </slide>
106
107 <slide>
108 <hgroup>
109 <h2>Code Slide (Smaller Font)</h2>
110 </hgroup>
111 <article class="smaller">
112 <pre class="prettyprint" data-lang="javascript">
113// Say hello world until the user starts questioning
114// the meaningfulness of their existence.
115function helloWorld(world) {
116 for (var i = 42; --i &gt;= 0;) {
117 alert('Hello ' + String(world));
118 }
119}
120</pre>
121<pre class="prettyprint" data-lang="css">
122&lt;style&gt;
123 p { color: pink }
124 b { color: blue }
125&lt;/style&gt;
126</pre>
127<pre class="prettyprint" data-lang="html">
128&lt;!DOCTYPE html>
129&lt;html>
130&lt;head>
131 &lt;title>My Awesome Page&lt;/title>
132&lt;/head>
133&lt;body>
134 &lt;p&gt;Hello world&lt;/p&gt;
135&lt;body>
136&lt;/html>
137</pre>
138 </article>
56 </slide> 139 </slide>
57 140
58 <!-- Slide with speaker notes. Press 'n' to display.-->
59 <slide> 141 <slide>
60 <aside class="note"> 142 <aside class="note">
61 <section>Speaker notes can go here!</section> 143 <section>Speaker notes can go here!</section>
62 </aside> 144 </aside>
63 <h2>Presentation Bullet Slide Layout</h2> 145 <h2>Slide with Speaker Notes</h2>
64 <article> 146 <article>
65 A Slide2 147 Press 'n'
66 </article> 148 </article>
67 </slide> 149 </slide>
150
151 <slide class="thank-you-slide nobackground">
152 <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
153 <section class="flexbox vleft">
154 <h1>&lt;Thanks You!&gt;</h1>
155 <p>Important contact information goes here.</p>
156 </section>
157 <p>
158 Insert contact info<br>
159 Insert contact info<br>
160</