Rockfield: remove alignment

rockfield/sass/_extra-child-theme.scss

@@ -272,8 +272,7 @@ a {
 .entry-header,
 .page-title,
 .a8c-posts-list-item__title,
-.a8c-posts-list .a8c-posts-list-item__featured,
-.wp-block-newspack-blocks-homepage-articles article .entry-title {
+.a8c-posts-list .a8c-posts-list-item__featured {
 	text-align: center;
 }
 
@@ -375,13 +374,11 @@ table,
 }
 
 // Blog Posts Listing
-.a8c-posts-list,
-.wp-block-newspack-blocks-homepage-articles article {
+.a8c-posts-list {
 	text-align: center;
 }
 
-.a8c-posts-list__item,
-.wp-block-newspack-blocks-homepage-articles article {
+.a8c-posts-list__item {
 	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 
@@ -395,18 +392,36 @@ table,
 	}
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	text-decoration: none;
+.a8c-posts-list__listing {
+	text-align: left;
+
+	&:not(:last-child) {
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta {
-	display: block;
+/**
+ * Blog Posts (Newspack)
+ */
+.wp-block-newspack-blocks-homepage-articles article {
+	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+
+	@include media(mobile) {
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+	}
 }
 
-.a8c-posts-list__listing,
-.wp-block-newspack-blocks-homepage-articles article p {
-	text-align: left;
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
 
+.wp-block-newspack-blocks-homepage-articles article p {
 	&:not(:last-child) {
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 
@@ -416,12 +431,6 @@ table,
 	}
 }
 
-//Newspack 'load more' is outside the wrapper.
-button[data-load-more-btn] {
-	display: flex;
-	margin: 0 auto;
-}
-
 /**
  * Comments
  */

rockfield/style-editor.css

@@ -302,12 +302,6 @@ object {
 	width: auto;
 }
 
-.wp-block-a8c-blog-posts .entry-title {
-	font-size: 2.48832rem;
-	letter-spacing: normal;
-	line-height: 1.125;
-}
-
 .wp-block-a8c-blog-posts .entry-title a {
 	color: #222222;
 	text-decoration: underline;

rockfield/style-rtl.css

@@ -194,7 +194,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button,
+button[data-load-more-btn], button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 20px;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -227,7 +227,7 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
@@ -235,7 +235,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.12em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1149,6 +1149,119 @@ object {
 	min-width: 300px;
 }
 
+.wp-block-newspack-blocks-homepage-articles article {
+	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
+}
+
+.wp-block-newspack-blocks-homepage-articles article:first-child {
+	margin-top: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article:last-child {
+	margin-bottom: calc(3 * 32px);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	font-size: 2.48832rem;
+	letter-spacing: normal;
+	line-height: 1.125;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: #222222;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #444444;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .more-link {
+	margin-top: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: #757575;
+	font-size: 0.83333rem;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span {
+	display: inline-block;
+	margin-left: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span > *,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span:last-child,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span:last-child,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span:last-child {
+	margin-left: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span .published + .updated,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span .published + .updated,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span .published + .updated {
+	display: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta a,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a {
+	color: currentColor;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
+	color: #444444;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
+.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
+	fill: currentColor;
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	margin-left: calc(0.25 * 16px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3931,7 +4044,8 @@ p:not(.site-title) a:hover {
 .entry-header,
 .page-title,
 .a8c-posts-list-item__title,
-.a8c-posts-list .a8c-posts-list-item__featured {
+.a8c-posts-list .a8c-posts-list-item__featured,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	text-align: center;
 }
 
@@ -4019,40 +4133,60 @@ table th,
 	border-color: #E0E0E0;
 }
 
-.a8c-posts-list {
+.a8c-posts-list,
+.wp-block-newspack-blocks-homepage-articles article {
 	text-align: center;
 }
 
-.a8c-posts-list__item {
+.a8c-posts-list__item,
+.wp-block-newspack-blocks-homepage-articles article {
 	margin-bottom: 32px;
 	margin-top: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.a8c-posts-list__item {
+	.a8c-posts-list__item,
+	.wp-block-newspack-blocks-homepage-articles article {
 		margin-bottom: 64px;
 		margin-top: 64px;
 	}
 }
 
-.a8c-posts-list__item .a8c-posts-list-item__meta {
+.a8c-posts-list__item .a8c-posts-list-item__meta,
+.wp-block-newspack-blocks-homepage-articles article .a8c-posts-list-item__meta {
 	text-align: center;
 }
 
-.a8c-posts-list__listing {
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta {
+	display: block;
+}
+
+.a8c-posts-list__listing,
+.wp-block-newspack-blocks-homepage-articles article p {
 	text-align: right;
 }
 
-.a8c-posts-list__listing:not(:last-child) {
+.a8c-posts-list__listing:not(:last-child),
+.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.a8c-posts-list__listing:not(:last-child) {
+	.a8c-posts-list__listing:not(:last-child),
+	.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
 		margin-bottom: 64px;
 	}
 }
 
+button[data-load-more-btn] {
+	display: flex;
+	margin: 0 auto;
+}
+
 /**
  * Comments
  */

rockfield/style.css

@@ -1168,12 +1168,6 @@ object {
 	width: auto;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title {
-	font-size: 2.48832rem;
-	letter-spacing: normal;
-	line-height: 1.125;
-}
-
 .wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: #222222;
 	text-decoration: underline;
@@ -1258,6 +1252,10 @@ object {
 	margin-right: calc(0.25 * 16px);
 }
 
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
 button[data-load-more-btn] {
 	display: inline-block;
 }
@@ -4073,8 +4071,7 @@ p:not(.site-title) a:hover {
 .entry-header,
 .page-title,
 .a8c-posts-list-item__title,
-.a8c-posts-list .a8c-posts-list-item__featured,
-.wp-block-newspack-blocks-homepage-articles article .entry-title {
+.a8c-posts-list .a8c-posts-list-item__featured {
 	text-align: center;
 }
 
@@ -4162,58 +4159,67 @@ table th,
 	border-color: #E0E0E0;
 }
 
-.a8c-posts-list,
-.wp-block-newspack-blocks-homepage-articles article {
+.a8c-posts-list {
 	text-align: center;
 }
 
-.a8c-posts-list__item,
-.wp-block-newspack-blocks-homepage-articles article {
+.a8c-posts-list__item {
 	margin-bottom: 32px;
 	margin-top: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.a8c-posts-list__item,
-	.wp-block-newspack-blocks-homepage-articles article {
+	.a8c-posts-list__item {
 		margin-bottom: 64px;
 		margin-top: 64px;
 	}
 }
 
-.a8c-posts-list__item .a8c-posts-list-item__meta,
-.wp-block-newspack-blocks-homepage-articles article .a8c-posts-list-item__meta {
+.a8c-posts-list__item .a8c-posts-list-item__meta {
 	text-align: center;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-title a {
-	text-decoration: none;
+.a8c-posts-list__listing {
+	text-align: left;
 }
 
-.wp-block-newspack-blocks-homepage-articles article .entry-meta {
-	display: block;
+.a8c-posts-list__listing:not(:last-child) {
+	margin-bottom: 32px;
 }
 
-.a8c-posts-list__listing,
-.wp-block-newspack-blocks-homepage-articles article p {
-	text-align: left;
+@media only screen and (min-width: 560px) {
+	.a8c-posts-list__listing:not(:last-child) {
+		margin-bottom: 64px;
+	}
 }
 
-.a8c-posts-list__listing:not(:last-child),
-.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+/**
+ * Blog Posts (Newspack)
+ */
+.wp-block-newspack-blocks-homepage-articles article {
 	margin-bottom: 32px;
+	margin-top: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.a8c-posts-list__listing:not(:last-child),
-	.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+	.wp-block-newspack-blocks-homepage-articles article {
 		margin-bottom: 64px;
+		margin-top: 64px;
 	}
 }
 
-button[data-load-more-btn] {
-	display: flex;
-	margin: 0 auto;
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+	margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+		margin-bottom: 64px;
+	}
 }
 
 /**