Add live preview support to layout option

This reverts commit fb7b5be377.

assets/css/customizer-controls.css

@@ -139,6 +139,27 @@
 	color: #a7a7a7;
 }
 
+/**
+ * Image Radio.
+ *
+ * Based on the work of:
+ * @author Anthony Hortin <http://maddisondesigns.com>
+ * @license http://www.gnu.org/licenses/gpl-2.0.html
+ * @link https://github.com/maddisondesigns
+ */
+.image_radio_button_control .radio-button-label > input {
+	display: none;
+}
+
+.image_radio_button_control .radio-button-label > img {
+	cursor: pointer;
+	border: 3px solid #ddd;
+}
+
+.image_radio_button_control .radio-button-label > input:checked + img {
+	border: 3px solid #2885bb;
+}
+
 /* Theme Upsell */
 #accordion-section-marianne_about .accordion-section-title {
 	padding-left: 30px;

assets/js/customizer-controls-change.js

@@ -7,7 +7,7 @@
 		// The speed of animations.
 		var speed = 200;
 
-		// Show Custom Page Width only when 'Custom' is checked.
+		// Show 'Make the logo round' option only when a loge is set.
 		if ( $( '#customize-control-custom_logo .remove-button' ).length > 0 ) {
 			$( '#customize-control-marianne_header_logo_round' ).show();
 		} else {
@@ -22,6 +22,21 @@
 			}
 		});
 
+		// Show Sidebar Width only when 'Left sidebar' layout is selected.
+		if ( $( '#marianne_global_layout_sidebar-left' ).is( ':checked' ) ) {
+			$( '#customize-control-marianne_global_sidebar_width' ).show();
+		} else {
+			$( '#customize-control-marianne_global_sidebar_width' ).hide();
+		}
+
+		$( '#customize-control-marianne_global_layout input[type="radio"]' ).change( function () {
+			if ( $( '#marianne_global_layout_sidebar-left' ).is( ':checked' ) ) {
+				$( '#customize-control-marianne_global_sidebar_width' ).show( speed );
+			} else {
+				$( '#customize-control-marianne_global_sidebar_width' ).hide( speed );
+			}
+		});
+
 		// Show Phone Type only when a phone number is typed.
 		if ( $( '#_customize-input-marianne_social_phone' ).val().length > 0 ) {
 			$( '#customize-control-marianne_social_phone_type' ).show();

assets/js/customizer-controls-change.min.js

@@ -1 +1 @@
-!function(o){"use strict";o(document).ready(function(o){o("#customize-control-custom_logo .remove-button").length>0?o("#customize-control-marianne_header_logo_round").show():o("#customize-control-marianne_header_logo_round").hide(),o("#customize-control-custom_logo").on("DOMSubtreeModified",function(){o("#customize-control-custom_logo .remove-button").length>0?o("#customize-control-marianne_header_logo_round").show(200):o("#customize-control-marianne_header_logo_round").hide(200)}),o("#_customize-input-marianne_social_phone").val().length>0?o("#customize-control-marianne_social_phone_type").show():o("#customize-control-marianne_social_phone_type").hide(),o("#_customize-input-marianne_social_phone").on("input",function(){o(this).val().length>0?o("#customize-control-marianne_social_phone_type").show(200):o("#customize-control-marianne_social_phone_type").hide(200)})})}(jQuery,wp.customize);
+!function(o){"use strict";o(document).ready(function(o){o("#customize-control-custom_logo .remove-button").length>0?o("#customize-control-marianne_header_logo_round").show():o("#customize-control-marianne_header_logo_round").hide(),o("#customize-control-custom_logo").on("DOMSubtreeModified",function(){o("#customize-control-custom_logo .remove-button").length>0?o("#customize-control-marianne_header_logo_round").show(200):o("#customize-control-marianne_header_logo_round").hide(200)}),o("#marianne_global_layout_sidebar-left").is(":checked")?o("#customize-control-marianne_global_sidebar_width").show():o("#customize-control-marianne_global_sidebar_width").hide(),o('#customize-control-marianne_global_layout input[type="radio"]').change(function(){o("#marianne_global_layout_sidebar-left").is(":checked")?o("#customize-control-marianne_global_sidebar_width").show(200):o("#customize-control-marianne_global_sidebar_width").hide(200)}),o("#_customize-input-marianne_social_phone").val().length>0?o("#customize-control-marianne_social_phone_type").show():o("#customize-control-marianne_social_phone_type").hide(),o("#_customize-input-marianne_social_phone").on("input",function(){o(this).val().length>0?o("#customize-control-marianne_social_phone_type").show(200):o("#customize-control-marianne_social_phone_type").hide(200)})})}(jQuery,wp.customize);

assets/js/customizer-live-preview.js

@@ -130,6 +130,20 @@
 			} );
 		} );
 
