v1.1. New features: responsive design.

README

@@ -1,7 +1,7 @@
 =============================
 
 The Personal Page
-Version 1.0
+Version 1.1
 January 19, 2010
 Created by Naz Hamid
 Original: www.nazhamid.com
@@ -36,5 +36,13 @@ Usage is simple:
 
 5) You can switch the position of the monogram and text as seen in timlum.com. 
 
+=============================
+Change Notes:
+=============================
+
+v1.1
+— Added responsive design for mobile devices
+— Mobile devices no longer load the background image to save the bandwidth and performance hit.
+
 
 

index.html

@@ -7,14 +7,24 @@
 	<meta http-equiv="pragma" content="no-cache" />
 	<meta name="robots" content="all" />
 	<meta name="MSSmartTagsPreventParsing" content="true" />
-	<meta http-equiv="imagetoolbar" content="false" />	
+	<meta http-equiv="imagetoolbar" content="false" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<!--[if lt IE 9]>
+	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->	
 	<style>
 		* { padding: 0; margin: 0; }
+		body { background-color: #333; }
 		p { color: #fff; font-family: Helvetica; font-size: 16px; line-height: 24px; margin-bottom: 22px; -webkit-font-smoothing: antialiased; }
 		a { color: #fff; font-weight: bold; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
 		a:hover { color: #990000; border-bottom: 1px solid rgba(255,255,255,1); }
 		#monogram { width: 50px; padding: 50px 0 0 0; margin: 0 auto 0 50px; }
 		#about { width: 360px; padding: 0 0 0 150px; margin: -35px 50px 0 auto !important; }
+		@media (max-width: 767px) {
+			#monogram { position: relative; width: auto; padding: 20px; margin: 0; }
+			#about { position: relative; width: auto; padding: 20px; margin: 0 !important; }
+			background-image { opacity: 0.2; }
+		}
 	</style>
 </head>	
 
@@ -36,7 +46,14 @@
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.backstretch.min.js"></script>
 <script type="text/javascript">
-	$.backstretch("nh_bg.jpg", {speed: 150});
+$(function(){
+     $(window).resize(function(){
+         if($(this).width() >= 767){
+             $.backstretch("nh_bg.jpg", {speed: 150});
+         }
+      })
+      .resize();//trigger resize on page load
+});
 </script>
 
 </body>