From b3749cb70ee3d133f6763e010cb4063ec6582e82 Mon Sep 17 00:00:00 2001
From: Bastien <57838962+bst1n@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:47:49 +0100
Subject: [PATCH 1/2] Create content-cta

I create the content-cta file so that I can add the fadeout class to it.
---
 partials/content-cta | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 partials/content-cta

diff --git a/partials/content-cta b/partials/content-cta
new file mode 100644
index 00000000..f4b2e3be
--- /dev/null
+++ b/partials/content-cta
@@ -0,0 +1,24 @@
+{{{html}}}
+<div class="fadeout">
+    <div class="fadeout-content">
+        {{{html}}}
+    </div>
+</div>
+    <div class="gh-post-upgrade-cta-content" style="background-color: {{@site.accent_color}}">
+        {{#has visibility="paid"}}
+            <h2>This content is for paying subscribers only</h2>
+        {{/has}}
+        {{#has visibility="members"}}
+            <h2>This content is for subscribers only</h2>
+        {{/has}}
+        {{#has visibility="tiers"}}
+            <h2>This content is for subscribers on the following tiers only: {{tiers}}</h2>
+        {{/has}}
+        {{#if @member}}
+            <a class="gh-btn" data-portal="account/plans" href="#/portal/account/plans" style="color:{{@site.accent_color}}">Upgrade your account</a>
+        {{else}}
+            <a class="gh-btn" data-portal="signup" href="#/portal/signup" style="color:{{@site.accent_color}}">Subscribe</a>
+            <p><small>Already member? <a data-portal="signin" href="#/portal/signin">Sign in</a></small></p>
+        {{/if}}
+    </div>
+</aside>

From 4f5de346a77d15ca0ca3a3f877227da41f0b7811 Mon Sep 17 00:00:00 2001
From: Bastien <57838962+bst1n@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:49:11 +0100
Subject: [PATCH 2/2] Update screen.css

---
 assets/css/screen.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 769a44a7..b4185bd6 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -2262,6 +2262,20 @@ unless a heading is the very first element in the post content */
     font-family: var(--font-mono);
 }
 
+/* Public Preview Fading Effect for Last Paragraph */
+.fadeout-content p:last-child {
+    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
+    mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
+    margin-bottom: 1.5em; /* Ensure consistent spacing */
+}
+
+/* Reset other paragraphs to prevent unintended effects */
+.fadeout-content p:not(:last-child) {
+    -webkit-mask-image: none;
+    mask-image: none;
+    margin-bottom: 1.5em; /* Ensure normal paragraph spacing */
+}
+  
 /* 16. Cards
 /* ---------------------------------------------------------- */