[app] Simply the markup and css.
Project: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/commit/98613df6 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/tree/98613df6 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/diff/98613df6 Branch: refs/heads/master Commit: 98613df6bbf59361b297517b8bdc43e41026e124 Parents: c7e0c89 Author: Michael Brooks <mich...@michaelbrooks.ca> Authored: Mon Jul 16 21:32:03 2012 -0700 Committer: Michael Brooks <mich...@michaelbrooks.ca> Committed: Mon Jul 16 21:32:03 2012 -0700 ---------------------------------------------------------------------- www/css/index.css | 56 ++++++++++++++++++++++++++++----------- www/img/cordova-small.png | Bin 0 -> 26318 bytes www/index.html | 1 - 3 files changed, 40 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/98613df6/www/css/index.css ---------------------------------------------------------------------- diff --git a/www/css/index.css b/www/css/index.css index f255a2f..c18533d 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -1,7 +1,7 @@ html, body { height:100%; - font-size:16px; + font-size:12px; width:100%; } @@ -27,19 +27,13 @@ body { } h1 { + background-image:url(../img/cordova-small.png); + background-repeat:no-repeat; font-size:2em; font-weight:300; margin:0px; + overflow:visible; padding:0px; - text-align:center; -} - -img { - display:block; - margin:0px auto; - margin-bottom:-20px; - width:400px; - max-width:100%; } .status { @@ -47,14 +41,12 @@ img { border-radius:4px; -webkit-border-radius:4px; color:#FFFFFF; - display:block; font-size:1em; - margin:5px auto; - margin-top:10px; - padding:2px 4px; + margin:0px auto; + padding:2px 10px; text-align:center; - width:225px; - max-width:225px; + width:100%; + max-width:175px; } .status.complete { @@ -74,3 +66,35 @@ img { .blink { -webkit-animation:fade 3000ms infinite; } + +/* portrait */ +@media screen and (max-aspect-ratio: 1/1) { + h1 { + background-position:center top; + padding:225px 0px 0px 0px; + text-align:center; + } +} + +/* lanscape */ +@media screen and (min-aspect-ratio: 1/1) { + h1, + div { + padding-left:220px; + } + + h1 { + background-position:left center; + margin-bottom:-100px; + margin-top:-100px; + padding-top:100px; + padding-bottom:100px; + text-align:left; + } + + .status { + margin-left:0px; + margin-right:0px; + } +} + http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/98613df6/www/img/cordova-small.png ---------------------------------------------------------------------- diff --git a/www/img/cordova-small.png b/www/img/cordova-small.png new file mode 100644 index 0000000..a7240b5 Binary files /dev/null and b/www/img/cordova-small.png differ http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/98613df6/www/index.html ---------------------------------------------------------------------- diff --git a/www/index.html b/www/index.html index 34b3806..ea56d76 100644 --- a/www/index.html +++ b/www/index.html @@ -8,7 +8,6 @@ <title>Hello Cordova</title> </head> <body> - <img src="img/cordova.png" /> <h1>Apache Cordovaâ¢</h1> <div id="deviceready"> <p class="status pending blink">Connecting to Device</p>
