Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

hrmmm

  • Loading branch information...
commit b9196408d968895ee5c75b6ebbce4e0feeeee453 1 parent 787a87a
Steve Klabnik authored February 01, 2012
243  css/impress-demo.css
@@ -170,240 +170,11 @@ a:hover {
170 170
     transform:         translateY(0px);
171 171
 }
172 172
 
173  
-/* impress.js title */
174  
-
175  
-#title {
176  
-    padding: 0;
177  
-}
178  
-
179  
-#title .try {
180  
-    font-size: 64px;
181  
-    position: absolute;
182  
-    top: -0.5em;
183  
-    left: 1.5em;
184  
-    
185  
-    -webkit-transform: translateZ(20px);
186  
-    -moz-transform:    translateZ(20px);
187  
-    -ms-transform:     translateZ(20px);
188  
-    -o-transform:      translateZ(20px);
189  
-    transform:         translateZ(20px);
190  
-}
191  
-
192  
-#title h1 {
193  
-    font-size: 190px;
194  
-    
195  
-    -webkit-transform: translateZ(50px);
196  
-    -moz-transform:    translateZ(50px);
197  
-    -ms-transform:     translateZ(50px);
198  
-    -o-transform:      translateZ(50px);
199  
-    transform:         translateZ(50px);
200  
-}
201  
-
202  
-#title .footnote {
203  
-    font-size: 32px;
204  
-}
205  
-
206  
-/* big thoughts */
207  
-
208  
-#big {
209  
-    width: 600px;
210  
-    text-align: center;
211  
-    font-size: 60px;
212  
-    line-height: 1;
213  
-}
214  
-
215  
-#big b {
216  
-    display: block;
217  
-    font-size: 250px;
218  
-    line-height: 250px;
219  
-}
220  
-
221  
-#big .thoughts {
222  
-    font-size: 90px;
223  
-    line-height: 150px;
224  
-}
225  
-
226  
-/* tiny ideas */
227  
-
228  
-#tiny {
229  
-    width: 500px;
230  
-    text-align: center;
231  
-}
232  
-
233  
-#ing {
234  
-    width: 500px;
235  
-}
236  
-
237  
-#ing b {
238  
-    display: inline-block;
239  
-    -webkit-transition: 0.5s;
240  
-    -moz-transition:    0.5s;
241  
-    -ms-transition:     0.5s;
242  
-    -o-transition:      0.5s;
243  
-    transition:         0.5s;
244  
-}
245  
-
246  
-#ing.active .positioning {
247  
-    -webkit-transform: translateY(-10px);
248  
-    -moz-transform:    translateY(-10px);
249  
-    -ms-transform:     translateY(-10px);
250  
-    -o-transform:      translateY(-10px);
251  
-    transform:         translateY(-10px);
252  
-
253  
-    -webkit-transition-delay: 1.5s;
254  
-    -moz-transition-delay:    1.5s;
255  
-    -ms-transition-delay:     1.5s;
256  
-    -o-transition-delay:      1.5s;
257  
-    transition-delay:         1.5s;
258  
-}
259  
-
260  
-#ing.active .rotating {
261  
-    -webkit-transform: rotate(-10deg);
262  
-    -moz-transform:    rotate(-10deg);
263  
-    -ms-transform:     rotate(-10deg);
264  
-    -o-transform:      rotate(-10deg);
265  
-    transform:         rotate(-10deg);
266  
-
267  
-    -webkit-transition-delay: 1.75s;
268  
-    -moz-transition-delay:    1.75s;
269  
-    -ms-transition-delay:     1.75s;
270  
-    -o-transition-delay:      1.75s;
271  
-    transition-delay:         1.75s;
272  
-}
273  
-
274  
-#ing.active .scaling {
275  
-    -webkit-transform: scale(0.7);
276  
-    -moz-transform:    scale(0.7);
277  
-    -ms-transform:     scale(0.7);
278  
-    -o-transform:      scale(0.7);
279  
-    transform:         scale(0.7);
280  
-
281  
-    -webkit-transition-delay: 2s;
282  
-    -moz-transition-delay:    2s;
283  
-    -ms-transition-delay:     2s;
284  
-    -o-transition-delay:      2s;
285  
-    transition-delay:         2s;
286  
-
287  
-}
288  
-
289  
-/* imagination */
290  
-
291  
-#imagination {
292  
-    width: 600px;
293  
-}
294  
-
295  
-#imagination .imagination {
296  
-    font-size: 78px;
297  
-}
298  
-
299  
-/* use the source, Luke */
300  
-
301  
-#source {
302  
-    width: 700px;
303  
-    padding-bottom: 300px;
304  
-    
305  
-    /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
306  
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
307  
-    background-position: bottom right;
308  
-    background-repeat: no-repeat;
309  
-}
310  
-
311  
-#source q {
312  
-    font-size: 60px;
313  
-}
314  
-
315  
-/* it's in 3D */
316  
-
317  
-#its-in-3d span,
318  
-#its-in-3d b {
319  
-    display: inline-block;
320  
-    -webkit-transform: translateZ(40px);
321  
-    -moz-transform:    translateZ(40px);
322  
-    -ms-transform:     translateZ(40px);
323  
-    -o-transform:      translateZ(40px);
324  
-     transform:        translateZ(40px);
325  
-            
326  
-    -webkit-transition: 0.5s;
327  
-    -moz-transition:    0.5s;
328  
-    -ms-transition:     0.5s;
329  
-    -o-transition:      0.5s;
330  
-    transition:         0.5s;
331  
-}
332  
-
333  
-#its-in-3d .have {
334  
-    -webkit-transform: translateZ(-40px);
335  
-    -moz-transform:    translateZ(-40px);
336  
-    -ms-transform:     translateZ(-40px);
337  
-    -o-transform:      translateZ(-40px);
338  
-    transform:         translateZ(-40px);
339  
-}
340  
-
341  
-#its-in-3d .you {
342  
-    -webkit-transform: translateZ(20px);
343  
-    -moz-transform:    translateZ(20px);
344  
-    -ms-transform:     translateZ(20px);
345  
-    -o-transform:      translateZ(20px);
346  
-    transform:         translateZ(20px);
347  
-}
348  
-
349  
-#its-in-3d .noticed {
350  
-    -webkit-transform: translateZ(-40px);
351  
-    -moz-transform:    translateZ(-40px);
352  
-    -ms-transform:     translateZ(-40px);
353  
-    -o-transform:      translateZ(-40px);
354  
-    transform:         translateZ(-40px);
355  
-}
356  
-
357  
-#its-in-3d .its {
358  
-    -webkit-transform: translateZ(60px);
359  
-    -moz-transform:    translateZ(60px);
360  
-    -ms-transform:     translateZ(60px);
361  
-    -o-transform:      translateZ(60px);
362  
-    transform:         translateZ(60px);
363  
-}
364  
-
365  
-#its-in-3d .in {
366  
-    -webkit-transform: translateZ(-10px);
367  
-    -moz-transform:    translateZ(-10px);
368  
-    -ms-transform:     translateZ(-10px);
369  
-    -o-transform:      translateZ(-10px);
370  
-    transform:         translateZ(-10px);
371  
-}
372  
-
373  
-#its-in-3d .footnote {
374  
-    font-size: 32px;
375  
-
376  
-    -webkit-transform: translateZ(-10px);
377  
-    -moz-transform:    translateZ(-10px);
378  
-    -ms-transform:     translateZ(-10px);
379  
-    -o-transform:      translateZ(-10px);
380  
-    transform:         translateZ(-10px);
381  
-}
382  
-
383  
-#its-in-3d.active span,
384  
-#its-in-3d.active b {
385  
-    -webkit-transform: translateZ(0px);
386  
-    -moz-transform:    translateZ(0px);
387  
-    -ms-transform:     translateZ(0px);
388  
-    -o-transform:      translateZ(0px);
389  
-    transform:         translateZ(0px);
390  
-    
391  
-    -webkit-transition-delay: 1s;
392  
-    -moz-transition-delay:    1s;
393  
-    -ms-transition-delay:     1s;
394  
-    -o-transition-delay:      1s;
395  
-    transition-delay:         1s;
396  
-}
397  
-
398  
-/* overview step */
399  
-
400 173
 #overview {
