You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by mw...@apache.org on 2012/08/12 23:14:33 UTC
[7/9] git commit: [app] Move .app definition to top of CSS.
[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 <mi...@michaelbrooks.ca>
Authored: Sun Aug 12 13:31:45 2012 -0700
Committer: Michael Brooks <mi...@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 */
- }
-}