diff --git a/assets/js/customizer-controls-change.js b/assets/js/customizer-controls-change.js index 4a252f1..96f4334 100644 --- a/assets/js/customizer-controls-change.js +++ b/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 { diff --git a/inc/custom-styles.php b/inc/custom-styles.php index f0d4f1b..294fe35 100644 --- a/inc/custom-styles.php +++ b/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(); diff --git a/inc/customizer.php b/inc/customizer.php index 7ecc393..8dd84db 100644 --- a/inc/customizer.php +++ b/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', diff --git a/sidebar.php b/sidebar.php index fea5079..ffdf915 100644 --- a/sidebar.php +++ b/sidebar.php @@ -19,7 +19,9 @@ if ( is_active_sidebar( 'widgets' ) ) { } ?> diff --git a/style.css b/style.css index 9e002e2..39df5d5 100644 --- a/style.css +++ b/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; }