- Final adjustments to media queries and site flow

- Updated to jQuery 1.6

css/master.css

@@ -242,7 +242,7 @@ because you still might want to alter things in here.
  */
 #grid div.horiz {
   /* 28px line height */
-  height: 23px;
+  height: 27px;
   border-bottom: 1px dotted darkgray;
   margin: 0;
   padding: 0; }
@@ -320,7 +320,7 @@ hr {
   padding: 0;
   height: 1px;
   background-color: #e2e2e2;
-  margin: 48px auto 47px;
+  margin: 56px auto 55px;
   /* Make up for the border */ }
 
 pre, code {
@@ -355,19 +355,21 @@ del {
 *	Be sure to name them with an underscore in the beginning so SASS doesn't compile them
 *	separately.
 */
+/* Modular Scale ---------------------- 
+
+	$fontsize @ 1:1.618	  
+	http://modularscale.com/scale/?px1=13&px2=&ra1=1.618&ra2=0
+
+----------------------*/
 /*	=MAIN
 	------------------------------------------------------ */
 html {
   background-color: #fff; }
 
 /* Please use the body element as main site wrapper. Nothing wrong with that. */
 body {
-  width: 80%;
-  /* If you want your design to span over the full screen, remove this row */
-  max-width: 98em;
-  /* Sets the max-width of the wrapper. Currently $fontsize*98 = 1274px */
-  font: normal 13px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 0 auto; }
+  font: normal 14px/28px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0 5%; }
 
 /*	=LINKS
 	------------------------------------------------------ */
@@ -377,15 +379,12 @@ a {
 /*	=HEADINGS
 	------------------------------------------------------ */
 h1 {
-  font-size: 4em;
-  margin-bottom: 24px;
-  line-height: 48px; }
+  font-size: 36.651px;
+  margin-bottom: 28px;
+  line-height: 56px; }
 
 h2 {
-  font-size: 2.4em; }
-
-h3 {
-  font-size: 2em; }
+  font-size: 22.652px; }
 
 /*	=MISC
 	------------------------------------------------------ */
@@ -417,7 +416,7 @@ label {
   cursor: pointer; }
 
 textarea {
-  line-height: 24px;
+  line-height: 28px;
   resize: vertical;
   -moz-resize: vertical; }
 
@@ -427,9 +426,9 @@ textarea {
 /* Global styles for sidebars */
 /*	=FOOTER
 	------------------------------------------------------ */
-footer[role="contentinfo"] {
+[role="contentinfo"] {
   clear: both; }
-  footer[role="contentinfo"] p small {
+  [role="contentinfo"] p small {
     font-size: 90%; }
 
 /*-  STYLES FOR A RESPONSIVE DESIGN
@@ -442,7 +441,11 @@ footer[role="contentinfo"] {
 	* 479px					: Used for narrow smartphone screens (like the iPhone in portrait view)
 	
 	
-	I highly encourage you to finetune them to your own and your project's needs!
+	I highly encourage you to finetune all measures and widths to your own and your project's needs!
+	
+	Also, try using the 'debugmessage' mixin for showing exactly when a media query fires:
+	
+		@include debugmessage('767px media query fired');
 
 */
 /* For iPhone 4. Remember to use 'background-size' do define the original dimensions */
@@ -454,19 +457,12 @@ body {
   -ms-transition: width 0.5s ease-out;
   transition: width 0.5s ease-out; }
 
-/* Fires when the browser window is smaller than the main body width: */
-@media only screen and (max-width: 979px) {
+/* Tablet layout. Fires when the browser window is smaller than the main body width: */
+@media only screen and (min-width: 768px) and (max-width: 979px) {
   body {
-    width: 90%;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-    padding-right: 2.857%;
-    padding-left: 2.857%;
     background-color: red; }
     body::before {
-      content: "979px media query fired";
+      content: "979px (tablet) media query fired";
       font-weight: bold;
       display: block;
       text-align: center;
@@ -479,7 +475,6 @@ body {
 @media only screen and (max-width: 767px) {
   body {
     background: green;
-    width: 100%;
     -webkit-text-size-adjust: 100%; }
     body::before {
       content: "767px (Mobile) media query fired";

index.html

@@ -20,7 +20,7 @@
 	<meta name="DC.title" content="Project Name" />
 	<meta name="DC.subject" content="What you're about." />
 	<meta name="DC.creator" content="Who made this site." />
-	<link type="text/plain" rel="author" href="humans.txt" />
+	<link type="text/plain" rel="author" href="/humans.txt" />
 
 	<link rel="icon" href="images/favicon.png"/>
 
@@ -77,31 +77,47 @@ <h1><a href="/">Page Title</a></h1>
 
 	</header>
 
+	<!-- Main content -->
 	<section role="main">
+
+		<article>
 
-			<!-- Main content -->
-
-		<h2>Grid</h2>
+			<h1>H1 heading</h1>
+
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+			<h3>H3 heading</h3>
 
-		<ol style="list-style: inside decimal; font-size: 1.3em;margin: 28px 0;">
-			<li>Press and hold <abbr>'G'</abbr> to view the grid.</li>
-			<li>While holding, hit <abbr>'H'</abbr> to pin it.</li>
-			<li>Hit <abbr>'J'</abbr> to cycle through grids. I've added a second 28px 35 column grid as well.</li>
-		</ol>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+		</article>
 
 	</section>
 
+
+	<!-- Sidebar example -->
+
+	<div role="complementary">
+		<h2>Sidebar example</h2>
+
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
+	</div>
+
+
+
+	<!-- Footer -->
+
 	<footer role="contentinfo">
 
 		<p><small>&copy; Copyright Your Name Here 2010. All Rights Reserved.</small></p>
 
 	</footer>
 
-
-<!-- Google Analytics -->
 
 <!-- Javascripts -->
-<script src="js/jquery-1.5.1.min.js"></script>
+<script src="js/jquery-1.6.min.js"></script>
 <script defer src="js/jquery.smoothscroll.min.js"></script>
 <script defer src="js/jquery.hashgrid.js"></script>
 <script defer src="js/dyluni.js"></script>

js/dyluni.js

@@ -6,28 +6,30 @@
 $(function($){
 
 	// Hide the address bar on iPhone
-	setTimeout(function(){
-		window.scrollTo(0, 1);
-	}, 100);
+	if (navigator.userAgent.match(/iPhone/i)){
+		setTimeout(function(){
+			window.scrollTo(0, 1);
+		}, 100);
+	}
+
+
+	// Prevent iPhone and iPad to autoscale the page when rotated (http://adactio.com/journal/4470/)
+	if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
+	  var viewportmeta = document.querySelector('meta[name="viewport"]');
+	  if (viewportmeta) {
+	    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
+	    document.body.addEventListener('gesturestart', function() {
+	      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
+	    }, false);
+	  }
+	}
 
 
 	// Make a new grid overlay. See js/jquery.hashgrid.js for additional options
 	var grid = new hashgrid({
 		numberOfGrids: 2
 	});
-
-	// Set up smooth scrolling to text anchors
-	$("a").smoothScroll();
-
-	// For the iPhone 4
-	if(window.devicePixelRatio >= 2) {
-		// Replace low-res images with high-res ones for the iPhone 4. See code below. Be sure to rename
-		// your images according to Apple's guidelines ("image.png" becomes "image@2x.png")
-
-		// You can also use Troy's jQuery plugin for the whole site: http://troymcilvena.com/post/998277515/jquery-retina
 
-		//$retina_img.attr("src", old_src.replace(/(.+)(\.\w{3,4})$/, "$1"+ "@2x" +"$2"));
-	}	
 
 });
 

sass/_core.scss

@@ -30,9 +30,9 @@ $sans: 			"Helvetica Neue", Helvetica, Arial, sans-serif;
 $monospaced: 	Inconsolata, Monaco, "Courier New", Courier, monospace;
 
 
-$fontsize:		13px; 		// Sets the main body font size
+$fontsize:		14px; 		// Sets the main body font size
 
-$lineheight: 	24px;		// Specifies the global lineheight. Used for a nice vertical rhythm. Remember to 
+$lineheight: 	28px;		// Specifies the global lineheight. Used for a nice vertical rhythm. Remember to 
 							// ALWAYS stick this variable when adding vertical margins, paddings, etc., and you'll see
 							// the content stick to the vertical grid (hold 'G' on your keyboard to view).
 

sass/_main.scss

@@ -8,6 +8,14 @@
 *	separately.
 */
 
+
+/* Modular Scale ---------------------- 
+
+	$fontsize @ 1:1.618	  
+	http://modularscale.com/scale/?px1=13&px2=&ra1=1.618&ra2=0
+
+----------------------*/
+
 
 /*	=MAIN
 	------------------------------------------------------ */
@@ -20,12 +28,8 @@ html{
 /* Please use the body element as main site wrapper. Nothing wrong with that. */	
 
 body{	
-	width: 80%; 										/* If you want your design to span over the full screen, remove this row */
-	max-width: 98em; 									/* Sets the max-width of the wrapper. Currently $fontsize*98 = 1274px */
-
 	font: normal #{$fontsize}/#{$lineheight} $sans;
-
-	margin: 0 auto;
+	margin: 0 5%;
 }
 
 /*	=LINKS
@@ -43,18 +47,19 @@ a:hover, a:focus{
 /*	=HEADINGS
 	------------------------------------------------------ */	
 
+
 h1{
-	font-size: 4em;
+	font-size: $fontsize*1.618*1.618;
 	margin-bottom: $lineheight;
 	line-height: $lineheight*2;
 }
 
 h2{
-	font-size: 2.4em;
+	font-size: $fontsize*1.618;
 }
 
 h3{
-	font-size: 2em;
+
 }
 
 

sass/_responsive.scss

@@ -9,7 +9,11 @@
 	* 479px					: Used for narrow smartphone screens (like the iPhone in portrait view)
 	
 	
-	I highly encourage you to finetune them to your own and your project's needs!
+	I highly encourage you to finetune all measures and widths to your own and your project's needs!
+	
+	Also, try using the 'debugmessage' mixin for showing exactly when a media query fires:
+	
+		@include debugmessage('767px media query fired');
 
 */
 
@@ -24,19 +28,15 @@ body{
 	@include transition(width .5s ease-out);
 }
 
-/* Fires when the browser window is smaller than the main body width: */
+/* Tablet layout. Fires when the browser window is smaller than the main body width: */
 
-@media only screen and (max-width: 979px){
+@media only screen and (min-width: 768px) and (max-width: 979px){
 
 	body{
-		width: 90%;
-		@include box-sizing;
-		@include fluid(28, "padding-right");
-		@include fluid(28, "padding-left");
 
 		@if($DEBUG == true){
 			background-color: red;
-			@include debugmessage("979px media query fired");
+			@include debugmessage("979px (tablet) media query fired");
 		}
 	}
 
@@ -56,7 +56,6 @@ body{
 			background: green;
 			@include debugmessage("767px (Mobile) media query fired");
 		}
-		width: 100%;
 		-webkit-text-size-adjust: 100%;
 	}
 

sass/library/_utils.scss

@@ -121,6 +121,8 @@ $page_width_spec: 980;
 	transform: $args;
 }
 
+
+
 // Used in responsive design, make floated elements span 100% and remove the float:
 
 @mixin block($width: 100%, $centered: false){

sass/partials/_footer.scss

@@ -1,4 +1,4 @@
-footer[role="contentinfo"]{
+[role="contentinfo"]{
 	clear: both;
 
 	p small{