Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Once Source to Rule Them All

davidyeiser
September 26, 2011

Once Source to Rule Them All

How to use media queries to optimize the same markup for different devices and features.

davidyeiser

September 26, 2011
Tweet

Other Decks in Design

Transcript

  1. OR How to use media queries to optimize the same

    markup for different devices and features.
  2. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  3. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  4. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  5. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  6. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  7. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  8. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>

    <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>
  9. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>

    <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>
  10. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>
  11. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>
  12. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>
  13. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>
  14. CSS

  15. * { margin:0; padding:0; } body { font-family:"Helvetica Neue", Helvetica-Neue,

    Helvetica, Arial, sans-serif; font-size:100%; background-color:#fff; } .layout { display:block; } .panel { display:block; } header { display:block; position:relative; } ul { list-style:none; } sup { font-size:50%; } base.css
  16. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css
  17. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css
  18. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css
  19. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1

    class="app-name title-bar">Rate Calculator</h1> </header> ... </section>
  20. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1

    class="app-name title-bar">Rate Calculator</h1> </header> ... </section>
  21. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css
  22. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css
  23. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css
  24. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css
  25. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } .text-emboss { text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); } mobile.css
  26. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
  27. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
  28. .app-nav-item { display:block; width:90%; padding:8px 5% 10px 5%; font-size:1.5em; font-weight:bold;

    text-decoration:none; color:#fff; border-bottom:1px solid #333; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c1c1c), color-stop (0.5,#1c1c1c), color-stop(0.5,#111), to(#111)); background-color:#111; } mobile.css
  29. .disclaimer-link { display:block; width:100%; padding:10px 0; position:absolute; left:0; bottom:0; font-size:0.75em;

    line-height:1em; text-align:center; text-decoration:none; color:#fff; background-color:rgba(0,0,0,0.2); z-index:15; } mobile.css
  30. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
  31. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css
  32. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css
  33. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css
  34. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css
  35. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css
  36. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  37. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  38. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  39. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  40. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  41. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php
  42. .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute;

    left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; - webkit-appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; } mobile.css
  43. .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute;

    left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit- appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; } mobile.css
  44. <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change"

    href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> index.php
  45. <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change"

    href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> index.php
  46. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em;

    text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }
  47. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em;

    text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }
  48. index.php <script> $(document).ready(function() { $("#main-nav ul li a").click( function() {

    $(".app-nav-item").removeClass("app-nav-item-current"); $(this).addClass("app-nav-item-current"); var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear current"); $("#home-view").addClass("slide-out"); $("section").removeClass("reverse-out panel-close appear"); $(showPanel).addClass("slide-in appear"); return false; } ); $("a.back-link").click( function() { var removePanel = '#'+$(this).parents("section").attr("id"); $(removePanel).removeClass("slide-in appear"); $(removePanel).addClass("reverse-out"); $("#home-view").removeClass("slide-out"); $("#home-view").addClass("reverse-in current"); return false; } ); }); ... </script>
  49. index.php <script> $(document).ready(function() { ... $("#read-terms-conditions").click( function() { var showPanel

    = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear"); $(showPanel).removeClass("panel-close"); $("section").removeClass("reverse-out panel-close"); $(showPanel).addClass("slide-up panel-flip-inner"); return false; } ); $("a.close-link").click( function() { $("#terms-conditions").removeClass("slide-up"); $("#terms-conditions").addClass("panel-close"); $("#home-view").addClass("panel-appear"); return false; } ); }); </script>
  50. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5;

    } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }
  51. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5;

    } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }
  52. .current { z-index:7; } .panel(s) { z-index:1; } .current {

    z-index:7; } .panel { z-index:1; } .slide-in { z-index:10; }
  53. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
  54. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
  55. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
  56. .current { z-index:7; } .panel(s) { z-index:1; } .current {

    z-index:7; } .panel { z-index:1; } .slide-in { z-index:10; }
  57. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
  58. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100% @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100%
  59. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100% @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100%
  60. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >
  61. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >
  62. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >
  63. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }
  64. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }
  65. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }
  66. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }
  67. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); } .title-bar { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; } .focus-value { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; }
  68. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
  69. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
  70. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
  71. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
  72. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
  73. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
  74. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
  75. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
  76. ipad-landscape.css body { font-size:62.5%; } .frame { position:relative; background-color:#333; z-index:7;

    } .panel { background-color:transparent; } .slide-in { -webkit-animation-name:none; } .slide-out { -webkit-animation-name:none; } .reverse-in { -webkit-animation-name:none; } .reverse-out { -webkit-animation-name:none; } .panel { display:none; width:568px; position:absolute; left:0; background-color:#333; z- index:1; } .sub-view { display:none; margin-left:200px; } .appear { display:block; } .disappear { display:none; } .nav-view { display:block; width:200px; margin-left:0; position:absolute; left:0; top:0; } .back-link { display:none; } .disclaimer-link { display:none; }