beginning media query styles for mobile. header needs work

crissmancd · Jan 6, 2011 · cb84eec · cb84eec
1 parent 869ec2b
commit cb84eec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -7,6 +7,7 @@
   <%= javascript_include_tag 'modernizr-1.6.min' %>
   <%= csrf_meta_tag %>
   <%= analytics_tag %>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
 </head>
 <body>
 

diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
@@ -106,7 +106,7 @@ header[role="banner"] h2 {
   font-size: .75em;
 }
 
-.fork-me:hover {
+.fork-me:hover, .fork-me:active {
   opacity: 1;
 }
 
@@ -165,7 +165,7 @@ header[role="banner"] h2 {
   border-bottom: 1px solid transparent;
 }
 
-.profile a:hover {
+.profile a:hover, .profile a:active {
   color: #eccd00;
 }
 
@@ -209,6 +209,41 @@ footer[role="contentinfo"] a {
   font-weight: bold;
 }
 
-footer[role="contentinfo"] a:hover {
+footer[role="contentinfo"] a:hover, footer[role="contentinfo"] a:active {
   color: #000;
-}
+}
+
+@media all and (max-device-width: 480px) {
+  html {
+    background: transparent;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    width: 100%;
+    margin: 0;
+  }
+
+  header[role="banner"] {
+
+  }
+
+  .box {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .profile section {
+    padding-top: 20px;
+    margin-top: 20px;
+  }
+}
+
+@media all and (max-device-width: 480px) and (orientation: portrait) {
+  .portrait img {
+    margin-bottom: 10px;
+    margin-top: 0;
+  }
+}
+