aljaz/Journal-ghost
1
0
Fork 0
mirror of https://github.com/aljazceru/Journal-ghost.git synced 2025-12-28 10:34:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic CTA for Journal

Browse Source
This commit is contained in:
Sodbileg Gansukh
2021-07-13 13:08:53 +08:00
parent 4b4b8bace3
commit 6ced988939
5 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

22
assets/css/screen.css
View File

@@ -18,7 +18,10 @@
}
.gh-btn {
padding-right: 1.6rem;
padding-left: 1.6rem;
font-weight: 600;
letter-spacing: -0.02em;
border-radius: 6px;
}
@@ -201,9 +204,14 @@
height: 48px;
padding-left: 1.2rem;
margin-top: 1.6rem;
margin-bottom: 0;
font-size: 1.5rem;
}
.gh-signup-btn {
margin-top: 1.6rem;
}
.gh-featured .gh-card + .gh-card {
margin-top: 2.8rem;
}
@@ -252,7 +260,7 @@
}
.gh-subscribe {
padding: 7.2rem 0 8rem;
padding: 7.2rem 0;
margin: 12rem 0 8rem;
background-color: var(--ghost-accent-color);
}
@@ -284,7 +292,7 @@
max-width: 440px;
height: 56px;
padding: 0 1.6rem;
margin: 4.8rem auto 0;
margin: 4.8rem auto 0.8rem;
font-size: 1.6rem;
color: var(--color-secondary-text);
background-color: var(--color-white);
@@ -312,7 +320,7 @@
margin-right: 0.8rem;
}
.gh-subscribe-btn {
.gh-subscribe-input-btn {
font-size: 1.2rem;
font-weight: 600;
color: var(--ghost-accent-color);
@@ -320,6 +328,12 @@
letter-spacing: 0.01em;
}
.gh-subscribe-btn {
margin-top: 3.2rem;
color: var(--ghost-accent-color);
background-color: #fff;
}
.gh-article:not(.no-image) .gh-article-header > * {
grid-column: wide-start / wide-end;
}
@@ -582,7 +596,7 @@
padding-bottom: 0.5rem;
}
.gh-subscribe-btn {
.gh-subscribe-input-btn {
position: relative;
top: 1px;
}

38
default.hbs
View File

@@ -47,23 +47,33 @@
{{{body}}}
<div class="gh-subscribe">
<div class="gh-outer">
<section class="gh-subscribe-inner">
<h3 class="gh-subscribe-title">Subscribe to {{@site.title}}</h3>
{{^if @member.paid}}
<div class="gh-subscribe">
<div class="gh-outer">
<section class="gh-subscribe-inner">
{{^if @member}}
<h3 class="gh-subscribe-title">Subscribe to {{@site.title}}</h3>
<div class="gh-subscribe-description">Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.</div>
<div class="gh-subscribe-description">Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.</div>
<a class="gh-subscribe-input u-hover" href="#/portal/signup">
<div class="gh-subscribe-input-text">
{{> icons/email}}
jamie@example.com
</div>
<div class="gh-subscribe-btn">Subscribe</div>
</a>
</section>
<a class="gh-subscribe-input" href="#/portal/signup">
<div class="gh-subscribe-input-text">
{{> icons/email}}
jamie@example.com
</div>
<div class="gh-subscribe-input-btn">Subscribe</div>
</a>
{{else}}
<h3 class="gh-subscribe-title">Ready for unlimited access?</h3>
<div class="gh-subscribe-description">Upgrade to a paid account to get full access.</div>
<a class="gh-subscribe-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a>
{{/if}}
</section>
</div>
</div>
</div>
{{/if}}
<footer class="gh-foot gh-outer">
<div class="gh-foot-inner gh-inner">

27
index.hbs
View File

@@ -69,17 +69,24 @@
</section>
</div>
<div class="gh-signup">
<p class="gh-signup-description">Sign up now to get access to the library of members-only issues.</p>
{{^if @member.paid}}
<div class="gh-signup">
{{^if @member}}
<p class="gh-signup-description">Sign up now to get access to the library of members-only issues.</p>
<a class="gh-subscribe-input u-hover" href="#/portal/signup">
<div class="gh-subscribe-input-text">
{{> icons/email}}
jamie@example.com
</div>
<div class="gh-subscribe-btn">Subscribe</div>
</a>
</div>
<a class="gh-subscribe-input" href="#/portal/signup">
<div class="gh-subscribe-input-text">
{{> icons/email}}
jamie@example.com
</div>
<div class="gh-subscribe-input-btn">Subscribe</div>
</a>
{{else}}
<p class="gh-signup-description">Upgrade to a paid account to get full access.</p>
<a class="gh-signup-btn gh-btn gh-primary-btn" href="#/portal/account/plans">Upgrade now</a>
{{/if}}
</div>
{{/if}}
</section>
{{#get "posts" filter="featured:true" limit="all" as |featured|}}