Fixes typography issues with Related Posts module (#10586)

* Fixes typography issues with Related Posts module * Adds typographic tweaks for grid, list, thumbnail, show-date, show-context settings * Revert font-size change to keep hidden text hidden
Automattic · Nov 13, 2018 · 05edddd · 05edddd
1 parent 8d07680
commit 05edddd
Showing 1 changed file with 85 additions and 15 deletions.
diff --git a/modules/theme-tools/compat/twentynineteen.css b/modules/theme-tools/compat/twentynineteen.css
@@ -67,7 +67,7 @@
 /**
  * Responsive Videos
  */
-.hentry .jetpack-video-wrapper {
+.entry .jetpack-video-wrapper {
 	margin-bottom: 1.75em;
 }
 
@@ -123,8 +123,8 @@
 	padding-bottom: 1.125em;
 }
 
-.hentry div.sharedaddy h3.sd-title,
-.hentry h3.sd-title {
+.entry div.sharedaddy h3.sd-title,
+.entry h3.sd-title {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1.125em;
 	font-weight: 700;
@@ -135,8 +135,8 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
-.hentry div.sharedaddy h3.sd-title:before,
-.hentry h3.sd-title:before {
+.entry div.sharedaddy h3.sd-title:before,
+.entry h3.sd-title:before {
 	background: #767676;
 	border-top: none;
 	content: "\020";
@@ -160,19 +160,89 @@
 	margin-bottom: -0.625em !important;
 }
 
-.hentry #sharing_email .sharing_send,
-.hentry .sd-content ul li .option a.share-ustom,
-.hentry .sd-content ul li a.sd-button,
-.hentry .sd-content ul li.advanced a.share-more,
-.hentry .sd-content ul li.preview-item div.option.option-smart-off a,
-.hentry .sd-social-icon .sd-content ul li a.sd-button,
-.hentry .sd-social-icon-text .sd-content ul li a.sd-button,
-.hentry .sd-social-official .sd-content > ul > li .digg_button > a,
-.hentry .sd-social-official .sd-content > ul > li > a.sd-button,
-.hentry .sd-social-text .sd-content ul li a.sd-button {
+.entry #sharing_email .sharing_send,
+.entry .sd-content ul li .option a.share-ustom,
+.entry .sd-content ul li a.sd-button,
+.entry .sd-content ul li.advanced a.share-more,
+.entry .sd-content ul li.preview-item div.option.option-smart-off a,
+.entry .sd-social-icon .sd-content ul li a.sd-button,
+.entry .sd-social-icon-text .sd-content ul li a.sd-button,
+.entry .sd-social-official .sd-content > ul > li .digg_button > a,
+.entry .sd-social-official .sd-content > ul > li > a.sd-button,
+.entry .sd-social-text .sd-content ul li a.sd-button {
 	box-shadow: none;
 }
 
+/**
+ * Related Posts
+ */
+
+.entry #jp-relatedposts h3.jp-relatedposts-headline {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1.125em;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	line-height: 1.2;
+	margin-bottom: 0.5em;
+	margin-top: 0.5em;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.entry #jp-relatedposts h3.jp-relatedposts-headline:before {
+	background: #767676;
+	border-top: none;
+	content: "\020";
+	display: block;
+	height: 2px;
+	margin: 1rem 0;
+	width: 1em;
+	min-width: inherit;
+}
+
+.entry #jp-relatedposts h3.jp-relatedposts-headline em:before {
+	display: none;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
+	opacity: 1;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title,
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1em;
+	letter-spacing: -0.02em;
+	line-height: 1.2;
+	margin-bottom: 0.5em;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title a,
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span a {
+	font-weight: 700;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title,
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-excerpt {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context,
+.entry #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.71111em;
+	font-weight: 500;
+}
+
+.entry #jp-relatedposts .jp-relatedposts-items p,
+.entry #jp-relatedposts .jp-relatedposts-items-visual
+.entry h4.jp-relatedposts-post-title {
+	letter-spacing: normal;
+}
+
 
 /**
  * Stats