Add (temporary) crowdfunding banners

This commit is contained in:
Badri Sunderarajan 2022-01-30 16:33:49 +05:30
parent 68c98ea9b5
commit a37b1f8fe8
6 changed files with 101 additions and 2 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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.

BIN
assets/images/presspup.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

View file

@ -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"}}

View file

@ -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!