aboutsummaryrefslogtreecommitdiff
path: root/template.html
diff options
context:
space:
mode:
authorEric Bidelman2012-04-08 17:51:12 -0700
committerEric Bidelman2012-04-08 17:51:12 -0700
commit79c730f664bd8bda196c13282c5650f4ab282b25 (patch)
tree3c6bc4ffcd0891266435f936961f7f2c7af7232f /template.html
parentdb92c5e0c26ba0bb545993bb48533d39f1934b95 (diff)
downloadio-slides-remote-79c730f664bd8bda196c13282c5650f4ab282b25.tar.gz
More styling. Fixes for FF
Diffstat (limited to 'template.html')
-rw-r--r--template.html137
1 files changed, 120 insertions, 17 deletions
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 Insert contact info
161 </p>
162 </slide>
163
164 <slide class="logoslide dark nobackground">
165 <section class="flexbox vcenter">
166 <span><img src="images/google_developers_logo_white.png"></span>
167 </section>
168 </slide>
169
68</slides> 170</slides>
69 171
70<script type="text/slide-config"> 172<script type="text/slide-config">
@@ -75,7 +177,7 @@
75 theme: 'default', 177 theme: 'default',
76 hashtag: '#html5', //TODO 178 hashtag: '#html5', //TODO
77 useBuilds: true, 179 useBuilds: true,
78 usePrettify: true, //TODO 180 usePrettify: true,
79 enableSideAreas: true, //TODO 181 enableSideAreas: true, //TODO
80 analytics: 'UA-25678279-1', 182 analytics: 'UA-25678279-1',
81 favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png', 183 favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png',
@@ -97,6 +199,7 @@
97 }; 199 };
98</script> 200</script>
99 201
202<script src="js/prettify/prettify.js"></script>
100<script src="js/slides.js"></script> 203<script src="js/slides.js"></script>
101 204
102<!-- TODO: Add to slides.js --> 205<!-- TODO: Add to slides.js -->
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 02:32:48 +0000