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/01 18:39:08 UTC
[21/48] git commit: [app] Refactor CSS to be more robust.
[app] Refactor CSS to be more robust.
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/491cd99c
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/tree/491cd99c
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/diff/491cd99c
Branch: refs/heads/master
Commit: 491cd99cb15a716b07bb4af3b15c71f159d5bb75
Parents: 98613df
Author: Michael Brooks <mi...@michaelbrooks.ca>
Authored: Mon Jul 16 21:54:00 2012 -0700
Committer: Michael Brooks <mi...@michaelbrooks.ca>
Committed: Mon Jul 16 21:54:00 2012 -0700
----------------------------------------------------------------------
www/css/index.css | 32 +++++++++++++-------------------
www/index.html | 10 ++++++----
2 files changed, 19 insertions(+), 23 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/491cd99c/www/css/index.css
----------------------------------------------------------------------
diff --git a/www/css/index.css b/www/css/index.css
index c18533d..7a441b3 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -26,14 +26,21 @@ body {
vertical-align:middle;
}
-h1 {
+.app {
background-image:url(../img/cordova-small.png);
background-repeat:no-repeat;
+ margin:0px auto;
+ padding-left:210px;
+ width:275px;
+}
+
+h1 {
font-size:2em;
font-weight:300;
margin:0px;
overflow:visible;
padding:0px;
+ text-align:center;
}
.status {
@@ -69,32 +76,19 @@ h1 {
/* portrait */
@media screen and (max-aspect-ratio: 1/1) {
- h1 {
+ .app {
background-position:center top;
+ height:100px; /* adds enough room for text */
padding:225px 0px 0px 0px;
- text-align:center;
}
}
/* lanscape */
@media screen and (min-aspect-ratio: 1/1) {
- h1,
- div {
- padding-left:220px;
- }
-
- h1 {
+ .app {
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;
+ height:165px; /* height + padding = background image size */
+ padding-top:80px;
}
}
http://git-wip-us.apache.org/repos/asf/incubator-cordova-app-hello-world/blob/491cd99c/www/index.html
----------------------------------------------------------------------
diff --git a/www/index.html b/www/index.html
index ea56d76..05d6472 100644
--- a/www/index.html
+++ b/www/index.html
@@ -8,10 +8,12 @@
<title>Hello Cordova</title>
</head>
<body>
- <h1>Apache Cordova™</h1>
- <div id="deviceready">
- <p class="status pending blink">Connecting to Device</p>
- <p class="status complete blink hide">Device is Ready</p>
+ <div class="app">
+ <h1>Apache Cordova™</h1>
+ <div id="deviceready">
+ <p class="status pending blink">Connecting to Device</p>
+ <p class="status complete blink hide">Device is Ready</p>
+ </div>
</div>
<script type="text/javascript" src="js/index.js"></script>