Merge branch 'master' into fix/varia-issue-1505

exford/sass/_extra-child-theme.scss

@@ -88,8 +88,9 @@ a {
 
 			> div > ul > li > .sub-menu {
 				border: 1px solid map-deep-get($config-global, "color", "border", "default");
-				box-shadow: none;
 				border-radius: map-deep-get($config-global, "border-radius", "sm");
+				box-shadow: none;
+				box-sizing: content-box; // for Safari
 			}
 		}
 	}

exford/style-rtl.css

@@ -684,9 +684,7 @@ a {
 .site-header:after,
 .site-content:after,
 .site-footer:after {
-	content: "";
-	display: table;
-	table-layout: fixed;
+	clear: both;
 }
 
 /**
@@ -1967,6 +1965,10 @@ hr.wp-block-separator {
 		 */
 }
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
 	font-size: 1.728rem;
@@ -3681,8 +3683,9 @@ p:not(.site-title) a:hover {
 	}
 	.site-header > *.main-navigation > div > ul > li > .sub-menu {
 		border: 1px solid #CCCCCC;
-		box-shadow: none;
 		border-radius: 5px;
+		box-shadow: none;
+		box-sizing: content-box;
 	}
 }
 

exford/style.css

@@ -684,9 +684,7 @@ a {
 .site-header:after,
 .site-content:after,
 .site-footer:after {
-	content: "";
-	display: table;
-	table-layout: fixed;
+	clear: both;
 }
 
 /**
@@ -1967,6 +1965,10 @@ hr.wp-block-separator {
 		 */
 }
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #CCCCCC;
 	font-size: 1.728rem;
@@ -3710,8 +3712,9 @@ p:not(.site-title) a:hover {
 	}
 	.site-header > *.main-navigation > div > ul > li > .sub-menu {
 		border: 1px solid #CCCCCC;
-		box-shadow: none;
 		border-radius: 5px;
+		box-shadow: none;
+		box-sizing: content-box;
 	}
 }
 

rockfield/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rockfield",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

rockfield/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rockfield",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Rockfield",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

rockfield/sass/_extra-child-theme.scss

@@ -617,9 +617,11 @@ table,
 }
 
 /**
- * Footer Menu
+ * Footer
  */
 .site-footer {
+	align-items: unset;
+	flex-direction: column;
 	padding-left: 0;
 	padding-right: 0;
 }

rockfield/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

rockfield/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2058,7 +2058,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-left: auto;
+	margin-right: auto;
 	text-align: center;
 }
 