+		// Global > Sidebar Width.
+		wp.customize( 'marianne_global_sidebar_width', function( value ) {
+			value.bind( function( newval ) {
+				var target = '#page',
+					classes = {
+						'200': 'sidebar-width-200',
+						'250': 'sidebar-width-250',
+						'300': 'sidebar-width-300'
+					};
+
+				marianneSelectRadioToggleClass( target, classes, newval );
+			} );
+		} );
+
 		// Global > Expand images.
 		wp.customize( 'marianne_global_images_expand', function( value ) {
 			value.bind( function( newval ) {

assets/js/customizer-live-preview.min.js

@@ -1 +1 @@
-!function(e){"use strict";function t(t,i,n){t&&i&&n&&e.each(i,function(i,o){Array.isArray(t)?e.each(t,function(t,s){e(s).hasClass(o)&&e(s).removeClass(o),i===n&&e(s).addClass(o)}):(e(t).hasClass(o)&&e(t).removeClass(o),i===n&&e(t).addClass(o))})}function i(t,i,n){t&&i&&(!0===n?e(t).hasClass(i)||e(t).addClass(i):e(t).hasClass(i)&&e(t).removeClass(i))}e(document).ready(function(e){wp.customize("blogname",function(t){t.bind(function(t){0===e(".site-title").children("a").length?e(".site-title").html(t):e(".site-title a").html(t)})}),wp.customize("blogdescription",function(t){t.bind(function(t){e(".site-description").html(t)})}),wp.customize("colors_scheme",function(e){e.bind(function(e){t("body",{light:"color-scheme-light",dark:"color-scheme-dark",auto:"color-scheme-auto"},e)})}),wp.customize("colors_link_hover",function(e){e.bind(function(e){t("body",{blue:"link-hover-blue",red:"link-hover-red",green:"link-hover-green",orange:"link-hover-orange",purple:"link-hover-purple"},e)})}),wp.customize("marianne_global_page_width",function(e){e.bind(function(e){t("#page",{480:"page-width-480",600:"page-width-600",720:"page-width-720"},e)})}),wp.customize("marianne_global_images_expand",function(e){e.bind(function(e){i(".entry-thumbnail","entry-thumbnail-wide",e)})}),wp.customize("marianne_global_font_family",function(e){e.bind(function(e){t("body",{"sans-serif":"font-family-sans-serif",serif:"font-family-serif",monospace:"font-family-monospace"},e)})}),wp.customize("marianne_global_font_size",function(e){e.bind(function(e){t("body",{80:"font-size-80",90:"font-size-90",100:"font-size-100",110:"font-size-110",120:"font-size-120"},e)})}),wp.customize("marianne_global_text_shadow",function(e){e.bind(function(e){i("body","text-shadow",e)})}),wp.customize("marianne_header_align",function(e){e.bind(function(e){t(".site-header",{left:"site-header-align-left",center:"site-header-align-center",right:"site-header-align-right"},e)})}),wp.customize("marianne_header_title_weight",function(e){e.bind(function(e){t(".site-title",{normal:"site-title-weight-normal",bold:"site-title-weight-bold",bolder:"site-title-weight-bolder"},e)})}),wp.customize("marianne_header_desc_weight",function(e){e.bind(function(e){t(".site-description",{thin:"site-desc-weight-thin",normal:"site-desc-weight-normal"},e)})}),wp.customize("marianne_header_desc_style",function(e){e.bind(function(e){t(".site-description",{normal:"site-desc-style-normal",italic:"site-desc-style-italic"},e)})}),wp.customize("marianne_content_text_align",function(e){e.bind(function(e){t([".entry-content",".comment-content"],{left:"text-align-left",center:"text-align-center",right:"text-align-right",justify:"text-align-justify"},e)})}),wp.customize("marianne_content_hyphens",function(e){e.bind(function(e){i(".entry-content","text-hyphens",e)})}),wp.customize("marianne_footer_align",function(e){e.bind(function(e){t(".site-footer",{left:"site-footer-align-left",center:"site-footer-align-center",right:"site-footer-align-right"},e)})}),wp.customize("marianne_footer_text",function(t){t.bind(function(t){e("#site-footer-text").length?e("#site-footer-text").html(t):e(".site-footer").prepend('<div id="site-footer-text" class="site-footer-block">'+t+"</div>")})}),wp.customize("marianne_social_style",function(e){e.bind(function(e){t(".site-social",{square:"site-social-square",round:"site-social-round"},e)})})})}(jQuery,wp.customize);
+!function(e){"use strict";function t(t,i,n){t&&i&&n&&e.each(i,function(i,o){Array.isArray(t)?e.each(t,function(t,s){e(s).hasClass(o)&&e(s).removeClass(o),i===n&&e(s).addClass(o)}):(e(t).hasClass(o)&&e(t).removeClass(o),i===n&&e(t).addClass(o))})}function i(t,i,n){t&&i&&(!0===n?e(t).hasClass(i)||e(t).addClass(i):e(t).hasClass(i)&&e(t).removeClass(i))}e(document).ready(function(e){wp.customize("blogname",function(t){t.bind(function(t){0===e(".site-title").children("a").length?e(".site-title").html(t):e(".site-title a").html(t)})}),wp.customize("blogdescription",function(t){t.bind(function(t){e(".site-description").html(t)})}),wp.customize("colors_scheme",function(e){e.bind(function(e){t("body",{light:"color-scheme-light",dark:"color-scheme-dark",auto:"color-scheme-auto"},e)})}),wp.customize("colors_link_hover",function(e){e.bind(function(e){t("body",{blue:"link-hover-blue",red:"link-hover-red",green:"link-hover-green",orange:"link-hover-orange",purple:"link-hover-purple"},e)})}),wp.customize("marianne_global_page_width",function(e){e.bind(function(e){t("#page",{480:"page-width-480",600:"page-width-600",720:"page-width-720"},e)})}),wp.customize("marianne_global_sidebar_width",function(e){e.bind(function(e){t("#page",{200:"sidebar-width-200",250:"sidebar-width-250",300:"sidebar-width-300"},e)})}),wp.customize("marianne_global_images_expand",function(e){e.bind(function(e){i(".entry-thumbnail","entry-thumbnail-wide",e)})}),wp.customize("marianne_global_font_family",function(e){e.bind(function(e){t("body",{"sans-serif":"font-family-sans-serif",serif:"font-family-serif",monospace:"font-family-monospace"},e)})}),wp.customize("marianne_global_font_size",function(e){e.bind(function(e){t("body",{80:"font-size-80",90:"font-size-90",100:"font-size-100",110:"font-size-110",120:"font-size-120"},e)})}),wp.customize("marianne_global_text_shadow",function(e){e.bind(function(e){i("body","text-shadow",e)})}),wp.customize("marianne_header_align",function(e){e.bind(function(e){t(".site-header",{left:"site-header-align-left",center:"site-header-align-center",right:"site-header-align-right"},e)})}),wp.customize("marianne_header_title_weight",function(e){e.bind(function(e){t(".site-title",{normal:"site-title-weight-normal",bold:"site-title-weight-bold",bolder:"site-title-weight-bolder"},e)})}),wp.customize("marianne_header_desc_weight",function(e){e.bind(function(e){t(".site-description",{thin:"site-desc-weight-thin",normal:"site-desc-weight-normal"},e)})}),wp.customize("marianne_header_desc_style",function(e){e.bind(function(e){t(".site-description",{normal:"site-desc-style-normal",italic:"site-desc-style-italic"},e)})}),wp.customize("marianne_content_text_align",function(e){e.bind(function(e){t([".entry-content",".comment-content"],{left:"text-align-left",center:"text-align-center",right:"text-align-right",justify:"text-align-justify"},e)})}),wp.customize("marianne_content_hyphens",function(e){e.bind(function(e){i(".entry-content","text-hyphens",e)})}),wp.customize("marianne_footer_align",function(e){e.bind(function(e){t(".site-footer",{left:"site-footer-align-left",center:"site-footer-align-center",right:"site-footer-align-right"},e)})}),wp.customize("marianne_footer_text",function(t){t.bind(function(t){e("#site-footer-text").length?e("#site-footer-text").html(t):e(".site-footer").prepend('<div id="site-footer-text" class="site-footer-block">'+t+"</div>")})}),wp.customize("marianne_social_style",function(e){e.bind(function(e){t(".site-social",{square:"site-social-square",round:"site-social-round"},e)})})})}(jQuery,wp.customize);

functions.php

@@ -424,4 +424,5 @@ require get_template_directory() . '/inc/template-tags.php';
 require get_template_directory() . '/inc/customizer.php';
 require get_template_directory() . '/inc/marianne-theme-page.php';
 require get_template_directory() . '/inc/classes/class-marianne-customizer-control-slider.php';
+require get_template_directory() . '/inc/classes/class-marianne-customizer-control-radio-image.php';
 require get_template_directory() . '/inc/classes/class-marianne-customizer-section-about.php';

header.php

@@ -24,6 +24,11 @@
 	$marianne_body_class .= ' font-size-' . esc_attr( marianne_get_theme_mod( 'marianne_global_font_size' ) );
 	$marianne_body_class .= ' color-scheme-' . esc_attr( marianne_get_theme_mod( 'colors_scheme' ) );
 	$marianne_body_class .= ' link-hover-' . esc_attr( marianne_get_theme_mod( 'colors_link_hover' ) );
+	$marianne_body_class .= ' site-layout-' . esc_attr( marianne_get_theme_mod( 'marianne_global_layout' ) );
+
+	if ( 'sidebar-none' !== marianne_get_theme_mod( 'marianne_global_layout' ) ) {
+		$marianne_body_class .= ' sidebar-width-' . marianne_get_theme_mod( 'marianne_global_sidebar_width' );
+	}
 
 	if ( true === marianne_get_theme_mod( 'marianne_global_font_smooth' ) ) {
 		$marianne_body_class .= ' font-smooth';
@@ -45,6 +50,9 @@
 		<?php
 		$marianne_page_class  = 'site';
 		$marianne_page_class .= ' page-width-' . esc_attr( marianne_get_theme_mod( 'marianne_global_page_width' ) );
+
+		// TEST
+		$marianne_page_class .= ' site-grid-hl-sl';
 		?>
 		<div id="page" <?php marianne_add_class( $marianne_page_class, false ); ?>>
 

inc/classes/class-marianne-customizer-control-radio-image.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Custom Radio Image Class.
+ *
+ * This class is in charge of customization with radio images via the Customizer.
+ *
+ * Based on the work of Anthony Hortin.
+ *
+ * @link https://github.com/maddisondesigns
+ *
+ * @package Marianne
+ * @since Marianne 1.3
+ */
+
+if ( class_exists( 'WP_Customize_Control' ) ) {
+	/**
+	 * Instantiate the object.
+	 */
+	class Marianne_Customizer_Control_Radio_Image extends WP_Customize_Control {
+		/**
+		 * The control type.
+		 *
+		 * @access public
+		 * @var    string
+		 */
+		public $type = 'marianne_radio_image';
+
+		/**
+		 * Renders the control content.
+		 *
+		 * This simply prints the notice we need.
+		 *
+		 * @access public
+		 * @return void
+		 */
+		public function render_content() {
+			?>
+				<div class="image_radio_button_control">
+					<?php if ( ! empty( $this->label ) ) { ?>
+						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+					<?php } ?>
+
+					<?php if ( !empty( $this->description ) ) { ?>
+						<span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
+					<?php } ?>
+
+					<?php foreach ( $this->choices as $key => $value ) { ?>
+						<label class="radio-button-label">
+							<input type="radio" id="<?php echo esc_attr( $this->id . '_' . $key ); ?>" name="<?php echo esc_attr( $this->id ); ?>" value="<?php echo esc_attr( $key ); ?>" <?php $this->link(); ?> <?php checked( esc_attr( $key ), $this->value() ); ?>/>
+
+							<img src="<?php echo esc_attr( $value['image'] ); ?>" alt="<?php echo esc_attr( $value['name'] ); ?>" title="<?php echo esc_attr( $value['name'] ); ?>" />
+						</label>
+					<?php } ?>
+				</div>
+			<?php
+		}
+	}
+}

inc/customizer.php

@@ -199,6 +199,24 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 		);
 
 		// Global.
+		$marianne_customizer_options[] = array(
+			'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' ),
+			'type'        => 'marianne_radio_image',
+			'value'       => array(
+				'sidebar-none' => array(
+					'image' => esc_url( get_template_directory_uri() . '/assets/img/sidebar-none.png' ),
+					'name'  => __( 'One column', 'marianne' ),
+				),
+				'sidebar-left' => array(
+					'image' => esc_url( get_template_directory_uri() . '/assets/img/sidebar-left.png' ),
+					'name'  => __( 'Two columns with a left sidebar', 'marianne' ),
+				),
+			),
+		);
+
 		$marianne_customizer_options[] = array(
 			'section'     => 'marianne_global',
 			'id'          => 'page_width',
@@ -222,6 +240,20 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 			'live'        => true,
 		);
 
+		$marianne_customizer_options[] = array(
+			'section'     => 'marianne_global',
+			'id'          => 'sidebar_width',
+			'title'       => __( 'Sidebar Width', 'marianne' ),
+			'description' => __( 'Default: 250px.', 'marianne' ),
+			'type'        => 'radio',
+			'value'       => array(
+				'200' => __( '200px', 'marianne' ),
+				'250' => __( '250px', 'marianne' ),
+				'300' => __( '300px', 'marianne' ),
+			),
+			'live'        => true,
+		);
+
 		$marianne_customizer_options[] = array(
 			'section'     => 'marianne_global',
 			'id'          => 'font_family',
@@ -683,7 +715,7 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 				}
 
 				// Creates the control.
-				$others_controles = array( 'marianne_slider' );
+				$others_controles = array( 'marianne_slider', 'marianne_radio_image' );
 
 				if ( ! in_array( $type, $others_controles, true ) ) {
 					$wp_customize->add_control(
@@ -712,6 +744,19 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 							)
 						)
 					);
+				} elseif ( 'marianne_radio_image' === $type ) {
+					$wp_customize->add_control(
+						new Marianne_Customizer_Control_Radio_Image(
+							$wp_customize,
+							esc_html( $option_name ),
+							array(
+								'label'       => esc_html( $title ),
+								'description' => esc_html( $description ),
+								'section'     => esc_html( $section ),
+								'choices'     => $value,
+							)
+						)
+					);
 				}
 			}
 		}
