[app] Move .app definition to top of 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/dbb0e180 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/tree/dbb0e180 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/diff/dbb0e180 Branch: refs/heads/master Commit: dbb0e180b4b52c534beacfd4e7928bd24d797c28 Parents: cd77020 Author: Michael Brooks <mich...@michaelbrooks.ca> Authored: Sun Aug 12 13:31:45 2012 -0700 Committer: Michael Brooks <mich...@michaelbrooks.ca> Committed: Sun Aug 12 13:31:45 2012 -0700 ---------------------------------------------------------------------- www/css/index.css | 45 +++++++++++++++++++++++---------------------- 1 files changed, 23 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/dbb0e180/www/css/index.css ---------------------------------------------------------------------- diff --git a/www/css/index.css b/www/css/index.css index b0ca0ac..de60f05 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -40,6 +40,29 @@ body { text-transform:uppercase; } +/* portrait layout for the app (default) */ +.app { + background:url(../img/cordova.png) no-repeat; + position: absolute; + left: 50%; /* center container text */ + top: 50%; + margin: -120px 0 0 -110px; /* shifts container to top left by half its width and height */ + background-position:center top; + height:100px; /* adds enough room for text */ + padding:180px 0px 0px 0px; /* background height - shadow offset */ +} + +/* lanscape layout for the app (when wide enough) */ +@media screen and (min-aspect-ratio: 1/1) and (min-width:445px) { + .app { + background-position:left center; + height:140px; /* height + padding = background image size */ + padding-left:170px; /* background width */ + padding-top:60px; /* center the text */ + margin: -90px 0 0 -200px; /* shifts container to top left by half its width and height */ + } +} + h1 { font-size:24px; font-weight:normal; @@ -86,25 +109,3 @@ h1 { animation:fade 3000ms infinite; -webkit-animation:fade 3000ms infinite; } - -.app { - background:url(../img/cordova.png) no-repeat; - position: absolute; - left: 50%; /* center container text */ - top: 50%; - margin: -120px 0 0 -110px; /* shifts container to top left by half its width and height */ - background-position:center top; - height:100px; /* adds enough room for text */ - padding:180px 0px 0px 0px; /* background height - shadow offset */ -} - -/* lanscape (when wide enough) */ -@media screen and (min-aspect-ratio: 1/1) and (min-width:445px) { - .app { - background-position:left center; - height:140px; /* height + padding = background image size */ - padding-left:170px; /* background width */ - padding-top:60px; /* center the text */ - margin: -90px 0 0 -200px; /* shifts container to top left by half its width and height */ - } -}
