mobile styles fixes; fixed FF CC issue

lojjic · Jan 18, 2012 · c270e12 · c270e12
1 parent b2dc016
commit c270e12
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 9 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1233,7 +1233,7 @@ pre.code {
 		}
 
 	.result-masks {
-		background: url(../images/compass.png);
+		background: url(../images/compass.png) no-repeat center center;
 		-webkit-mask-image: -webkit-linear-gradient(black 0%, black 9%, transparent 10%, transparent 19%, black 20%, black 29%, transparent 30%, transparent 39%, black 40%, black 49%, transparent 50%, transparent 59%, black 60%, black 69%, transparent 70%, transparent 79%, black 80%, black 89%, transparent 90%, transparent 99%, black 100%);
 		width: 128px;
 		height: 128px;
@@ -1859,14 +1859,92 @@ footer {
 
 }
 
+@media (max-width: 480px) and (orientation: landscape) {
+
+	h1 {
+		font-size: 41px;
+	}
+
+	.viewnav {
+		width: 380px;
+		height: 40px;
+	}
+
+	.viewnav li {
+		width: 180px;
+		height: 40px;
+		font-size: 18px;
+	}
+
+	.viewnav li a {
+		height: 40px;
+	}
+
+}
+
 @media (max-width: 480px) {
 
 	html, body {
 		overflow-x: hidden;
 	}
+
+	.globalwidth {
+		padding-left: 14px;
+	}
+
+	h1 {
+		font-size: 32px;
+	}
 
 	.viewnav {
-		width: 380px;
+		width: 330px;
+		height: 40px;
+	}
+
+	.viewnav li {
+		width: 140px;
+		height: 31px;
+		font-size: 15px;
+	}
+
+	.viewnav li a {
+		height: 31px;
+	}
+
+	.demo-left div, .demo-left p {
+		width: auto;
+	}
+
+	.demo-right h2 {
+		white-space: normal;
+	}
+
+	.result-textshadow {
+		line-height: normal;
+	}
+
+	.demo-left .result-animations {
+		width: 50px;
+		height: 50px;
+	}
+
+	.demo-left .result-calc {
+		width: -moz-calc(70% - 50px);
+		width: calc(70% - 50px);
+	}
+
+	.demo-left .result-3dtransform {
+		width: 300px;
+		height: 120px;
+	}
+
+	.demo-left .object {
+		width: 90%;
+		height: 90%;
+	}
+
+	.demo-left .result button {
+		width: 140px;
 	}
 
 }
diff --git a/includes/features/calc/result.php b/includes/features/calc/result.php
@@ -1 +1 @@
-<p class="result-calc">The width of this element is 80% minus 50px, using the <code>calc()</code> function.</p>
+<p class="result-calc">The width of this element is 70% minus 50px, using the <code>calc()</code> function.</p>
diff --git a/index.php b/index.php
@@ -27,7 +27,7 @@
 
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
-	<link rel="stylesheet" href="css/styles.css?v=1.5.6">
+	<link rel="stylesheet" href="css/styles.css?v=1.5.9.2">
 
 	<script src="js/modernizr-2.0.6.min.js"></script>
 
@@ -83,11 +83,10 @@
 	<div class="globalwidth ed">
 	<h2>Example Code</h2>
 
-	<!--[if lte IE 9 ]><pre id="code" class="code"><![endif]-->
-	<!--[if gt IE 9 | !(IE)]><!--><textarea id="code" class="code" readonly><!--<![endif]-->
-	<?php include "includes/features/" . $proptitlestr . "/code.php"; ?>
-	<!--[if gt IE 9 | !(IE)]><!--></textarea><!--<![endif]-->
-	<!--[if lte IE 9 ]></pre><![endif]-->
+	<!--[if gt IE 9 | !(IE)]><!--><textarea id="code" class="code" readonly><?php include "includes/features/" . $proptitlestr . "/code.php"; ?>
+	</textarea><!--<![endif]-->
+
+	<!--[if lte IE 9 ]><pre id="code" class="code"><?php include "includes/features/" . $proptitlestr . "/code.php"; ?></pre><![endif]-->
 	</div><!-- .ed -->
 
 	<div class="globalwidth">