401 174
     z-index: -1;
402 175
     padding: 0;
403 176
 }
404 177
 
405  
-/* on overview step everything is visible */
406  
-
407 178
 #impress.step-overview .step {
408 179
     opacity: 1;
409 180
     cursor: pointer;
@@ -443,19 +214,19 @@ a:hover {
443 214
     letter-spacing: -1px;
444 215
 }
445 216
 
446  
-.slide q {
  217
+.slide h1 {
447 218
     display: block;
448  
-    font-size: 50px;
449  
-    line-height: 72px;
  219
+    font-size: 150px;
  220
+    line-height:100%;
450 221
 
451  
-    margin-top: 100px;
  222
+    margin-top: 0px;
452 223
 }
453 224
 
454  
-.slide q strong {
455  
-    white-space: nowrap;
  225
+.slide p {
  226
+  font-size:75px;
  227
+  line-height:100%;
456 228
 }
457 229
 
458  
-
459 230
 /* IMPRESS NOT SUPPORTED STYLES */
460 231
 
461 232
 .fallback-message {
9  index.html
@@ -19,11 +19,16 @@
19 19
     </div>
20 20
 
21 21
     <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
22  
-        <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
  22
+      <h1>
  23
+        Designing<br/>
  24
+        Hypermedia<br/>
  25
+        APIs
  26
+      </h1>
  27
+      <p>By <a href="#">@steveklabnik</a></p>
23 28
     </div>
24 29
 
25 30
     <div class="step slide" data-x="0" data-y="-1500">
26  
-        <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
  31
+      <p>blah blah <strong>lolol</strong></p>
27 32
     </div>
28 33
 
29 34
     <div class="step slide" data-x="1000" data-y="-1500">

0 notes on commit b919640

Please sign in to comment.
Something went wrong with that request. Please try again.