Add (temporary) crowdfunding banners

assets/css/screen.css

@@ -21,6 +21,7 @@ production stylesheet in assets/built/screen.css
 9.  Error Template
 11. Site Footer
 12. Dark Mode
+13. Extra banners and promos
 
 */
 
@@ -2244,6 +2245,76 @@ html.dark-mode .subscribe-form .success .message-success {
     color: color-mod(var(--color-green) l(+5%) s(-5%));
 }
 
+/* 13. Extra banners and promos
+/* ---------------------------------------------------------- */
+
+/* This section is for extra banners and promos, such as for
+the webinar or crowdfunding campaign. This includes banners
+masquerading as posts on the home page, as well as banners
+of the more traditional variety that sit at the bottom of a
+post.
+
+ */
+
+.gh-banner div {
+	font-family: var(--font-sans-serif);
+	background-color: var(--ghost-accent-color);
+	color: white;
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+	padding: 5rem 2rem;
+	text-align: center;
+	font-size: 1.8rem;
+}
+
+.gh-banner a {
+    color: white;
+}
+
+.gh-banner-title {
+	font-size: 2.1rem;
+}
+
+.gh-banner-img {
+	max-width: min(20rem, 100vw);
+	margin: 2rem auto;
+}
+
+.gh-banner-button, a.gh-banner-button {
+	font-family: var(--font-sans-serif);
+	font-variant: none;
+	letter-spacing: 0;
+	text-transform: initial;
+	color: black;
+
+	text-decoration: none;
+}
+
+.gh-banner-button span {
+	padding: 1rem 3rem;
+	background-color: white;
+	border-radius: 3rem;
+	display: block;
+	margin: 2rem;
+}
+
+.gh-banner p {
+	padding: 2rem;
+}
+
+.post-card-callout {
+	background-color: var(--ghost-accent-color);
+}
+
+.post-card-callout-link {
+	margin: auto;
+	grid-column-start: 2;
+}
+
+.post-card-callout-image {
+	margin-top: 2rem;
+}
+
 /*
 
 Hey! You reached the end.

index.hbs

@@ -39,6 +39,21 @@ into the {body} of the default.hbs template --}}
         <div class="post-feed">
             {{#foreach posts}}
 
+                {{!-- Insert a banner at the 5th position --}}
+                {{#has index="4"}}
+                <div class="post-card post-card-large post-card-callout">
+					<a class="post-card-callout-link" href="https://fund.snipettemag.com" target="_blank">
+			            <div class="post-card-excerpt" style="text-align: center; color: white;">
+							<img src="https://fund.snipettemag.com/img/header.png" class="post-card-callout-image"/>
+			                <p>Snipette in print can become cheaper! But we need 1000 subscribers.</p>
+			                <p class="gh-banner-button">
+								<span>Become one of them</span>
+							</p>
+			            </div>
+			        </a>
+                </div>
+                {{/has}}
+
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                 {{> "post-card"}}
 

post.hbs

@@ -73,6 +73,19 @@ into the {body} tag of the default.hbs template --}}
             {{content}}
         </section>
 
+
+        {{!-- Temporary crowdfunding callout --}}
+        <section class="gh-content gh-canvas gh-banner">
+            <div>
+	            <img src="/assets/images/presspup.png" class="gh-banner-img"/>
+				<p class="gh-banner-title">Snipette in print can become cheaper! But we need your help.</p>
+				<p>If we get enough subscriber pledges, we can switch to <a href="https://computer.howstuffworks.com/offset-printing.htm" target="_blank">offset printing</a> and make Snipette Analog cheaper for everyone. Add your name now—and once we get enough entries, we'll collect the payment and start printing!</p>
+				<a class="gh-banner-button" href="https://fund.snipettemag.com" target="_blank">
+					<span>Add your pledge</span>
+				</a>
+			</div>
+        </section>
+
         {{!--
         <section class="article-comments gh-canvas">
             If you want to embed comments, this is a good place to paste your code!