Improved CSS appearance with custom background image, updated theme tags, and modified the expand/contract functionality of the mobile menu button.

lib/js/theme-jquery.js

@@ -31,7 +31,7 @@ jQuery(document).ready(function() {
 	jQuery('#menu-button').click(function() {
 		var button = jQuery(this);
 		button.toggleClass('open');
-        jQuery('.menu-primary').slideToggle();
+        jQuery('.nav-primary').slideToggle();
     });
 
     // Mobile navigation icons

style.css

@@ -6,7 +6,7 @@
 	Author: MIGHTYminnow
 	Author URI: http://www.mightyminnow.com/
 	Version: 1.0
-	Tags: genesis, mobile first, responsive, clean, black, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, fixed-width, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
+	Tags: black, gray, red, white, light, one-column, two-columns, three-columns, left-sidebar, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, front-page-post-form, full-width-template, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, genesis, mobile-first, responsive, clean
 	Text Domain: trestle
 */
 
@@ -25,6 +25,7 @@
 		- Tables
 	- Structure and Layout
 		- Site Containers
+		- Bubble Layout
 		- Column Widths and Positions
 		- Column Classes
 	- Common Classes
@@ -145,6 +146,10 @@ body {
 	line-height: 1.625;
 }
 
+body.bubble {
+	background-color: #f5f5f5;
+}
+
 a,
 button,
 input:focus,
@@ -562,6 +567,41 @@ Structure and Layout
 	clear: both;
 	padding: 20px;
 	padding: 2rem;
+	border-radius: 3px;
+}
+
+.custom-background .site-inner {
+	max-width: 1100px;
+	margin: 20px;
+	margin: 2rem;
+	padding: 30px;
+	padding: 3rem;
+	background-color: #FFF;
+}
+
+.custom-background.bubble .site-inner {
+	max-width: 1140px;
+	margin: 0 auto;
+	padding: 20px;
+	padding: 2rem;
+	background-color: transparent;
+
+}
+
+/* Bubble Layout
+--------------------------------------------- */
+.bubble .entry,
+.bubble .sidebar .widget,
+.bubble .breadcrumb,
+.bubble .archive-description,
+.bubble .author-box,
+.bubble .comment-respond,
+.bubble .entry-comments,
+.bubble .entry-pings {
+	margin-bottom: 20px;
+	margin-bottom: 2rem;
+	padding: 30px 40px;
+	padding: 3rem 4rem;
 }
 
 /* Column Widths and Positions
@@ -936,7 +976,11 @@ Site Header
 ---------------------------------------------------------------------------------------------------- */
 
 .site-header {
-	background-color: #fff;
+	background-color: #FFF;
+}
+
+.custom-background .site-header {
+	background-color: transparent;
 }
 
 .site-header .wrap {
@@ -1020,8 +1064,8 @@ Site Header
 }
 
 .site-header .search-form {
-	margin: 10px auto ;
-	margin: 1rem auto;
+	margin: 0 auto ;
+	margin: 0 auto;
 	text-align: center;
 }
 
@@ -1033,12 +1077,19 @@ Site Navigation
 /* General Navigation
 --------------------------------------------- */
 
-#menu-button {
+#menu-button,
+.custom-background.bubble #menu-button {
 	display: block;
-	margin: 0 20px 10px;
+	margin: 0 20px;
+	margin: 0 2rem;
 	text-align: center;
 }
 
+.bubble #menu-button {
+	margin-top: 20px;
+	margin-top: 2rem;
+}
+
 .genesis-nav-menu {
 	clear: both;
 	color: #999;
@@ -1157,16 +1208,14 @@ Site Navigation
 --------------------------------------------- */
 
 .nav-primary {
+	display: none;
 	margin: 0 20px;
+	margin: 5px 2rem 0;
 	border-radius: 3px;
 	overflow: hidden;
 	background-color: #333;
 }
 
-.nav-primary .genesis-nav-menu {
-	display: none;
-}
-
 .nav-primary .genesis-nav-menu li {
 	display: block;
 }
@@ -1488,13 +1537,6 @@ Sidebars
 .sidebar .widget {
 	background-color: #fff;
 	border-radius: 3px;
-	margin-bottom: 8.045977%;
-}
-
-.content-sidebar-sidebar .sidebar .widget,
-.sidebar-content-sidebar .sidebar .widget,
-.sidebar-sidebar-content .sidebar .widget {
-	margin-bottom: 8.2733813%;
 }
 
 
@@ -1748,10 +1790,6 @@ Media Queries
 	/* Bubble Layout - Padding & Margins
 	--------------------------------------------- */
 
-	body.bubble {
-		background-color: #f5f5f5;
-	}
-
 	.bubble .site-inner {
 		padding-top: 20px;
 		padding-top: 2rem;
@@ -1762,18 +1800,6 @@ Media Queries
 		padding: 0;
 	}
 
-	.bubble .entry,
-	.bubble .sidebar .widget,
-	.bubble .breadcrumb,
-	.bubble .archive-description,
-	.bubble .author-box,
-	.bubble .comment-respond,
-	.bubble .entry-comments,
-	.bubble .entry-pings {
-		padding: 30px 40px;
-		padding: 3rem 4rem;
-	}
-
 	.bubble .entry,
 	.bubble .breadcrumb,
 	.bubble .archive-description,
@@ -1803,6 +1829,19 @@ Media Queries
 		margin-bottom: 3.9723661%;
 	}
 
+	.sidebar .widget,
+	.bubble .sidebar .widget {
+		background-color: #fff;
+		border-radius: 3px;
+		margin-bottom: 8.045977%;
+	}
+
+	.content-sidebar-sidebar .sidebar .widget,
+	.sidebar-content-sidebar .sidebar .widget,
+	.sidebar-sidebar-content .sidebar .widget {
+		margin-bottom: 8.2733813%;
+	}
+
 	.bubble .entry-footer .entry-meta {
 		border-top: 2px solid #f5f5f5;
 		margin: 0 -40px;
@@ -1896,10 +1935,7 @@ Media Queries
 		margin: 0;
 		border-radius: 0;
 		overflow: visible;
-	}
-
-	.nav-primary .genesis-nav-menu {
-		display: block;
+		display: block !important;
 	}
 
 	.nav-primary .genesis-nav-menu li {
@@ -2021,4 +2057,12 @@ Media Queries
 		margin-left: -1px;
 	}
 
+}
+
+@media (min-width: 1140px) {
+
+	.custom-background .site-inner {
+		margin: 20px auto;
+	}
+
 }