@@ -741,8 +786,10 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
 			'colors_link_hover' => 'blue',
 
 			// Global.
+			'marianne_global_layout'        => 'sidebar-none',
 			'marianne_global_page_width'    => '480',
 			'marianne_global_images_expand' => false,
+			'marianne_global_sidebar_width' => '250',
 			'marianne_global_font_family'   => 'sans-serif',
 			'marianne_global_font_size'     => 100,
 			'marianne_global_font_smooth'   => false,

index.php

@@ -37,9 +37,8 @@ get_header();
 
 		<?php get_template_part( 'loop' ); ?>
 	</main>
-
-	<?php get_sidebar(); ?>
 </div>
 
 <?php
+get_sidebar();
 get_footer();

page.php

@@ -27,9 +27,8 @@ get_header();
 		}
 		?>
 	</main>
-
-	<?php get_sidebar(); ?>
 </div>
 
 <?php
+get_sidebar();
 get_footer();

readme.txt

@@ -208,3 +208,9 @@ License URI: https://opensource.org/licenses/mit-license.php
 Admin icons: Dashicons, Copyright Wordpress
 License: GPLv2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+sidebar-none.png and sidebar-left.png
+Author: Anthony Hortin
+Author URI: https://maddisondesigns.com
+License: GPLv2
+License URI: http://www.gnu.org/licenses/gpl-2.0.html

