fix: improve appearance of caption with beside featured image setting (…

…#882)
Automattic · Apr 27, 2020 · 1da6e44 · 1da6e44
1 parent df53d07
commit 1da6e44
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/newspack-theme/sass/site/primary/_posts-and-pages.scss b/newspack-theme/sass/site/primary/_posts-and-pages.scss
@@ -540,7 +540,7 @@ body.page {
 }
 
 .featured-image-behind + figcaption,
-.featured-image-beside + figcaption {
+.featured-image-beside figcaption {
 	margin: #{0.25 * $size__spacing-unit} auto 0;
 	width: 1200px;
 	max-width: 100%;
@@ -648,6 +648,41 @@ body.page {
 		.entry-title {
 			font-size: $font__size-xxl;
 		}
+
+		figcaption {
+			bottom: 0;
+			color: #fff;
+			left: 50%;
+			position: absolute;
+			width: 50%;
+
+			a,
+			a:visited {
+				color: #fff;
+				text-decoration: underline;
+			}
+
+			a:hover {
+				text-decoration: none;
+			}
+
+			> span {
+				display: inline-block;
+				max-width: 780px;
+				padding: #{2 * $size__spacing-unit} $size__spacing-unit $size__spacing-unit;
+				position: relative;
+			}
+
+			&::before {
+				background-image: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0.5 ) 50% );
+				bottom: 0;
+				content: '';
+				height: 100%;
+				left: 0;
+				position: absolute;
+				width: 100%;
+			}
+		}
 	}
 }
 

diff --git a/newspack-theme/template-parts/post/large-featured-image.php b/newspack-theme/template-parts/post/large-featured-image.php
@@ -33,12 +33,11 @@
 		</div><!-- .wrapper -->
 
 		<?php newspack_post_thumbnail(); ?>
-	</div><!-- .featured-image-behind -->
-
-	<?php if ( $caption ) : ?>
-		<figcaption><?php echo wp_kses_post( $caption ); ?></figcaption>
-	<?php endif; ?>
 
+		<?php if ( $caption ) : ?>
+			<figcaption><span><?php echo wp_kses_post( $caption ); ?></span></figcaption>
+		<?php endif; ?>
+	</div><!-- .featured-image-behind -->
 <?php else : ?>
 
 	<header class="entry-header">