Permalink
Browse files

Update from incubator-cordova-app-hello-world

  • Loading branch information...
1 parent 7c7e9ab commit ae4f229082bba0bf24228352d9008c768f03af36 @mwbrooks mwbrooks committed Aug 27, 2012
Showing with 18 additions and 16 deletions.
  1. +18 −16 www/css/index.css
View
@@ -37,35 +37,37 @@ body {
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
+ margin:0px;
+ padding:0px;
text-transform:uppercase;
}
-/* portrait layout for the app (default) */
+/* Portrait layout (default) */
.app {
- background:url(../img/logo.png) no-repeat;
- position:absolute;
+ background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
+ position:absolute; /* position in the center of the screen */
left:50%;
top:50%;
- margin:-120px 0 0 -110px; /* shift container to top-left by half its width and height */
- background-position:center top;
- height:100px; /* add enough room for text */
- padding:180px 0px 0px 0px; /* background-image height - image's shadow */
+ height:50px; /* text area height */
+ width:225px; /* text area width */
text-align:center;
+ padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
+ margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
+ /* offset horizontal: half of text area width */
}
-/* lanscape layout for the app (when wide enough) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:445px) {
+/* Landscape layout (with min-width) */
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
- height:140px; /* height + padding = background image size */
- padding-left:170px; /* background width */
- padding-top:60px; /* vertically center the text to background image */
- margin:-90px 0 0 -200px; /* shift container to top left by half its width and height */
+ padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
+ margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
+ /* offset horizontal: half of image width and text area width */
}
}
h1 {
- font-size:36px; /* @override increase font-size for "PhoneGap" text */
+ font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
@@ -79,8 +81,8 @@ h1 {
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
- margin:0px 20px;
- padding:2px 20px;
+ margin:0px 30px;
+ padding:2px 0px;
}
.status.complete {

0 comments on commit ae4f229

Please sign in to comment.