@@ -3005,7 +3008,19 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-author {
-	max-width: calc(100% - 48px);
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-left: 40px;
+  max-width: calc(100% - 48px);
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0;
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-author .fn {
@@ -3022,6 +3037,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-left: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {
@@ -4210,9 +4232,11 @@ table th,
 }
 
 /**
- * Footer Menu
+ * Footer
  */
 .site-footer {
+	align-items: unset;
+	flex-direction: column;
 	padding-right: 0;
 	padding-left: 0;
 }

rockfield/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2061,7 +2061,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-right: auto;
+	margin-left: auto;
 	text-align: center;
 }
 
@@ -3022,7 +3025,19 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-author {
-	max-width: calc(100% - 48px);
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-right: 40px;
+  max-width: calc(100% - 48px);
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0;
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-author .fn {
@@ -3039,6 +3054,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-right: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {
@@ -4239,9 +4261,11 @@ table th,
 }
 
 /**
- * Footer Menu
+ * Footer
  */
 .site-footer {
+	align-items: unset;
+	flex-direction: column;
 	padding-left: 0;
 	padding-right: 0;
 }

stratford/functions.php

@@ -183,6 +183,8 @@ function stratford_scripts() {
 	// enqueue child RTL styles
 	wp_style_add_data( 'stratford-style', 'rtl', 'replace' );
 
+	// enqueue header spacing JS
+	wp_enqueue_script('stratford-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'stratford_scripts', 99 );
 

stratford/js/fixed-header-spacing.js

@@ -0,0 +1,85 @@
+(function() {
+
+	/**
+	 * Debounce
+	 *
+	 * @param {Function} func
+	 * @param {number} wait
+	 * @param {boolean} immediate
+	 */
+	function debounce(func, wait, immediate) {
+		'use strict';
+
+		var timeout;
+		wait      = (typeof wait !== 'undefined') ? wait : 20;
+		immediate = (typeof immediate !== 'undefined') ? immediate : true;
+
+		return function() {
+
+			var context = this, args = arguments;
+			var later = function() {
+				timeout = null;
+
+				if (!immediate) {
+					func.apply(context, args);
+				}
+			};
+
+			var callNow = immediate && !timeout;
+
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+
+			if (callNow) {
+				func.apply(context, args);
+			}
+		};
+	}
+
+	/**
+	 * Get page header height and use it for top-margin on
+	 * site-content when above mobile breakpoint
+	 */
+	function pageHeaderHeight() {
+		var body = document.body;
+
+		if ( document.documentElement.clientWidth < 560 ) {
+			document.getElementById( "primary" ).style.marginTop = 0;
+			body.classList.remove( 'wp-sticky-header' );
+		} else {
+			var header  = document.getElementById( 'masthead' );
+			var content = document.getElementById( 'primary' );
+
+			content.style.marginTop = header.offsetHeight + "px";
+
+			if ( document.documentElement.clientHeight / 5 - header.offsetHeight >= 0 ) {
+				body.classList.add( 'wp-sticky-header' );
+			} else {
+				body.classList.remove( 'wp-sticky-header' );
+			}
+		}
+	};
+
+	/**
+	 * Run our function every time the window resizes
+	 */
+	var isResizing = false;
+	window.addEventListener( 'resize',
+		debounce( function() {
+			if ( isResizing ) {
+				return;
+			}
+
+			isResizing = true;
+			setTimeout( function() {
+				pageHeaderHeight();
+				isResizing = false;
+			}, 150 );
+		} )
+	);
+
+	/**
+	 * Run our page header height function
+	 */
+	pageHeaderHeight();
+})();

stratford/sass/_extra-child-theme.scss

@@ -82,13 +82,11 @@ a {
  */
 #masthead {
 	border-bottom: 1px solid $color_background_light;
-	position: fixed;
-	z-index: 9999;
 	background: $color_background;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
-    -moz-transition: all .25s ease-in-out;
-    transition: all .25s ease-in-out;
+	-moz-transition: all .25s ease-in-out;
+	transition: all .25s ease-in-out;
+	width: 100%;
 	.site-header-wrapper {
 		display: flex;
 		flex-wrap: wrap;
@@ -97,12 +95,11 @@ a {
 		-webkit-align-items: center;
 		-ms-flex-align: center;
 		align-items: center;
-		width: calc(100% - 1.5em);
+
 		.site-branding {
 			-webkit-transition: margin-top .25s ease-in-out;
 			-moz-transition: margin-top .25s ease-in-out;
 			transition: margin-top .25s ease-in-out;
-			margin-left: 1.5em;
 			margin-right: auto;
 			.site-description {
 				display: none;
@@ -211,21 +208,16 @@ a {
 
 }
 
- @include media(mobile-only) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-		.site-header-wrapper {
-			width: 100%;
-			.site-branding {
-				margin-left: 0;
-			}
-		}
-	}
+@include media(mobile) {
 	.site-header {
-		position: relative;
+		padding-right: $spacing_vertical;
+		padding-left: $spacing_vertical;
+		position: fixed;
+		z-index: 9999;
 	}
+}
 
+ @include media(mobile-only) {
 	.site-title,
 	.site-description {
 		font-size: $font_size_xl;
@@ -233,25 +225,6 @@ a {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title {
-	.site-content {
-		.site-main {
-			padding-top: 0;
-		}
-		@include media(mobile-only) {
-			padding-top: 4em;
-		}
-	}
-}
-
-
 /**
  * 4. Navigation
  */
@@ -442,4 +415,4 @@ input[type="submit"],
 .wp-block-verse {
 	font-family: $font_family_code;
 	font-size: $font_size_base;
-}
+}

stratford/style-rtl.css

@@ -3658,13 +3658,11 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	border-bottom: 1px solid #f3f3f3;
-	position: fixed;
-	z-index: 9999;
 	background: white;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
 	-moz-transition: all .25s ease-in-out;
 	transition: all .25s ease-in-out;
+	width: 100%;
 }
 
 #masthead .site-header-wrapper {
@@ -3675,14 +3673,12 @@ p:not(.site-title) a:hover {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
-	width: calc(100% - 1.5em);
 }
 
 #masthead .site-header-wrapper .site-branding {
 	-webkit-transition: margin-top .25s ease-in-out;
 	-moz-transition: margin-top .25s ease-in-out;
 	transition: margin-top .25s ease-in-out;
-	margin-right: 1.5em;
 	margin-left: auto;
 }
 
@@ -3768,20 +3764,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
-@media only screen and (max-width: 559px) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-	}
-	#masthead .site-header-wrapper {
-		width: 100%;
-	}
-	#masthead .site-header-wrapper .site-branding {
-		margin-right: 0;
-	}
+@media only screen and (min-width: 560px) {
 	.site-header {
-		position: relative;
+		padding-left: 32px;
+		padding-right: 32px;
+		position: fixed;
+		z-index: 9999;
 	}
+}
+
+@media only screen and (max-width: 559px) {
 	.site-title,
 	.site-description {
 		font-size: 1.728rem;
@@ -3789,23 +3781,6 @@ p:not(.site-title) a:hover {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title .site-content .site-main {
-	padding-top: 0;
-}
-
-@media only screen and (max-width: 559px) {
-	.home.page.hide-homepage-title .site-content {
-		padding-top: 4em;
-	}
-}
-
 /**
  * 4. Navigation
  */

stratford/style.css

@@ -3687,13 +3687,11 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	border-bottom: 1px solid #f3f3f3;
-	position: fixed;
-	z-index: 9999;
 	background: white;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
 	-moz-transition: all .25s ease-in-out;
 	transition: all .25s ease-in-out;
+	width: 100%;
 }
 
 #masthead .site-header-wrapper {
@@ -3704,14 +3702,12 @@ p:not(.site-title) a:hover {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
-	width: calc(100% - 1.5em);
 }
 
 #masthead .site-header-wrapper .site-branding {
 	-webkit-transition: margin-top .25s ease-in-out;
 	-moz-transition: margin-top .25s ease-in-out;
 	transition: margin-top .25s ease-in-out;
-	margin-left: 1.5em;
 	margin-right: auto;
 }
 
@@ -3797,20 +3793,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
-@media only screen and (max-width: 559px) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-	}
-	#masthead .site-header-wrapper {
-		width: 100%;
-	}
-	#masthead .site-header-wrapper .site-branding {
-		margin-left: 0;
-	}
+@media only screen and (min-width: 560px) {
 	.site-header {
-		position: relative;
+		padding-right: 32px;
+		padding-left: 32px;
+		position: fixed;
+		z-index: 9999;
 	}
+}
+
+@media only screen and (max-width: 559px) {
 	.site-title,
 	.site-description {
 		font-size: 1.728rem;
@@ -3818,23 +3810,6 @@ p:not(.site-title) a:hover {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title .site-content .site-main {
-	padding-top: 0;
-}
-
-@media only screen and (max-width: 559px) {
-	.home.page.hide-homepage-title .site-content {
-		padding-top: 4em;
-	}
-}
-
 /**
  * 4. Navigation
  */

varia/sass/blocks/utilities/_style.scss

@@ -23,7 +23,10 @@
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-right: auto;
+	margin-left: auto;
 	text-align: center;
 }
 

varia/sass/components/comments/_comments.scss

@@ -82,14 +82,23 @@
 	margin-right: calc( $avatar-size + (0.5 * #{map-deep-get($config-global, "spacing", "horizontal")}) );
 
 	.comment-author {
-
+		line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
+		margin-bottom: #{.25 * map-deep-get($config-global, "spacing", "unit")};
+		padding-right: #{2.5 * map-deep-get($config-global, "spacing", "horizontal")};
 		max-width: calc(100% - #{3 * map-deep-get($config-global, "spacing", "horizontal")});
 
-		.fn {
+		@include media(mobile) {
+			display: flex;
+			align-items: center;
+			margin-bottom: 0;
+			padding-right: 0;
+		}
+    
+    .fn {
 			word-wrap: break-word;
 			word-break: break-word;
 			hyphens: auto;
-		}
+    }
 
 		.avatar {
 			display: block;
@@ -99,8 +108,12 @@
 	}
 
 	.comment-metadata {
-
 		color: #{map-deep-get($config-global, "color", "foreground", "default")};
+		padding-right: #{2.5 * map-deep-get($config-global, "spacing", "horizontal")};
+
+		@include media(mobile) {
+			padding-right: 0;
+		}
 
 		a {
 			color: currentColor;

varia/style-rtl.css

@@ -2017,7 +2017,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-left: auto;
+	margin-right: auto;
 	text-align: center;
 }
 
@@ -2964,7 +2967,19 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-author {
-	max-width: calc(100% - 48px);
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-left: 40px;
+  max-width: calc(100% - 48px);
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0;
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-author .fn {
@@ -2981,6 +2996,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-left: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {

varia/style.css

@@ -2020,7 +2020,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-right: auto;
+	margin-left: auto;
 	text-align: center;
 }
 
@@ -2981,7 +2984,19 @@ body:not(.fse-enabled) .footer-menu a {
 }
 
 .comment-meta .comment-author {
-	max-width: calc(100% - 48px);
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-right: 40px;
+  max-width: calc(100% - 48px);
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0;
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-author .fn {
@@ -2998,6 +3013,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-right: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {