Improve the design on smaller screens

* There no longer a need to have equal height in the footer widgets
* Add the .widget-area class to all widget areas. Some still have the
'sidebar' class as it might be used by a child theme
* Improve contrast on the toggle menu button
* Center the site title, logo and description
* Make the widget areas full width
* Improve the comment form by making it one-column and make the button
bigger

Some improvements to the print stylesheet have been made as well

js/script.js

@@ -78,12 +78,12 @@
 
 	/* Call the equal_height_columns() function when window has been loaded to make sure the images are loaded */
 	$(window).load(function() {
-		equal_height_columns( $('.page-template-template-front-page .headline-list, #sidebar-subsidiary .widget, .not-found-widgets .widget') );
+		equal_height_columns( $('.page-template-template-front-page .headline-list, .not-found-widgets .widget') );
 	});
 
 	/* Call the equal_height_columns() function when window is being resized */
 	$(window).resize(function() {
- 		equal_height_columns( $('.page-template-template-front-page .headline-list, #sidebar-subsidiary .widget, .not-found-widgets .widget') );
+ 		equal_height_columns( $('.page-template-template-front-page .headline-list, .not-found-widgets .widget') );
 	});
 
 	/* A little surprise ;-) */

sidebar-404.php

@@ -10,7 +10,7 @@
 
 if ( is_active_sidebar( 'error-page' ) ) : ?>
 
-	<div class="not-found-widgets clearfix">
+	<div class="not-found-widgets widget-area clearfix">
 
 		<?php dynamic_sidebar( 'error-page' ); ?>
 

sidebar-after-single.php

@@ -12,7 +12,7 @@
 
 	<?php do_atomic( 'before_sidebar_single' ); // cakifo_before_sidebar_single ?>
 
-	<aside id="sidebar-after-single" class="sidebar">
+	<aside id="sidebar-after-single" class="sidebar widget-area">
 
 		<?php dynamic_sidebar( 'after-single' ); ?>
 

sidebar-after-singular.php

@@ -12,7 +12,7 @@
 
 	<?php do_atomic( 'before_sidebar_singular' ); // cakifo_before_sidebar_singular ?>
 
-	<aside id="sidebar-after-singular" class="sidebar">
+	<aside id="sidebar-after-singular" class="sidebar widget-area">
 
 		<?php dynamic_sidebar( 'after-singular' ); ?>
 

sidebar-primary.php

@@ -13,7 +13,7 @@
 
 	<?php do_atomic( 'before_sidebar_primary' ); // cakifo_before_sidebar_primary ?>
 
-	<div id="sidebar-primary" class="sidebar">
+	<div id="sidebar-primary" class="sidebar widget-area">
 
 		<?php do_atomic( 'open_sidebar_primary' ); // cakifo_open_sidebar_primary ?>
 

sidebar-secondary.php

@@ -13,7 +13,7 @@
 
 	<?php do_atomic( 'before_sidebar_secondary' ); // cakifo_before_sidebar_secondary ?>
 
-	<div id="sidebar-secondary" class="sidebar">
+	<div id="sidebar-secondary" class="sidebar widget-area">
 
 		<?php do_atomic( 'open_sidebar_secondary' ); // cakifo_open_sidebar_secondary ?>
 

style.dev.css

