Friendly Business: Add style for posts list block

friendly-business/sass/blocks/_blocks.scss

@@ -1014,4 +1014,149 @@
 	.wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
 		color: #FFF;
 	}
+
+	//! Posts List
+	.a8c-posts-list-item__title,
+	.a8c-posts-list-item__meta {
+		a {
+			text-decoration: none;
+		}
+	}
+
+	.a8c-posts-list__view-all {
+		text-decoration: none;
+	}
+
+	.a8c-posts-list-item__title {
+		a {
+			color: inherit;
+
+			&:hover,
+			&:focus {
+				color: $color__text-hover;
+			}
+		}
+	}
+
+	.a8c-posts-list-item__meta {
+		a {
+			color: inherit;
+
+			&:hover,
+			&:focus {
+				color: $color__link;
+			}
+		}
+
+		.a8c-posts-list-item__edit-link {
+			a {
+				color: $color__background-body;
+			}
+		}
+	}
+
+	.a8c-posts-list {
+		text-align: center;
+	}
+
+	.a8c-posts-list__item:not(:first-child) {
+		margin-top: calc(6 * #{$size__spacing-unit});
+	}
+
+	.a8c-posts-list-item__featured {
+		text-align: center;
+
+		span {
+			background: $color__background-button;
+			color: #fff;
+			display: inline-block;
+			font-size: $font__size-xs;
+			font-weight: bold;
+			line-height: 1;
+			padding: .25rem;
+			text-transform: uppercase;
+			z-index: 1;
+		}
+	}
+
+	.a8c-posts-list-item__post-thumbnail {
+		margin-bottom: $size__vertical-spacing-unit;
+
+		img {
+			display: block;
+		}
+	}
+
+	.a8c-posts-list-item__title {
+		font-size: $font__size-lg;
+		margin: 0;
+
+		@include media(tablet) {
+			font-size: $font__size-xl;
+		}
+	}
+
+	.a8c-posts-list-item__meta {
+		font-size: $font__size-xs;
+	}
+
+	.a8c-posts-list-item__edit-link {
+		@include button-transition;
+		background: $color__background-button;
+		border-radius: 3px;
+		font-family: $font__heading;
+		font-weight: 700;
+		margin-left: calc(.5 * #{$size__spacing-unit});
+		padding: .1rem .4rem;
+
+		&:hover,
+		&:focus {
+			background: $color__background-button-hover;
+			cursor: pointer;
+		}
+	}
+
+	.a8c-posts-list-item__excerpt {
+		@include postContentMaxWidth();
+		margin: 0 auto;
+		text-align: left;
+
+		p {
+			margin: $size__vertical-spacing-unit 0;
+		}
+	}
+
+	.a8c-posts-list__view-all {
+		@include button-transition;
+		background: $color__background-button;
+		border: none;
+		border-radius: 5px;
+		box-sizing: border-box;
+		color: $color__background-body;
+		display: inline-block;
+		font-family: $font__heading;
+		font-size: $font__size-sm;
+		font-weight: 700;
+		line-height: $font__line-height-heading;
+		margin-top: calc(6 * #{$size__spacing-unit} - #{$size__vertical-spacing-unit});
+		outline: none;
+		padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
+		vertical-align: bottom;
+
+		&:hover {
+			background: $color__background-button-hover;
+			cursor: pointer;
+		}
+
+		&:visited {
+			color: $color__background-body;
+			text-decoration: none;
+		}
+
+		&:focus {
+			background: $color__background-button-hover;
+			outline: thin dotted;
+			outline-offset: -4px;
+		}
+	}
 }

friendly-business/style.css

@@ -4343,6 +4343,152 @@ body.page .main-navigation {
   color: #FFF;
 }
 
+.entry .entry-content .a8c-posts-list-item__title a,
+.entry .entry-content .a8c-posts-list-item__meta a {
+  text-decoration: none;
+}
+
+.entry .entry-content .a8c-posts-list__view-all {
+  text-decoration: none;
+}
+
+.entry .entry-content .a8c-posts-list-item__title a {
+  color: inherit;
+}
+
+.entry .entry-content .a8c-posts-list-item__title a:hover, .entry .entry-content .a8c-posts-list-item__title a:focus {
+  color: #4a4a4a;
+}
+
+.entry .entry-content .a8c-posts-list-item__meta a {
+  color: inherit;
+}
+
+.entry .entry-content .a8c-posts-list-item__meta a:hover, .entry .entry-content .a8c-posts-list-item__meta a:focus {
+  color: #20603c;
+}
+
+.entry .entry-content .a8c-posts-list-item__meta .a8c-posts-list-item__edit-link a {
+  color: #fffdf6;
+}
+
+.entry .entry-content .a8c-posts-list {
+  text-align: center;
+}
+
+.entry .entry-content .a8c-posts-list__item:not(:first-child) {
+  margin-top: calc(6 * 1rem);
+}
+
+.entry .entry-content .a8c-posts-list-item__featured {
+  text-align: center;
+}
+
+.entry .entry-content .a8c-posts-list-item__featured span {
+  background: #20603c;
+  color: #fff;
+  display: inline-block;
+  font-size: 0.71111em;
+  font-weight: bold;
+  line-height: 1;
+  padding: .25rem;
+  text-transform: uppercase;
+  z-index: 1;
+}
+
+.entry .entry-content .a8c-posts-list-item__post-thumbnail {
+  margin-bottom: 32px;
+}
+
+.entry .entry-content .a8c-posts-list-item__post-thumbnail img {
+  display: block;
+}
+
+.entry .entry-content .a8c-posts-list-item__title {
+  font-size: 1.6875em;
+  margin: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .a8c-posts-list-item__title {
+    font-size: 2.25em;
+  }
+}
+
+.entry .entry-content .a8c-posts-list-item__meta {
+  font-size: 0.71111em;
+}
+
+.entry .entry-content .a8c-posts-list-item__edit-link {
+  transition: background 150ms ease-in-out;
+  background: #20603c;
+  border-radius: 3px;
+  font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+  font-weight: 700;
+  margin-left: calc(.5 * 1rem);
+  padding: .1rem .4rem;
+}
+
+.entry .entry-content .a8c-posts-list-item__edit-link:hover, .entry .entry-content .a8c-posts-list-item__edit-link:focus {
+  background: #111;
+  cursor: pointer;
+}
+
+.entry .entry-content .a8c-posts-list-item__excerpt {
+  margin: 0 auto;
+  text-align: left;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .a8c-posts-list-item__excerpt {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .a8c-posts-list-item__excerpt {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
+.entry .entry-content .a8c-posts-list-item__excerpt p {
+  margin: 32px 0;
+}
+
+.entry .entry-content .a8c-posts-list__view-all {
+  transition: background 150ms ease-in-out;
+  background: #20603c;
+  border: none;
+  border-radius: 5px;
+  box-sizing: border-box;
+  color: #fffdf6;
+  display: inline-block;
+  font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+  font-size: 0.88889em;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-top: calc(6 * 1rem - 32px);
+  outline: none;
+  padding: 0.76rem 1rem;
+  vertical-align: bottom;
+}
+
+.entry .entry-content .a8c-posts-list__view-all:hover {
+  background: #111;
+  cursor: pointer;
+}
+
+.entry .entry-content .a8c-posts-list__view-all:visited {
+  color: #fffdf6;
+  text-decoration: none;
+}
+
+.entry .entry-content .a8c-posts-list__view-all:focus {
+  background: #111;
+  outline: thin dotted;
+  outline-offset: -4px;
+}
+
 /* Site Builder */
 /* !Site Builder styles */
 .entry .entry-content .site-builder__header {