Enhance left sidebar

assets/js/customizer-controls-change.js

@@ -10,7 +10,26 @@
 		// The speed of animations.
 		var speed = 200;
 
-		// Show Custom Page Width only when 'Custom' is checked.
+		// Show sidebar parameters if a sidebar is set.
+		if ( $( "#_customize-input-marianne_global_layout-radio-two-column-left-sidebar" ).is( ":checked" ) ) {
+			$( "#customize-control-marianne_global_sidebar_width" ).show();
+			$( "#customize-control-marianne_global_sidebar_margin" ).show();
+		} else {
+			$( "#customize-control-marianne_global_sidebar_width" ).hide();
+			$( "#customize-control-marianne_global_sidebar_margin" ).hide();
+		}
+
+		$( "#customize-control-marianne_global_layout input" ).change( function () {
+			if ( $( "_customize-input-marianne_global_layout-radio-two-column-left-sidebar" ).is( ":checked" ) ) {
+				$( "#customize-control-marianne_global_sidebar_width" ).show( speed );
+				$( "#customize-control-marianne_global_sidebar_margin" ).show( speed );
+			} else {
+				$( "#customize-control-marianne_global_sidebar_width" ).hide( speed );
+				$( "#customize-control-marianne_global_sidebar_margin" ).hide( speed );
+			}
+		} );
+
+		// Show Round Logo when a logo is set.
 		if ( $( "#customize-control-custom_logo .remove-button" ).length > 0 ) {
 			$( "#customize-control-marianne_header_logo_round" ).show();
 		} else {

inc/custom-styles.php

@@ -139,33 +139,37 @@ if ( ! function_exists( 'marianne_custom_css' ) ) {
 		if ( 'one-column' === $marianne_layout ) {
 			$css['.site']['max-width'] = absint( $marianne_page_width ) . 'px';
 
-			$css['.site-header']['margin-top'] = '2em';
+			$css['.site-header']['margin-top']    = '2em';
 			$css['.site-header']['margin-bottom'] = '4em';
 
 			$css['#menu-primary-container']['margin'] = '2em 0';
+
+			$css['.site-content']['margin-top'] = '4em';
 		} elseif ( 'two-column-left-sidebar' === $marianne_layout ) {
-			$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
+			$marianne_sidebar_width  = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
+			$marianne_sidebar_margin = marianne_get_theme_mod( 'marianne_global_sidebar_margin' );
 
-			$css['.site']['max-width'] = absint( $marianne_page_width ) . 'px';
+			$css['.site']['max-width']  = absint( $marianne_page_width ) . 'px';
+			$css['.site']['margin-top'] = '2em';
 
-			$css['.site-header']['width'] = absint( $marianne_sidebar_width ) . 'px';
-			$css['.site-header']['float'] = 'left';
-			$css['.site-header']['margin-left'] = '-' . absint( $marianne_sidebar_width + 50 ) . 'px';
+			$css['.site-header']['width']       = absint( $marianne_sidebar_width ) . 'px';
+			$css['.site-header']['float']       = 'left';
+			$css['.site-header']['margin-left'] = '-' . absint( $marianne_sidebar_width + $marianne_sidebar_margin ) . 'px';
 
-			$css['#menu-primary > .menu-item']['border-right'] = '0';
-			$css['#menu-primary > .menu-item']['border-left'] = '1px solid var(--color-border)';
-			$css['#menu-primary > .menu-item']['display'] = 'block';
-			$css['#menu-primary > .menu-item']['margin'] = '.5rem 0';
+			$css['#menu-primary > .menu-item']['border-right']  = '0';
+			$css['#menu-primary > .menu-item']['border-left']   = '1px solid var(--color-border)';
+			$css['#menu-primary > .menu-item']['display']       = 'block';
+			$css['#menu-primary > .menu-item']['margin']        = '.5rem 0';
 			$css['#menu-primary > .menu-item']['padding-right'] = '0';
-			$css['#menu-primary > .menu-item']['padding-left'] = '.5rem';
+			$css['#menu-primary > .menu-item']['padding-left']  = '.5rem';
 
-			$css['.site-content']['float'] = 'right';
-			$css['.site-content']['position'] = 'relative';
-			$css['.site-content']['margin'] = '0 0 4em 0';
+			$css['.site-content']['float']         = 'right';
+			$css['.site-content']['position']      = 'relative';
+			$css['.site-content']['margin-bottom'] = '4em';
 
-			$css['.site-secondary']['width'] = absint( $marianne_sidebar_width ) . 'px';
-			$css['.site-secondary']['float'] = 'left';
-			$css['.site-secondary']['margin-left'] = '-' . absint( $marianne_sidebar_width + 50 ) . 'px';
+			$css['.site-secondary']['width']       = absint( $marianne_sidebar_width ) . 'px';
+			$css['.site-secondary']['float']       = 'left';
+			$css['.site-secondary']['margin-left'] = '-' . absint( $marianne_sidebar_width + $marianne_sidebar_margin ) . 'px';
 			$css['.site-secondary']['clear'] = 'left';
 
 			$css['.site-secondary .separator']['margin'] = '2em 0';
@@ -182,9 +186,10 @@ if ( ! function_exists( 'marianne_custom_css' ) ) {
 
 		// Responsive
 		if ( 'two-column-left-sidebar' === $marianne_layout ) {
-			$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
+			$marianne_sidebar_width  = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
+			$marianne_sidebar_margin = marianne_get_theme_mod( 'marianne_global_sidebar_margin' );
 
-			$media_rule = '@media all and (max-width: ' . absint( $marianne_page_width + ( ( $marianne_sidebar_width + 50 ) * 2 ) + 100 ) . 'px)';
+			$media_rule = '@media all and (max-width: ' . absint( $marianne_page_width + ( ( $marianne_sidebar_width + $marianne_sidebar_margin ) * 2 ) + 100 ) . 'px)';
 
 			$media = array();
 

inc/customizer.php

@@ -216,7 +216,7 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 			'section'     => 'marianne_global',
 			'id'          => 'layout',
 			'title'       => __( 'Layout', 'marianne' ),
-			'description' => __( 'You can choose to display your site in one or two columns, with a left sidebar. Default: one column.', 'marianne' ),
+			'description' => __( 'You can choose to display your site in one or two columns, with a left sidebar. The sidebar will show up only if the screen is wide enough. Default: one column.', 'marianne' ),
 			'type'        => 'radio',
 			'value'       => array(
 				'one-column'              => __( 'One column', 'marianne' ),
@@ -239,6 +239,20 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 			'live'        => false,
 		);
 
+		$marianne_customizer_options[] = array(
+			'section'     => 'marianne_global',
+			'id'          => 'sidebar_margin',
+			'title'       => __( 'Sidebar Margin Width', 'marianne' ),
+			'description' => __( 'Default: 50px.', 'marianne' ),
+			'type'        => 'marianne_slider',
+			'input_attrs' => array(
+				'min'  => 50,
+				'max'  => 150,
+				'step' => 10,
+			),
+			'live'        => false,
+		);
+
 		$marianne_customizer_options[] = array(
 			'section'     => 'marianne_global',
 			'id'          => 'page_width',
@@ -949,14 +963,15 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
 			'colors_link_hover' => 'blue',
 
 			// Global.
-			'marianne_global_layout'        => 'one-column',
-			'marianne_global_sidebar_width' => 250,
-			'marianne_global_page_width'    => 480,
-			'marianne_global_images_expand' => false,
-			'marianne_global_font_family'   => 'sans-serif',
-			'marianne_global_font_size'     => 100,
-			'marianne_global_font_smooth'   => false,
-			'marianne_global_text_shadow'   => false,
+			'marianne_global_layout'         => 'one-column',
+			'marianne_global_sidebar_width'  => 250,
+			'marianne_global_sidebar_margin' => 50,
+			'marianne_global_page_width'     => 480,
+			'marianne_global_images_expand'  => false,
+			'marianne_global_font_family'    => 'sans-serif',
+			'marianne_global_font_size'      => 100,
+			'marianne_global_font_smooth'    => false,
+			'marianne_global_text_shadow'    => false,
 
 			// Header Settings.
 			'marianne_header_align'            => 'left',

sidebar.php

@@ -19,7 +19,9 @@ if ( is_active_sidebar( 'widgets' ) ) {
 		}
 		?>
 		<aside id="secondary"<?php marianne_add_class( $marianne_widgets_class ); ?> role="complementary">
-			<hr class="separator">
+			<?php if ( 'two-column-left-sidebar' !== marianne_get_theme_mod( 'marianne_global_layout' ) ) : ?>
+				<hr class="separator">
+			<?php endif; ?>
 
 			<?php dynamic_sidebar( 'widgets' ); ?>
 		</aside>

style.css

@@ -243,9 +243,6 @@ body {
 .site-header {
 	text-align: var(--site-header-align);
 }
-.site-content {
-	margin: 4em 0;
-}
 .site-primary {
 	margin-bottom: 4em;
 }