@@ -937,11 +937,11 @@ a.toggle-navbar {
 
 	.toggle-navbar > a {
 		background-color: #2c2c2c;
-		background-image: -moz-linear-gradient(top, #333333, #222222);
-		background-image: -ms-linear-gradient(top, #333333, #222222);
-		background-image: -webkit-linear-gradient(top, #333333, #222222);
-		background-image: -o-linear-gradient(top, #333333, #222222);
-		background-image: linear-gradient(top, #333333, #222222);
+		background-image: -moz-linear-gradient(top, #555, #222);
+		background-image: -ms-linear-gradient(top, #555, #222);
+		background-image: -webkit-linear-gradient(top, #555, #444);
+		background-image: -o-linear-gradient(top, #555, #222);
+		background-image: linear-gradient(top, #555, #222);
 		border: 1px solid #181818;
  		border-bottom-color: #050505;
  		border-radius: 4px;
@@ -1048,7 +1048,7 @@ a.toggle-navbar {
 }
 
 #main,
-.sidebar {
+.widget-area {
 	margin-top: 40px;
 }
 
@@ -1269,6 +1269,7 @@ html[xmlns] .slides-container { display: block; }
 	content: "";
 	width: 8px; height: 12px;
 	position: absolute;
+	z-index: 10;
 	top: 15px; left: 15px;
 }
 
@@ -1315,9 +1316,9 @@ html[xmlns] .slides-container { display: block; }
 		border: 1px solid #bbb;
 	}
 
-@media screen and (max-width: 860px) {
-	.flex-direction-nav .flex-prev { opacity: 1; left: 0; }
-	.flex-direction-nav .flex-next { opacity: 1; right: 0; }
+@media screen and (max-width: 1024px) {
+	.flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
+	.flex-direction-nav .flex-next { opacity: 1; right: 10px; }
 }
 
 /* Thumbnail nav */
@@ -2097,7 +2098,7 @@ img.alignright {
 	border-radius: 3px;
 	color: #464646;
 	display: inline-block;
-	margin-right: 2px;
+	margin: 0 2px 8px 0;
 	padding: 10px 14px 9px;
 	text-shadow: 0 1px 0 #fff;
 	box-shadow: 0 2px 0 #ccc;
@@ -2573,6 +2574,7 @@ select {
 /* Labels */
 label {
 	color: #606060;
+	cursor: pointer;
 	font: 14px 'PT Serif', Georgia, serif;
 	padding-left: 2px;
 	-webkit-transition: color 150ms;
@@ -2985,16 +2987,6 @@ span.required {
 		background: #f7fafc;
 	}
 
-	/* Make the footer widgets two colums */
-	#sidebar-subsidiary .widget {
-		width: 45%;
-	}
-
-	#sidebar-subsidiary .widget:nth-child(2n) {
-		float: right;
-	}
-
-
 	/* Add a background to the search inputs */
 	#topbar .search-form .search-text,
 	#topbar .search-form .search-submit {
@@ -3020,17 +3012,66 @@ span.required {
 }
 
 @media screen and (max-width: 480px) {
-	/* Hide thumbnails from the Recent Posts and Category headline lists */
-	#recent-posts img,
-	.headline-list img {
+
+	#branding {
+		text-align: center;
+	}
+
+	#site-title,
+	#site-description {
+		float: none;
+	}
+
+	#site-description {
+		margin: 20px 0 0;
+	}
+
+	/* Hide thumbnails from the Recent Posts */
+	#recent-posts img {
 		display: none;
 	}
 
-	/* Remove the sidebar widgets and search form from topbar */
-	#sidebar-primary, #sidebar-secondary, #sidebar-subsidiary,
+	/* Make the widget areas full width */
+	.widget-area,
+	.headline-list {
+		width: 100% !important;
+		float: none !important;
+	}
+
+	/* Remove the search form from topbar */
 	#topbar .search-form {
 		display: none;
 	}
+
+	/* Make the comment form better */
+	#respond p.form-email,
+	#respond p.form-author {
+		float: none;
+		width: 100%;
+	}
+
+	#respond p.form-author input[type="text"],
+	#respond p.form-email input[type="text"] {
+		width: 98%;
+	}
+
+	#respond p.form-email input[type="text"] {
+		float: none;
+	}
+
+	#respond label {
+		font-size: 16px;
+	}
+
+	#respond p.form-email > label {
+		padding-left: 0;
+	}
+
+	#respond #submit {
+		font-size: 18px;
+		width: 100%;
+		padding: 25px;
+	}
 }
 
 /**
@@ -3061,7 +3102,8 @@ span.required {
 	}
 
 	#topbar, #site-title img, .sidebar, #sidebar-subsidiary, #respond, .pagination, object, embed, video, audio, iframe[src*=youtube], #slider, .format-quote .entry-format,
-	.twitter-share, .fb-like, .delicious-share-button, .digg-share-button, #___plusone_0, .author-profile .twitter-link, .avatar, .comment-meta .permalink, .comment-reply-link {
+	blockquote:before, blockquote p:after, .twitter-share, .fb-like, .delicious-share-button, .digg-share-button, #___plusone_0, .author-profile .twitter-link, .avatar,
+	.comment-meta .permalink, .comment-reply-link, .more-link, .comments-link {
 		display: none !important;
 	}
 
@@ -3092,11 +3134,13 @@ span.required {
 	}
 
 	h3,
+	table caption,
 	.breadcrumbs,
-	.section-title {
+	.section-title,
+	.section-title.alternative-section-title {
 		background: none;
 		color: #333;
-		border-bottom: none;
+		border: none;
 	}
 
 	#main {
@@ -3138,6 +3182,10 @@ span.required {
 		padding: 0 25px;
 	}
 
+	blockquote {
+		font-style: italic;
+	}
+
 	tr, img { page-break-inside: avoid; }
 	#comments { page-break-before: always; }
 	 p, h2, h3 { orphans: 3; widows: 3; }