diff --git a/newspack-theme/sass/site/primary/_posts-and-pages.scss b/newspack-theme/sass/site/primary/_posts-and-pages.scss index c22243bcd..db2cb5e8a 100755 --- 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 index cf1a46981..a3a5e46d3 100644 --- a/newspack-theme/template-parts/post/large-featured-image.php +++ b/newspack-theme/template-parts/post/large-featured-image.php @@ -33,12 +33,11 @@ - - - -
- + +
+ +