Skip to content

Commit cb33a42

Browse files
committed
Add fade-out effect on the last visible paragraph of access-restricted posts
Uses a CSS mask gradient on the last <p> child of .gh-content, scoped via :has() to only apply when a .gh-post-upgrade-cta sibling is present. This gives readers a visual cue that the article continues beyond the preview, a common pattern on paywalled content (Medium, Substack, NYT…). No HTML changes, no new files.
1 parent 038f9d6 commit cb33a42

3 files changed

Lines changed: 11 additions & 2 deletions

File tree

‎assets/built/screen.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/built/screen.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/screen.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2266,6 +2266,15 @@ unless a heading is the very first element in the post content */
22662266
font-family: var(--font-mono);
22672267
}
22682268

2269+
/* Fade out the last visible paragraph on access-restricted posts so it's
2270+
obvious to the reader that the article continues beyond the preview.
2271+
Scoped via :has() to only apply when the upgrade CTA is present, so
2272+
regular posts are unaffected. */
2273+
.gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
2274+
-webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
2275+
mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
2276+
}
2277+
22692278
/* 16. Cards
22702279
/* ---------------------------------------------------------- */
22712280

0 commit comments

Comments
 (0)