Redhill

redhill/sass/_extra-child-theme.scss

@@ -31,17 +31,17 @@ a {
 
 	&:before {
 		border-top: 1px solid rgba(#fff, 0.5);
-    content: "";
-    left: 0;
-    position: absolute;
-    top: -5px;
-    width: 100%;
+		content: "";
+		left: 0;
+		position: absolute;
+		top: -5px;
+		width: 100%;
 	}
 }
 
 // Header
 #masthead {
-  padding-top: map-deep-get($config-global, "spacing", "vertical");
+	padding-top: map-deep-get($config-global, "spacing", "vertical");
 
 	.custom-logo-link {
 		display: inline-block;
@@ -175,7 +175,7 @@ a {
 		}
 
 		& > div > ul > .menu-item-has-children > a::after {
-				opacity: 0.67;
+			opacity: 0.67;
 		}
 	}
 }
@@ -240,9 +240,9 @@ a {
 
 // Quote block
 .wp-block-quote {
-  p {
-    @include font-family( map-deep-get($config-global, "font", "family", "primary") );
-  }
+	p {
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
+	}
 }
 
 // Table block
@@ -275,20 +275,36 @@ table,
 
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list-item__title {
+.a8c-posts-list-item__title  {
 	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
 	margin-bottom: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};
 
-  a {
-    color: inherit;
+	a {
+		color: inherit;
+
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
+	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+
+	a {
+		color: inherit;
+		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 .entry-content {
@@ -297,27 +313,27 @@ article .entry-header .entry-title,
 
 // Pagination
 .pagination {
-  text-align: center;
-
-  .nav-links > * {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    text-transform: uppercase;
-
-    &.current,
-    &:active,
-    &:focus,
-    &:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:before {
+	text-align: center;
+
+	.nav-links > * {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		text-transform: uppercase;
+
+		&.current,
+		&:active,
+		&:focus,
+		&:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
+
+	svg {
+		fill: currentColor;
+	}
+
+	&:before {
 		background: map-deep-get($config-global, "color", "border", "default");;
 		height: 1px;
 		content: "";
@@ -409,87 +425,87 @@ article .entry-header .entry-title,
 }
 
 .comment-meta {
-  .comment-metadata {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+	.comment-metadata {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 
-    a {
-      color: inherit;
-    }
+		a {
+			color: inherit;
+		}
 
-    a:active,
-    a:focus,
-    a:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
+		a:active,
+		a:focus,
+		a:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
 }
 
 // Comments Navigation
 .comment-navigation {
-    a {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "sm")};
-    text-transform: uppercase;
+	a {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+		text-transform: uppercase;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
 
-  .comments-title + & {
-    display: none;
-  }
+	.comments-title + & {
+		display: none;
+	}
 }
 
 // Widgets
 .widget-area {
-  font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 
-  .widget-title,
-  .widgettitle {
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-    text-transform: uppercase;
+	.widget-title,
+	.widgettitle {
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		text-transform: uppercase;
 
-    &:empty {
-      display: none;
-    }
-  }
+		&:empty {
+			display: none;
+		}
+	}
 
-  @include media(mobile) {
-    padding-top: map-deep-get($config-global, "spacing", "vertical");
-  }
+	@include media(mobile) {
+		padding-top: map-deep-get($config-global, "spacing", "vertical");
+	}
 
-  @include media(laptop) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+	@include media(laptop) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
 
-    & > *:nth-child(2) {
-      margin-top: 0;
-    }
+		& > *:nth-child(2) {
+			margin-top: 0;
+		}
 
-    .widget {
-      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
-    }
-  }
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
+		}
+	}
 }
 
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
+	caption {
+		font-weight: bold;
+	}
 
-  td,
-  th {
-	   text-align: center;
-  }
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -507,43 +523,43 @@ article .entry-header .entry-title,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
-    list-style: none;
-    padding-left: 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
+		list-style: none;
+		padding-left: 0;
+	}
 
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }

redhill/style-editor.css

@@ -306,6 +306,30 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts article {
+	margin-bottom: 96px;
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #CA2017;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #222222;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #666666;
+	font-size: 0.83333rem;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

redhill/style.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 24px;
 }
 
-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,117 @@ 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 a {
+	color: #CA2017;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #222222;
+}
+
+.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: #666666;
+	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-right: 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-right: 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: #222222;
+}
+
+.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-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;
+}
+
 /**
  * Button
  */
@@ -3973,6 +4084,21 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	color: #CA2017;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	margin-top: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus, .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #CA2017;
+}
+
 .entry-content {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
 	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);