Browse Source

more css changes to related posts to fit the design guides

Maggie Cabrera 4 years ago
parent
commit
41eb7d1b12

+ 23 - 3
spearhead/assets/sass/block-extends/_related-posts.scss

@@ -1,3 +1,4 @@
+.jp-relatedposts-i2,
 .wp-block-jetpack-related-posts {
 	.jp-related-posts-i2__post {
 		margin: 0 var(--global--spacing-horizontal) 0 0;
@@ -8,10 +9,13 @@
 	}
 
 	.jp-related-posts-i2__post-link {
-		font-weight: 500;
-		font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+		font-weight: var(--global--font-weight);
+		font-size: var(--global--font-size-lg);
 		line-height: var(--global--line-height-body);
 		width: fit-content;
+		a {
+			color: var(--global--color-foreground);
+		}
 	}
 
 	.jp-related-posts-i2__post-date,
@@ -23,15 +27,24 @@
 }
 
 /* The built in Jetpack related posts has different markup */
+
 #jp-relatedposts {
 	.jp-relatedposts-items {
 		p {
 			font-size: var(--global--font-size-base);
 		}
+
+		.jp-relatedposts-post {
+			.jp-relatedposts-post-date,
+			.jp-relatedposts-post-context {
+				opacity: 1;
+				line-height: var(--global--line-height-body);
+			}
+		}
 	}
 
 	h3.jp-relatedposts-headline {
-		font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+		font-size: var(--global--font-size-lg);
 		margin-bottom: var(--global--spacing-vertical);
 		width: 100%;
 
@@ -43,4 +56,11 @@
 			}
 		}
 	}
+	.jp-relatedposts-post-title {
+		font-size: var(--global--font-size-lg);
+		line-height: var(--heading--line-height-h2);
+		a {
+			color: var(--global--color-foreground);
+		}
+	}
 }

+ 28 - 3
spearhead/style-rtl.css

@@ -468,21 +468,31 @@ ul.wp-block-categories,
 	font-weight: var(--global--link-font-weight);
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
 	margin: 0 0 0 var(--global--spacing-horizontal);
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__row,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__row {
 	margin: auto;
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post-link,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
-	font-weight: 500;
-	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	font-weight: var(--global--font-weight);
+	font-size: var(--global--font-size-lg);
 	line-height: var(--global--line-height-body);
 	width: fit-content;
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post-link a,
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link a {
+	color: var(--global--color-foreground);
+}
+
+.jp-relatedposts-i2 .jp-related-posts-i2__post-date,
+.jp-relatedposts-i2 .jp-related-posts-i2__post-context,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
 	font-family: var(--global--font-primary);
@@ -495,8 +505,14 @@ ul.wp-block-categories,
 	font-size: var(--global--font-size-base);
 }
 
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
+	opacity: 1;
+	line-height: var(--global--line-height-body);
+}
+
 #jp-relatedposts h3.jp-relatedposts-headline {
-	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	font-size: var(--global--font-size-lg);
 	margin-bottom: var(--global--spacing-vertical);
 	width: 100%;
 }
@@ -510,6 +526,15 @@ ul.wp-block-categories,
 	margin-bottom: var(--global--spacing-vertical);
 }
 
+#jp-relatedposts .jp-relatedposts-post-title {
+	font-size: var(--global--font-size-lg);
+	line-height: var(--heading--line-height-h2);
+}
+
+#jp-relatedposts .jp-relatedposts-post-title a {
+	color: var(--global--color-foreground);
+}
+
 .wp-block-newspack-blocks-homepage-articles.wpnbha article,
 .wp-block-a8c-blog-posts.wpnbha article {
 	margin: 0 auto;

+ 28 - 3
spearhead/style.css

@@ -468,21 +468,31 @@ ul.wp-block-categories,
 	font-weight: var(--global--link-font-weight);
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
 	margin: 0 var(--global--spacing-horizontal) 0 0;
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__row,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__row {
 	margin: auto;
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post-link,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
-	font-weight: 500;
-	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	font-weight: var(--global--font-weight);
+	font-size: var(--global--font-size-lg);
 	line-height: var(--global--line-height-body);
 	width: fit-content;
 }
 
+.jp-relatedposts-i2 .jp-related-posts-i2__post-link a,
+.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link a {
+	color: var(--global--color-foreground);
+}
+
+.jp-relatedposts-i2 .jp-related-posts-i2__post-date,
+.jp-relatedposts-i2 .jp-related-posts-i2__post-context,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
 	font-family: var(--global--font-primary);
@@ -495,8 +505,14 @@ ul.wp-block-categories,
 	font-size: var(--global--font-size-base);
 }
 
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
+	opacity: 1;
+	line-height: var(--global--line-height-body);
+}
+
 #jp-relatedposts h3.jp-relatedposts-headline {
-	font-size: var(--wp--present--font-size--medium, --global--font-size-md);
+	font-size: var(--global--font-size-lg);
 	margin-bottom: var(--global--spacing-vertical);
 	width: 100%;
 }
@@ -510,6 +526,15 @@ ul.wp-block-categories,
 	margin-bottom: var(--global--spacing-vertical);
 }
 
+#jp-relatedposts .jp-relatedposts-post-title {
+	font-size: var(--global--font-size-lg);
+	line-height: var(--heading--line-height-h2);
+}
+
+#jp-relatedposts .jp-relatedposts-post-title a {
+	color: var(--global--color-foreground);
+}
+
 .wp-block-newspack-blocks-homepage-articles.wpnbha article,
 .wp-block-a8c-blog-posts.wpnbha article {
 	margin: 0 auto;

File diff suppressed because it is too large
+ 0 - 0
spearhead/style.css.map


Some files were not shown because too many files changed in this diff