search.php

@@ -75,9 +75,8 @@ get_header();
 			</article>
 		<?php endif; ?>
 	</main>
-
-	<?php get_sidebar(); ?>
 </div>
 
 <?php
+get_sidebar();
 get_footer();

sidebar.php

@@ -11,7 +11,7 @@
 
 if ( is_active_sidebar( 'widgets' ) ) {
 	?>
-		<hr class="separator">
+		
 
 		<?php
 		$marianne_widgets_class = 'site-secondary';

single.php

@@ -27,9 +27,8 @@ get_header();
 		}
 		?>
 	</main>
-
-	<?php get_sidebar(); ?>
 </div>
 
 <?php
+get_sidebar();
 get_footer();

style.css

@@ -191,6 +191,16 @@ Text Domain: marianne
 	--page-width: 720px;
 }
 
+.sidebar-width-200 {
+	--sidebar-width: 200px;
+}
+.sidebar-width-250 {
+	--sidebar-width: 250px;
+}
+.sidebar-width-300 {
+	--sidebar-width: 300px;
+}
+
 /* Header */
 .site-header-align-left {
 	--site-header-align: left;
@@ -276,19 +286,56 @@ body {
 }
 .site {
 	margin: 0 auto;
-	max-width: var(--page-width);
 	word-wrap: break-word;
 }
-.site-header {
+.site-layout-sidebar-none .site {
+	max-width: var(--page-width);
+}
+.site-layout-sidebar-none .site-header {
 	margin: 2em 0 4em;
 	text-align: var(--site-header-align);
 }
-.site-content {
+.sidebar-width-250 .site-header {
+	text-align: var(--site-header-align);
+	width: var(--sidebar-width);
+}
+.site-layout-sidebar-none .site-content {
 	margin: 4em 0;
 }
-.site-primary {
+.site-layout-sidebar-none .site-primary {
 	margin-bottom: 4em;
 }
+
+.site-layout-sidebar-left .site {
+	display: grid;
+	grid-template-areas:
+		"header content"
+		"sidebar content"
+		"sidebar footer";
+	margin-top: 4em;
+	max-width: calc( var(--page-width) + var(--sidebar-width) + 2em * 2 );
+}
+.site-layout-sidebar-left .site-header {
+	grid-area: header;
+	margin-top: 0;
+	margin-right: 2em;
+	padding-right: 2em;
+}
+.site-layout-sidebar-left .site-content {
+	grid-area: content;
+	width: var(--page-width);
+}
+.site-layout-sidebar-left .site-secondary {
+	grid-area: sidebar;
+	margin-top: 0;
+	margin-right: 2em;
+	padding-right: 2em;
+}
+.site-layout-sidebar-left .site-footer {
+	grid-area: footer;
+	width: var(--page-width);
+}
+
 article,
 aside,
 div,
@@ -769,6 +816,14 @@ iframe {
 #menu-primary > .menu-item {
 	margin-bottom: .5em;
 }
+.site-layout-sidebar-left #menu-primary > .menu-item {
+	border-left: 1px solid var(--color-border);
+	border-right: 0;
+	display: block;
+	margin-right: 0;
+	padding-left: .5rem;
+	padding-right: 0;
+}
 #menu-primary > .menu-item:last-child {
 	margin-right: 0;
 	padding-right: 0;
@@ -805,13 +860,16 @@ iframe {
 	display: block;
 	height: auto;
 	left: 0;
+	top: 100%;
 	margin: 0;
 	padding: 0;
 	text-decoration: none;
-	top: 100%;
 	width: auto;
 	z-index: 100000;
 }
+.site-layout-sidebar-left #menu-primary .menu-item-has-children .sub-menu-toggle[aria-expanded="true"] ~ .sub-menu {
+	margin-left: .5em;
+}
 #menu-primary .sub-menu > .menu-item {
 	display: block;
 	width: 100%;
@@ -989,17 +1047,27 @@ iframe {
 	font-size: .9em;
 	margin: .5em 0;
 }
+.site-layout-sidebar-left .hentry:first-of-type .entry-meta:first-of-type {
+	margin-top: 0;
+}
 .entry-sticky {
 	border-left: 4px solid var(--color-border);
 	display: inline-block;
 	padding-left: .25em;
 	margin: 1em 0 .5em;
 }
-.post-title,
-.page-title {
+.post-title {
 	font-size: 1.5em;
 	margin: 1em 0;
 }
+.site-layout-sidebar-none .page-title {
+	font-size: 1.5em;
+	margin: 1em 0;
+}
+.site-layout-sidebar-left .page-title {
+	font-size: 1.5em;
+	margin: 0 0 1em;
+}
 .entry-thumbnail-wide .wp-post-image {
 	width: var(--page-width);
 }