Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Starting.

  • Loading branch information...
commit f9df530a1cfc74ad13ce3233b6debad282435e6a 1 parent 0460aa8
@mikewest authored
Showing with 1,198 additions and 0 deletions.
  1. BIN  presentations/droidcon12-whats-new-in-android-the-web/128x128.png
  2. BIN  presentations/droidcon12-whats-new-in-android-the-web/400x275.png
  3. +27 −0 presentations/droidcon12-whats-new-in-android-the-web/appcache.manifest
  4. 0  presentations/droidcon12-whats-new-in-android-the-web/favicon.ico
  5. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/DroidSansMono.ttf
  6. +95 −0 presentations/droidcon12-whats-new-in-android-the-web/fonts/OFL.txt
  7. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSans.ttf
  8. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansBold.ttf
  9. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansBoldItalic.ttf
  10. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansItalic.ttf
  11. BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/Quattrocento-Regular.ttf
  12. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-flash.png
  13. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-loader.png
  14. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-publishers.png
  15. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-video.png
  16. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-icon128.png
  17. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-icon16.png
  18. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-promo440.jpg
  19. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-psycho-background.jpg
  20. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-psycho-logo.jpg
  21. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-spring-background.png
  22. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-spring-logo.png
  23. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-wgt-background.jpg
  24. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-wgt-logo.png
  25. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/chromeusers.png
  26. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/code.jpg
  27. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/direct-purchase.jpg
  28. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-angrybirds.jpg
  29. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-intro.png
  30. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-signup.png
  31. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-1.png
  32. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-2.png
  33. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-3.png
  34. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-4.png
  35. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-api.png
  36. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-1.png
  37. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-2.png
  38. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-3.png
  39. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/ntp.png
  40. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/scrooge_mcduck.jpg
  41. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/webstore.jpg
  42. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/workflow-appmator.png
  43. BIN  presentations/droidcon12-whats-new-in-android-the-web/images/workflow-zip.jpg
  44. +303 −0 presentations/droidcon12-whats-new-in-android-the-web/index.html
  45. +16 −0 presentations/droidcon12-whats-new-in-android-the-web/manifest.json
  46. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/bottom_bar.png
  47. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/bavarian_chrome.png
  48. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/bugdroid.png
  49. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chrome.png
  50. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chrome_frame.png
  51. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chromewebstore.png
  52. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/plus_one.png
  53. BIN  presentations/droidcon12-whats-new-in-android-the-web/static/qr_me.png
  54. +292 −0 presentations/droidcon12-whats-new-in-android-the-web/static/slide_controller.js
  55. +465 −0 presentations/droidcon12-whats-new-in-android-the-web/static/slides.css
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/128x128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/400x275.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
27 presentations/droidcon12-whats-new-in-android-the-web/appcache.manifest
@@ -0,0 +1,27 @@
+CACHE MANIFEST
+# 2011-04-15
+
+CACHE:
+appcache.manifest
+favicon.ico
+fonts/DroidSansMono.ttf
+fonts/OFL.txt
+fonts/Quattrocento-Regular.ttf
+images/bottom_bar.png
+images/chrome_logo.png
+images/chromewebstore_logo.png
+images/chromium_architecture.png
+images/HTML5_3D_Effects_512.png
+images/HTML5_Connectivity_512.png
+images/HTML5_Device_Access_512.png
+images/html5_logo.png
+images/HTML5_Multimedia_512.png
+images/HTML5_Offline_Storage_512.png
+images/HTML5_Performance_512.png
+images/HTML5_Semantics_512.png
+images/HTML5_Styling_512.png
+images/spinning_beachball_of_death.gif
+index.html
+static/slide_controller.js
+static/slides.css
+
View
0  presentations/droidcon12-whats-new-in-android-the-web/favicon.ico
No changes.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/DroidSansMono.ttf
Binary file not shown
View
95 presentations/droidcon12-whats-new-in-android-the-web/fonts/OFL.txt
@@ -0,0 +1,95 @@
+Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com),
+Copyright (c) 2011, Igino Marini. (www.ikern.com|mail@iginomarini.com),
+with Reserved Font Name "Quattrocento Roman".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSans.ttf
Binary file not shown
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansBold.ttf
Binary file not shown
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansBoldItalic.ttf
Binary file not shown
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/OpenSansItalic.ttf
Binary file not shown
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/fonts/Quattrocento-Regular.ttf
Binary file not shown
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-flash.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-loader.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-publishers.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/afg-video.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-icon128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-icon16.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/assets-promo440.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-psycho-background.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-psycho-logo.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-spring-background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-spring-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-wgt-background.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/casestudy-wgt-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/chromeusers.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/code.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/direct-purchase.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-angrybirds.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-intro.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-signup.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-4.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inapp-workflow-api.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-1.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-2.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/inline-install-3.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/ntp.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/scrooge_mcduck.jpg
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/webstore.jpg
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/workflow-appmator.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/images/workflow-zip.jpg
Diff not rendered
View
303 presentations/droidcon12-whats-new-in-android-the-web/index.html
@@ -0,0 +1,303 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <title>What's new in Android? The Web.</title>
+ <link rel="stylesheet" href="./static/slides.css">
+ </head>
+ <body>
+ <!-- <a id="deck" href="https://mkw.st/+">mkw.st/p/leweb11-growing-your-business</a> -->
+ <article id="slides">
+ <header>
+ <h1>
+ What's new in Android?
+ </h1>
+ <address><a href="http://mkw.st/+">+Mike West (<em>mkw.st/+</em>)</a>, <a href="mailto:mkwst@google.com">mkwst@google.com</a></address>
+ </header>
+
+ <figure>
+ <img src="./static/logo/bugdroid.png" class="flat" alt="I work for Chrome in Munich." width="500">
+ </figure>
+
+ <figure>
+ <img src="./static/logo/bavarian_chrome.png" class="flat" alt="I work for Chrome in Munich." width="600">
+ </figure>
+
+ <section>
+ <ul class="blocklist">
+ <li>Step 1: Build a <em>brilliant</em> app.</li>
+ <li>
+ Step 2: ????
+ <img src="./static/logo/chromewebstore.png"
+ width="300"
+ class="flat build"
+ style="margin-left:-140px;"></li>
+ <li>Step 3: Profit!</li>
+ </ul>
+ </section>
+
+ <figure>
+ <img src="./static/logo/chromewebstore.png" class="flat" alt="Chrome Web Store">
+ </figure>
+
+ <figure class="dark overlay">
+ <img src="./images/webstore.jpg" width="1000" height="700">
+ <h2>Distribution</h2>
+ </figure>
+ <section>
+ <h1 style="margin-bottom: -100px;">Chrome Users ↗</h1>
+ <img src="./images/chromeusers.png" width="1000" height="650" class="flat">
+ </section>
+ <section>
+ <img src="./images/ntp.png" class="flat">
+ <style>
+ section > em, figure > em {
+ border-radius: 18px;
+ border: 5px solid red;
+ height: 100px;
+ left: 142px;
+ overflow: hidden;
+ position: absolute;
+ text-indent: -100em;
+ top: 205px;
+ width: 111px;
+ }
+ section > em.built, figure > em.built {
+ -webkit-animation: pulse 1.5s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ }
+ @-webkit-keyframes pulse {
+ 0% { -webkit-transform: scale(1, 1); opacity: 1; }
+ 50% { -webkit-transform: scale(1.2, 1.2); border-color: rgba(255,0,0,0.2); border-radius: 30px; }
+ 100% { -webkit-transform: scale(1, 1); opacity: 1; }
+ }
+ </style>
+ <em class="outline build">Chrome Web Store, on the new tab page</em>
+ </section>
+ <section>
+ <img src="./static/logo/chromewebstore.png" class="flat">
+ <ul class="overlay">
+ <li>One-time $5 registration</li>
+ <li>Multiple monetization models</li>
+ <li>No pre-approval process</li>
+ </ul>
+ </section>
+ <section class="overlay">
+ <img src="./images/casestudy-psycho-background.jpg" width="1000" height="700">
+ <div class="overlay build" style="width:680px; top:99px;left: 160px; padding: 1em;">
+ <img src="./images/casestudy-psycho-logo.jpg" width="500" style="background: #FFF;padding: 10px 90px;">
+ <p><em>33%</em> of users come from CWS, driving a <em>700%</em> increase in total traffic</p>
+ <p class="casestudy"><a href="http://goo.gl/cksw5">goo.gl/cksw5</a></p>
+ </div>
+ </section>
+ <section class="overlay">
+ <img src="./images/casestudy-spring-background.png" class="1000" height="700">
+ <div class="overlay build" style="width: 75%; left: 12.5%; top: 45%; padding: 1em;">
+ <img src="./images/casestudy-spring-logo.png" width="730" style="background: #FFF;padding: 10px;">
+ <p><em>100%</em> more engagement</p>
+ <p class="casestudy"><a href="http://goo.gl/NKpE0">goo.gl/NKpE0</a></p>
+ </div>
+ </section>
+ <section class="overlay">
+ <img src="./images/casestudy-wgt-background.jpg" width="1000" height="700">
+ <div class="overlay build" style="width: 75%; left: 12.5%; top: 18%; padding: 1em;">
+ <img src="./images/casestudy-wgt-logo.png" width="750">
+ <p>Chrome users play <em>23%</em> more, spending <em>147%</em> more</p>
+ <p class="casestudy"><a href="http://goo.gl/yKImD">goo.gl/yKImD</a></p>
+ </div>
+ </section>
+
+ <section class="overlay">
+ <img src="./images/webstore.jpg" width="1000" height="700">
+ <style>
+ section > em.size {
+ background: rgba(255, 255, 255, 0.8);
+ color: #111;
+ position: absolute;
+ text-indent: 0;
+ font: 3em 'Open Sans';
+ -webkit-animation: none;
+ border-radius: 0;
+ vertical-align: middle;
+ text-align: center;
+ font-weight: 700;
+ }
+ section > em span {
+ position: absolute;
+ left: -999em;
+ }
+ section > em.small {
+ left: 803px;
+ top: 453px;
+ width: 183px;
+ height: 116px;
+ line-height: 116px;
+ }
+ section > em.large {
+ left: 203px;
+ top: 286px;
+ width: 383px;
+ height: 283px;
+ line-height: 283px;
+ }
+ section > em.marquee {
+ left: 302px;
+ top: 35px;
+ width: 584px;
+ height: 234px;
+ line-height: 234px;
+ }
+ </style>
+ <em class="size small build"><span>Small promo images are </span>440x280</em>
+ <em class="size large build"><span>Large promo images are </span>920x680</em>
+ <em class="size marquee build"><span>Marquee promo images are </span>1400x560</em>
+ </section>
+ <section class="overlay">
+ <style>
+ section > em.screenshot {
+ left: 66px;
+ top: 183px;
+ width: 613px;
+ height: 383px;
+ line-height: 383px;
+ }
+ </style>
+ <img src="./images/direct-purchase.jpg">
+ <em class="size screenshot build"><span>Screenshot images are </span>1280x800</em>
+ </section>
+
+
+ <style>
+ pre.overlay {
+ background: rgba(220,220,220,0.9);
+ left: 2.5%;
+ top:2%;
+ width: 95%;
+ }
+ pre.overlay code {
+ font-size: 2.2em;
+ }
+ </style>
+ <section class="overlay code">
+ <img src="./images/code.jpg" width="1000">
+ <pre class="overlay build"><code>// manifest.json:
+
+{
+ "app": {
+ "launch": {
+ "urls": ["https://mkw.st/p/leweb11-growing-your-business/"],
+ "web_url": "https://mkw.st/p/leweb11-growing-your-business/",
+ "container": "tab"
+ }
+ },
+ "permissions": [
+ // Optional stuff: desktop notifications, geolocation,
+ // unlimitedStorage, etc.
+ ],
+ "icons": {
+ "16": "16.png", "128": "128.png" <img src="./images/assets-icon16.png" class="flat"> <img src="./images/assets-icon128.png" class="flat" width="64">
+ },
+ "name": "Growing Your Business: Distribution and Monetization",
+ "description": "Discover great apps, games, extensions and...",
+ "version": "0.1"
+}</code></pre>
+ </section>
+
+ <section>
+ <img src="./images/workflow-zip.jpg" class="flat" alt="Zip the manifest and icons, and off you go.">
+ </section>
+
+ <section>
+ <img src="./images/workflow-appmator.png" alt="If zipping things is too much work, Appmator!">
+ </section>
+
+ <section class="dark overlay">
+ <img src="./images/inline-install-1.png" style="position:absolute;" class="flat" alt="Install the app without redirecting users to the store.">
+ <img src="./images/inline-install-2.png" style="position:absolute;" class="flat build" alt="The inline-install mechanism is straightforward.">
+ <img src="./images/inline-install-3.png" style="position:absolute;" class="flat build" alt="And leaves the user right where she started.">
+ <h2 class="build"><a href="http://code.google.com/chrome/webstore/docs/inline_installation.html" style="color:#FFF;">goo.gl/qUH4M</a></h2>
+ </section>
+
+<!-- Profit! -->
+ <figure class="dark overlay">
+ <img src="./images/scrooge_mcduck.jpg" width="1000" height="700">
+ <h2>Profit!</h2>
+ </figure>
+
+ <figure class="dark overlay">
+ <img src="./images/direct-purchase.jpg" class="flat">
+ <h2>Direct Purchase</h2>
+ <em class="outline build" style="top: 25px; left: 724px; width: 212px; height: 80px;">One-time payment, subscriptions, etc. are available in X countries.</em>
+ </figure>
+
+ <figure class="dark overlay">
+ <img src="./images/afg-video.png" class="flat inline">
+ <img src="./images/afg-loader.png" class="flat inline" width="400" style="margin-left: 1em;">
+ <h2>AdSense for Games</h2>
+ </figure>
+ <section class="dark overlay">
+ <img src="./images/afg-publishers.png" class="flat">
+ <h2 class="build"><a href="http://goo.gl/sNo4n" style="color:#FFF;">goo.gl/sNo4n</a></h2>
+ </section>
+
+ <h2>
+ <img src="./images/inapp-intro.png" alt="In-app Payments: It's all in the app.">
+ </h2>
+ <section class="dark overlay">
+ <img src="./images/inapp-workflow-api.png" class="flat" width="1000">
+ <h2 class="build"><a href="http://goo.gl/18ida" style="color: #FFF;">goo.gl/18ida</a></h2>
+ </section>
+ <section>
+ <img src="./images/inapp-workflow-1.png">
+ </section>
+ <section>
+ <img src="./images/inapp-workflow-2.png">
+ </section>
+ <section>
+ <img src="./images/inapp-workflow-3.png">
+ </section>
+ <section>
+ <img src="./images/inapp-workflow-4.png">
+ </section>
+ <section>
+ <h1 style="font-size:1em;">5%</h1>
+ </section>
+ <section>
+ <img src="./images/inapp-angrybirds.jpg" class="flat">
+ </section>
+
+ <section>
+ <img src="./static/logo/chromewebstore.png" class="flat">
+ <ul class="overlay build" style="color: #111; font-weight: 700; top: 17%; left: 14%;width:72%;">
+ <li>Getting Started with the Web Store: <a href="http://code.google.com/chrome/webstore/docs/get_started_simple.html">goo.gl/bok5J</a></li>
+ <li>In-app Payment API: <a href="http://goo.gl/18ida">goo.gl/18ida</a></li>
+ <li>Inline Install: <a href="http://goo.gl/qUH4M">goo.gl/qUH4M</a></li>
+ <li>IAP Tutorial: <a href="http://code.google.com/apis/inapppayments/docs/tutorial.html">goo.gl/RFKeE</a></li>
+ <li>AdSense for Games: <a href="http://goo.gl/sNo4n">goo.gl/sNo4n</a></li>
+ <li><a href="http://html5rocks.com/">html5rocks.com</a></li>
+ </ul>
+ </section>
+
+ <section>
+ <h1 style="font-size:40em;line-height:1;">?</h1>
+ <p style="color: #666; font-weight: 700;">+Mike West (mkw.st/+) mkwst@google.com</p>
+ </section>
+
+ </article>
+ <script src="./static/slide_controller.js"></script>
+ <script>
+ var sc = new SlideController('slides');
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-6166875-6']);
+ _gaq.push(['_setDomainName', 'mkw.st']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </body>
+</html>
View
16 presentations/droidcon12-whats-new-in-android-the-web/manifest.json
@@ -0,0 +1,16 @@
+{
+ "name": "Hackathon - 2011-08-27",
+ "description": "HTML5 Slidedeck for the GTUG Hackathon - 2011-08-27",
+
+ "version": "1.0.0",
+
+ "app": {
+ "launch": {
+ "local_path": "index.html"
+ }
+ },
+ "icons": {
+ "16": "128x128.png",
+ "128": "128x128.png"
+ }
+}
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/bottom_bar.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/bavarian_chrome.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/bugdroid.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chrome.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chrome_frame.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/chromewebstore.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/logo/plus_one.png
Diff not rendered
View
BIN  presentations/droidcon12-whats-new-in-android-the-web/static/qr_me.png
Diff not rendered
View
292 presentations/droidcon12-whats-new-in-android-the-web/static/slide_controller.js
@@ -0,0 +1,292 @@
+/**
+ * @fileoverview This file implementes the SlideController object, which
+ * wraps a DOM element with logic that makes an otherwise flat page appear
+ * to be a cleverly designed presentation.
+ */
+
+/**
+ * Given an element on the page, handles user input to scroll through a set
+ * of slides, adjusting the browser history correctly, and doing clever
+ * things with simple transitions along the way.
+ *
+ * @param {string} id The ID of the DOM element at the root of the slides.
+ * @constructor
+ */
+function SlideController(id) {
+ this.id_ = id;
+ this.title_ = document.title,
+ this.root_ = document.getElementById(id);
+ this.slides_ = document.querySelectorAll('#' + id + ' > section, ' +
+ '#' + id + ' > header, ' +
+ '#' + id + ' > aside, ' +
+ '#' + id + ' > h2, ' +
+ '#' + id + ' > figure, ' +
+ '#' + id + ' > footer');
+ this.HASH_REGEX = RegExp(this.HASH_PREFIX + '([0-9]+)' );
+ this.init_();
+}
+
+/**
+ * The keyCodes that we're interested in, mapped to meaningful names.
+ *
+ * @enum {number}
+ */
+SlideController.KeyCodes = {
+ SPACE: 32, // Next slide.
+ PAGE_UP: 33, // Previous slide.
+ PAGE_DOWN: 34, // Next slide.
+ LEFT_ARROW: 37, // Previous slide.
+ RIGHT_ARROW: 39, // Next slide.
+ UPPERCASE_B: 66 // This is the only other button on my remote: It ought
+ // to blank the screen.
+};
+
+SlideController.prototype = {
+ /**
+ * The prefix added to the hash value at the end of the URL as the
+ * user navigates through the presentation.
+ *
+ * @type {!string}
+ */
+ HASH_PREFIX: '#slide-',
+
+ /**
+ * Are all the slides hidden (perhaps in response to a user pressing
+ * "hide all" on his remote?)
+ *
+ * @type {!boolean}
+ * @private
+ */
+ allHidden_: false,
+
+ /**
+ * The index of the currently visible slide.
+ *
+ * @type {number}
+ * @private
+ */
+ current_: 0,
+
+ /**
+ * The ID of a currently-running timer.
+ *
+ * @type {number}
+ * @private
+ */
+ timer_: 0,
+
+ /**
+ * @return {!number} The number of slides that can be scrolled through.
+ */
+ get length() {
+ return this.slides_.length;
+ },
+
+ /**
+ * @return {!string} The page title appropriate for the current slide.
+ */
+ get title() {
+ return this.title_ + " -- Slide #" + this.current;
+ },
+
+ /**
+ * @return {!number} The current slide's index.
+ */
+ get current() {
+ return this.current_;
+ },
+
+ /**
+ * We push one or two things out-of-band in order to keep the slide
+ * transitions smooth. This setter encapsulates the timer logic, ensuring
+ * that only one timer is running, and that previous timers are cancelled.
+ *
+ * @param {!number} num The ID of the timer that's been generated.
+ */
+ set timer(num) {
+ if (this.timer_)
+ clearTimeout(this.timer_);
+
+ this.timer_ = num;
+ },
+
+ /**
+ * This setter has side effects, and in fact drives most of the page's
+ * logic. When an index is set, that slide's `aria-hidden` attribute is
+ * set to `false`, and the previously current slide's attribute to `true`.
+ * Additionally, the URL is updated, as well as the page's title, and *
+ * `focus` is placed upon the newly visible slide.
+ *
+ * @param {!number} num The index of the current slide.
+ */
+ set current(num) {
+ // Hide the currently displayed slide, and remove the currently previous
+ // slide's class.
+ if (this.current !== null && this.current !== num)
+ this.slides_[this.current].setAttribute('aria-hidden', 'true');
+ if (this.current !== null && this.current - 1 >= 0)
+ this.slides_[this.current - 1].classList.remove('previous');
+
+ if (num >= 0 && num < this.length) {
+ this.current_ = num;
+ document.title = this.title;
+ // Push the URL update out a few seconds to avoid
+ this.timer = setTimeout(function () {
+ history.pushState(
+ this.current,
+ 'Slide ' + this.current, '#slide-' + this.current);
+ }.bind(this), 2000);
+ }
+
+ // Show the current slide
+ this.slides_[this.current].setAttribute('aria-hidden', 'false');
+ this.slides_[this.current].classList.remove('next');
+
+ // Set the previous and next slides
+ if (this.current + 1 < this.length)
+ this.slides_[this.current + 1].classList.add('next');
+ if (this.current - 1 >= 0)
+ this.slides_[this.current - 1].classList.add('previous');
+
+ // Move focus to the current slide
+ this.slides_[this.current].focus();
+ },
+
+ /**
+ * @return {!boolean} Are all the slides hidden?
+ */
+ get allHidden() {
+ return this.allHidden_;
+ },
+
+ /**
+ * @param {!boolean} val Should all slides be hidden?
+ */
+ set allHidden(val) {
+ this.allHidden_ = val;
+ this.slides_[this.current].
+ setAttribute('aria-hidden', val ? 'true' : 'false');
+ },
+
+ /**
+ * Advances to the next slide, if there is a next slide.
+ *
+ * @return {!boolean} True if there was a next slide, false if we're
+ * already at the end.
+ */
+ next: function() {
+ if (this.current < this.length) {
+ if (!this.buildNextItem_())
+ this.current++;
+ return true;
+ }
+ return false;
+ },
+
+ /**
+ * Retreats to the previous slide, if there is a previous slide.
+ *
+ * @return {!boolean} True if there was a previous slide, false if we're
+ * already at the beginning.
+ */
+ prev: function() {
+ if (this.current > 0) {
+ this.current--;
+ return true;
+ }
+ return false;
+ },
+
+ /**
+ * Kicks things off by hiding all slides, then determines which slide
+ * should be shown by either reading it from the hash value, or
+ * defaulting to the first element. After displaying the correct item,
+ * event handlers are bound for keyboard/back-button navigation.
+ *
+ * @private
+ */
+ init_: function () {
+ for (i=0; i < this.slides_.length; i++)
+ this.slides_[i].setAttribute('aria-hidden', 'true');
+
+ var match = this.HASH_REGEX.exec(window.location.hash);
+ if (match && !isNaN(parseInt(match[1], 10)))
+ this.current = parseInt(match[1], 10);
+ else
+ this.current = 0;
+
+ this.markBuilds_();
+ this.bindHandlers_();
+ },
+
+ /**
+ * Adds `to-build` class to all items on the page with a `build` class, so
+ * that it can be removed for dramatic effect.
+ *
+ * @private
+ */
+ markBuilds_: function () {
+ var b = document.querySelectorAll('.build');
+ for (var i = 0; i < b.length; i++) {
+ b[i].classList.remove('build');
+ b[i].classList.add('to-build');
+ }
+ },
+
+ /**
+ * If the current slide contains an item waiting to be built, build it and
+ * return the item built. Otherwise return null.
+ *
+ * @return {Element}
+ * @private
+ */
+ buildNextItem_: function () {
+ var b = this.slides_[this.current].querySelector('.to-build');
+ if (b) {
+ b.classList.remove('to-build');
+ b.classList.add('built');
+ return b;
+ }
+ return null;
+ },
+
+ /**
+ * Binds event handlers for keyboard/back-button navigation: left-arrow
+ * and page-up both take me to the previous slide. Right-arrow, page-down,
+ * and space all take me to the next slide. Uppercase B hides all slides,
+ * focusing everyone's attention on whatever it is that you'd like to say.
+ *
+ * @private
+ */
+ bindHandlers_: function () {
+ document.addEventListener(
+ 'keydown',
+ (function (e) {
+ switch (e.keyCode) {
+ case SlideController.KeyCodes.PAGE_UP:
+ case SlideController.KeyCodes.LEFT_ARROW:
+ this.prev();
+ break;
+
+ case SlideController.KeyCodes.PAGE_DOWN:
+ case SlideController.KeyCodes.RIGHT_ARROW:
+ case SlideController.KeyCodes.SPACE:
+ this.next();
+ break;
+
+ case SlideController.KeyCodes.UPPERCASE_B:
+ this.allHidden = !this.allHidden;
+ break;
+ }
+ }).bind(this),
+ false);
+ window.addEventListener(
+ 'popstate',
+ (function (e) {
+ if (e.state !== null)
+ this.current = e.state;
+ }).bind(this),
+ false);
+ }
+};
+
View
465 presentations/droidcon12-whats-new-in-android-the-web/static/slides.css
@@ -0,0 +1,465 @@
+@font-face {
+ font-family: 'Quattrocento';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Quattrocento Roman Regular'), local('QuattrocentoRoman'), url('../fonts/Quattrocento-Regular.ttf') format('woff');
+}
+
+@font-face {
+ font-family: 'DroidSansMono';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Droid Sans Mono'), local('DroidSansMono'), url('../fonts/DroidSansMono.ttf') format('woff');
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans.ttf') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: local('Open Sans Italic'), local('OpenSansItalic'), url('../fonts/OpenSansItalic.ttf') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Open Sans Bold'), local('OpenSansBold'), url('../fonts/OpenSansBold.ttf') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 700;
+ src: local('Open Sans Bold Italic'), local('OpenSansBoldItalic'), url('../fonts/OpenSansBoldItalic.ttf') format('woff');
+}
+
+html {
+ background: -moz-linear-gradient( top, #444, #000 );
+ background: -webkit-linear-gradient( top, #444, #000 );
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+ -webkit-box-pack: center;
+ -webkit-box-align: center;
+
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+ -moz-box-pack: center;
+ -moz-box-align: center;
+
+ display: box;
+ box-orient: horizontal;
+ box-pack: center;
+ box-align: center;
+}
+
+a, a:visited {
+ color: #22C;
+ text-decoration: none;
+}
+
+#moderator {
+ top: 0.5em;
+ color: #CCC;
+ font: bold 1.2em Helvetica,'Droid Sans',Arial,'Sans Serif';
+ left: 0.5em;
+ position: absolute;
+}
+
+#deck {
+ top: 0.5em;
+ color: #CCC;
+ font: bold 1.2em Helvetica,'Droid Sans',Arial,'Sans Serif';
+ right: 0.5em;
+ position: absolute;
+}
+
+article {
+ font-size: 10px;
+ height: 768px;
+ overflow: hidden;
+ position: relative;
+ width: 1024px;
+}
+
+article > p, article > ul {
+ display: none;
+}
+
+article > header,
+article > section,
+article > h2,
+article > aside,
+article > figure,
+article > footer {
+ background-size: contain;
+ background: #FFF url(../static/bottom_bar.png) bottom left no-repeat;
+ border-radius: 10px;
+ height: 700px;
+ left: 12px;
+ margin: 0;
+ opacity: 0;
+ padding: 0;
+ position: absolute;
+ top: 34px;
+ width: 1000px;
+
+ display: none;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: center;
+ -webkit-box-pack: center;
+
+ display: none;
+ -moz-box-orient: vertical;
+ -moz-box-align: center;
+ -moz-box-pack: center;
+
+ display: none;
+ box-orient: vertical;
+ box-align: center;
+ box-pack: center;
+
+ -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
+ -moz-transition: opacity 1s ease, -moz-transform 1s ease;
+ -webkit-transform: translate(0,0) translateZ(0);
+}
+
+article > [aria-hidden='false'] {
+ opacity: 1;
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+}
+article > .previous, article > .next {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+}
+
+article > .previous {
+ -webkit-transform: translate(-1200px,1200px) rotate(-65deg) scale(0.5);
+}
+article > .next {
+ -webkit-transform: translate(1200px,1200px) rotate(65deg) scale(0.5);
+}
+
+article > h2,
+article > aside {
+ font: 8em 'Open Sans'; /* 'Quattrocento'; */
+ font-weight: 400;
+ background-color: rgba(255, 255, 255, 0.25);
+ color: #FFF;
+ text-align: center;
+}
+ article > h2 a,
+ article > h2 a:visited {
+ color: #FFF;
+ }
+
+section h1,
+section h2,
+section p,
+header h1,
+header h2,
+footer h1,
+footer h2,
+footer p {
+ font-family: 'Open Sans'; /* Quattrocento'; */
+ font-size: 4.75rem;
+ font-weight: 700;
+ text-align: center;
+ margin: 0;
+}
+
+header h2 {
+ font-size: 3.95rem;
+ color: #666;
+}
+
+header address,
+header address a,
+header address a:visited {
+ font: 2rem 'Open Sans';
+ color: #666;
+ font-style: normal;
+ font-weight: 700;
+ margin-top: 2rem;
+}
+
+.amp {
+ font-family: 'hoefler text';
+ font-style: italic;
+}
+
+h1 {
+ color: #007DD6
+}
+
+img {
+ vertical-align: middle;
+}
+
+section h2 {
+ margin-top: 0.25em;
+ font-size: 4em;
+}
+
+/* Image Slides */
+figure {
+ -webkit-box-align: center;
+ -webkit-box-orient: horizontal;
+
+ -moz-box-align: center;
+ -moz-box-orient: horizontal;
+
+ box-align: center;
+ box-orient: horizontal;
+}
+
+figure a {
+ text-decoration: none;
+}
+
+aside a:after,
+figure a:after {
+ background: #CCC;
+ border-radius: 10px;
+ border: 1px solid #666;
+ bottom: -1em;
+ color: #000;
+ content: attr(href);
+ font: 2rem 'DroidSansMono';
+ padding: 0.25em 0.5em;
+ position: absolute;
+ right: 1em;
+}
+
+img {
+ border-radius: 10px;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+img.flat {
+ border-radius: 0;
+ box-shadow: none;
+}
+ article > h2 img.flat,
+ article > aside img.flat {
+ border-radius: 10px 10px 0 0;
+ }
+
+.overlay h2 {
+ background: rgba(255, 255, 255, 0.75);
+ bottom: 1em;
+ font-family: 'Open Sans';
+ font-size: 8em;
+ font-weight: 700;
+ left: 0;
+ margin: 0;
+ padding: 0 40px;
+ position: absolute;
+ width: 920px;
+}
+
+.dark.overlay h2 {
+ background: rgba(0,0,0,0.75);
+ color: #EEE;
+}
+
+.overlay .inline {
+ display: inline-block;
+}
+
+section .overlay {
+ position: absolute;
+ top: 29%;
+ left: 18%;
+ width: 65%;
+ padding: 1em 0 1em 3em;
+ margin: 0 auto;
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
+ background: rgba(255,255,255,0.9);
+}
+section .overlay li {
+ text-align: left;
+ font-size: 4em;
+ list-style: disc outside;
+}
+section .overlay li li {
+ font-size: 1em;
+}
+
+/* Code Slides */
+section > pre {
+ background: #CCC;
+ border: 1px solid #999;
+ border-width: 1px 0;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ width: 100%;
+ padding: 1em;
+ box-sizing: border-box;
+}
+section > pre code {
+ font: 3em 'DroidSansMono', monospace;
+}
+
+section p,
+section li,
+section blockquote,
+footer p,
+footer li,
+footer blockquote {
+ font-family: 'Open Sans'; /* 'Quattrocento'; */
+ font-size: 5em;
+ font-weight: 400;
+ margin: 0.25em 1em;
+ text-align: center;
+}
+
+section p img {
+ border-radius: 0;
+ margin-top: 1em;
+}
+
+section p em {
+ font-style: normal;
+ font-weight: 700;
+ color: #007DD6;
+}
+
+p.casestudy {
+ font-size: 2em;
+}
+
+section ul,
+section li,
+footer ul,
+footer li {
+ list-style: none inside;
+ padding: 0;
+}
+
+section code {
+ font: 1em 'DroidSansMono', monospace;
+ font-weight: 400;
+ color: #333;
+}
+
+section blockquote {
+ background: #CCC;
+ position: relative;
+ border-radius: 100px;
+ padding: 1em;
+}
+
+section blockquote q {
+ font-size: 1.2em;
+}
+section blockquote:before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ bottom: -30px;
+ right: 50%;
+ height: 30px;
+ border-right: 60px solid #CCC;
+ background: #CCC;
+ -webkit-border-bottom-right-radius: 80px 50px;
+ -moz-border-radius-bottomright: 80px 50px;
+ border-bottom-right-radius: 80px 50px;
+ -webkit-transform: translate(0, -2px);
+ -moz-transform: translate(0, -2px);
+ transform: translate(0, -2px);
+}
+
+section blockquote:after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ bottom: -30px;
+ right: 50%;
+ width: 60px;
+ height: 30px;
+ background: white;
+ -webkit-border-bottom-right-radius: 40px 50px;
+ -moz-border-radius-bottomright: 40px 50px;
+ border-bottom-right-radius: 40px 50px;
+ -webkit-transform: translate(-30px, -2px);
+ -moz-transform: translate(-30px, -2px);
+ -ms-transform: translate(-30px, -2px);
+ -o-transform: translate(-30px, -2px);
+ transform: translate(-30px, -2px);
+}
+
+section blockquote + * {
+ margin-top: 1em;
+}
+
+.blocklist {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklist li {
+ text-align: left;
+ font-size: 4rem;
+ line-height: 150px;
+}
+
+.build {
+ opacity: 0;
+}
+.to-build {
+ opacity: 0;
+ -webkit-transition: opacity 0.25s ease-in-out 0.2s;
+ transition: opacity 0.5s ease-in-out 0.2s;
+}
+.built {
+ opacity: 1;
+ -webkit-transition: opacity 0.25s ease-in-out 0.2s;
+ transition: opacity 0.5s ease-in-out 0.2s;
+}
+
+@media print {
+ html {
+ background: #000;
+ }
+ body {
+ display: block;
+ }
+ [aria-hidden='true'] {
+ opacity: 1;
+ }
+ article {
+ height: auto;
+ width: auto;
+ }
+ article > header, article > section, article > h2, article > aside, article > footer {
+ position: relative;
+ margin-bottom: 5em;
+ page-break-after: always;
+ }
+ article > h2, article > aside {
+ background-color: #444;
+ }
+}
+
+/* Presentation-specific */
+section.code {
+ background: url(../images/code.jpg) top left no-repeat;
+}

0 comments on commit f9df530

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