Mobile vs. desktop stylesheets

- Separated common CSS into separate CSS file - s/text-size/font-size/ - Mobile is 270% normal font size, desktop is 62.5%
weierophinney · Oct 18, 2010 · 31b4e26 · 31b4e26
1 parent f868569
commit 31b4e26
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 58 deletions.
diff --git a/mobile-app/.vimproject b/mobile-app/.vimproject
@@ -201,10 +201,11 @@ mobile-app=/home/matthew/git/zf-examples/mobile-app CD=. filter="*.php *.phtml *
   .htaccess
   css=css {
    960.css
-   reset.css
-   text.css
+   common.css
    mobile-demo-desktop.css
    mobile-demo-mobile.css
+   reset.css
+   text.css
   }
  }
  tests=tests {

diff --git a/mobile-app/application/layouts/scripts/layout.phtml b/mobile-app/application/layouts/scripts/layout.phtml
@@ -4,7 +4,8 @@ $this->placeholder('sidebar')
      ->setPostfix('</ul>');
 $this->headTitle('Mobile Device Demo')
      ->setSeparator(' - ');
-$this->headLink()->prependStylesheet('/css/mobile-demo-desktop.css')
+$this->headLink()->prependStylesheet('/css/common.css')
+                 ->prependStylesheet('/css/mobile-demo-desktop.css')
                  ->prependStylesheet('/css/960.css')
                  ->prependStylesheet('/css/text.css')
                  ->prependStylesheet('/css/reset.css');

diff --git a/mobile-app/application/layouts/scripts/mobile.phtml b/mobile-app/application/layouts/scripts/mobile.phtml
@@ -4,7 +4,8 @@ $this->placeholder('sidebar')
      ->setPostfix('</ul>');
 $this->headTitle('Mobile Device Demo')
      ->setSeparator(' - ');
-$this->headLink()->prependStylesheet('/css/mobile-demo-mobile.css')
+$this->headLink()->prependStylesheet('/css/common.css')
+                 ->prependStylesheet('/css/mobile-demo-mobile.css')
                  ->prependStylesheet('/css/960.css')
                  ->prependStylesheet('/css/text.css')
                  ->prependStylesheet('/css/reset.css');

diff --git a/mobile-app/public/css/common.css b/mobile-app/public/css/common.css
@@ -0,0 +1,49 @@
+.application {
+    background-color: #000033;
+}
+
+.header, .content, .sidebar, .footer1, .footer2 {
+    background-color: #FFFFFF;
+    padding: 1em 0;
+}
+
+.spacer {
+    height: 1em;
+}
+
+.header h1 {
+    padding-left: 0.5em;
+    font-size: 3em;
+}
+
+.content {
+    overflow: auto;
+}
+
+.footer1, .footer2 {
+    text-align: center;
+}
+
+.content h2, .content p, .content dl {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+dl dt {
+    font-weight: bold;
+}
+
+dl dt:after {
+    content: ":";
+}
+
+dl dd {
+    margin-left: 2em;
+    background-color: #FFCCFF;
+    border: 1px solid #003333;
+    padding: 0.5em;
+}
+
+.sidebar ul {
+    list-style-type: none;
+}
diff --git a/mobile-app/public/css/mobile-demo-desktop.css b/mobile-app/public/css/mobile-demo-desktop.css
@@ -1,53 +1,3 @@
 body {
-    text-size: 62.5%;
-}
-
-.application {
-    background-color: #000033;
-}
-
-.header, .content, .sidebar, .footer1, .footer2 {
-    background-color: #FFFFFF;
-    padding: 1em 0;
-}
-
-.spacer {
-    height: 1em;
-}
-
-.header h1 {
-    padding-left: 0.5em;
-    text-size: 3em;
-}
-
-.content {
-    overflow: auto;
-}
-
-.footer1, .footer2 {
-    text-align: center;
-}
-
-.content h2, .content p, .content dl {
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-}
-
-dl dt {
-    font-weight: bold;
-}
-
-dl dt:after {
-    content: ":";
-}
-
-dl dd {
-    margin-left: 2em;
-    background-color: #FFCCFF;
-    border: 1px solid #003333;
-    padding: 0.5em;
-}
-
-.sidebar ul {
-    list-style-type: none;
+    font-size: 62.5%;
 }
diff --git a/mobile-app/public/css/mobile-demo-mobile.css b/mobile-app/public/css/mobile-demo-mobile.css
@@ -1,5 +1,3 @@
-@import url("/css/mobile-demo-desktop.css");
-
 body {
-    text-size: 270%;
+    font-size: 270%;
 }