Add (temporary) crowdfunding banners
This commit is contained in:
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
|
@ -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
BIN
assets/images/presspup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 64 KiB |
15
index.hbs
15
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"}}
|
||||
|
||||
|
|
13
post.hbs
13
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!
|
||||
|
|
Loading…
Reference in a new issue