fix: make third level headings a unique size on mobile (#1816)

Automattic · May 27, 2022 · 265a8a7 · 265a8a7
1 parent 8af5709
commit 265a8a7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss
@@ -72,7 +72,11 @@ h2 {
 }
 
 h3 {
-	font-size: $font__size-lg;
+	font-size: calc( 1em * 1.3 );
+
+	@include media( tablet ) {
+		font-size: $font__size-lg;
+	}
 }
 
 h4 {

diff --git a/newspack-theme/sass/typography/_headings.scss b/newspack-theme/sass/typography/_headings.scss
@@ -126,11 +126,18 @@ h2 {
 .comments-title,
 .archive .entry-title,
 .search .entry-title,
-.blog .entry-title,
-h3 {
+.blog .entry-title {
 	font-size: $font__size-lg;
 }
 
+h3 {
+	font-size: calc( 1em * 1.3 );
+
+	@include media( tablet ) {
+		font-size: $font__size-lg;
+	}
+}
+
 .site-title,
 .site-description,
 .comment-author .fn,