engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

4-tier pricing (14/28/42% off yearly plans), fix word wrapping

Browse source 
Pricing: Monthly $14, 1yr $144 (14% off), 2yr $242 (28% off),
3yr $292 (42% off best value). Fixes incorrect "two months free"
claim. Responsive 1-col mobile, 2x2 tablet, 4-col wide.

Anti-wrap: white-space nowrap on nav links, buttons, footer links,
pricing banners/amounts/descriptions. nbsp on multi-word link text
like "My Account" and "Open a Shop".
This commit is contained in:
russell@unturf.com 2026-03-06 10:43:06 -05:00
parent d8425867c5
commit 4de23cd82c
3 changed files with 46 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

3
common.css
View file

@ -237,6 +237,7 @@ a.mps-button {
padding-bottom: 14px; padding-bottom: 14px;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
white-space: nowrap;
} }
a.product-edit-button { a.product-edit-button {
@ -728,6 +729,7 @@ textarea.markup-editor-textarea {
color: #0b0b0b; color: #0b0b0b;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
white-space: nowrap;
} }
.mps-footer-links { .mps-footer-links {
@ -741,6 +743,7 @@ textarea.markup-editor-textarea {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
white-space: nowrap;
} }
.mps-footer-links a:hover { .mps-footer-links a:hover {

30
index.html
View file

@ -40,8 +40,8 @@ Open source & public domain — no moat, no castle, just infrastructure
<section class="middle"></section> <section class="middle"></section>
<section class="log-in"> <section class="log-in">
<a href="https://blog.makepostsell.com/">Blog</a> <a href="https://blog.makepostsell.com/">Blog</a>
<a href="https://my.makepostsell.com/u/settings">My Account</a> <a href="https://my.makepostsell.com/u/settings" class="avoid-wrap">My&nbsp;Account</a>
<a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta">Open a Shop</a> <a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta avoid-wrap">Open&nbsp;a&nbsp;Shop</a>
</section> </section>
</section> </section>
</section> </section>
@ -65,7 +65,7 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
<!-- ======== PRICING ======== --> <!-- ======== PRICING ======== -->
<section class="landing-section landing-section-alt"> <section class="landing-section landing-section-alt">
<div class="one-column"> <div class="one-column landing-pricing-container">
<h2 class="landing-section-title">Simple pricing</h2> <h2 class="landing-section-title">Simple pricing</h2>
<div class="landing-pricing"> <div class="landing-pricing">
@ -74,10 +74,20 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
<span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span> <span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span>
<span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span> <span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span>
</div> </div>
<div class="landing-pricing-card">
<div class="landing-pricing-banner">1 Year &#8212; Save 14%</div>
<span class="landing-pricing-amount">$144<span class="landing-pricing-period">/year</span></span>
<span class="landing-pricing-desc">$12/month billed annually.</span>
</div>
<div class="landing-pricing-card">
<div class="landing-pricing-banner">2 Year &#8212; Save 28%</div>
<span class="landing-pricing-amount">$242<span class="landing-pricing-period">/2 years</span></span>
<span class="landing-pricing-desc">~$10/month billed every 2 years.</span>
</div>
<div class="landing-pricing-card landing-pricing-featured"> <div class="landing-pricing-card landing-pricing-featured">
<div class="landing-pricing-banner landing-pricing-banner-featured">Best value &#8212; save 42%</div> <div class="landing-pricing-banner landing-pricing-banner-featured">Best Value &#8212; Save 42%</div>
<span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span> <span class="landing-pricing-amount">$292<span class="landing-pricing-period">/3 years</span></span>
<span class="landing-pricing-desc">Two months free. Same features.</span> <span class="landing-pricing-desc">~$8/month billed every 3 years.</span>
</div> </div>
</div> </div>
@ -429,16 +439,16 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
<div class="mps-footer-group"> <div class="mps-footer-group">
<span class="mps-footer-group-title">Account</span> <span class="mps-footer-group-title">Account</span>
<nav class="mps-footer-links"> <nav class="mps-footer-links">
<a href="https://my.makepostsell.com/u/settings">My Account</a> <a href="https://my.makepostsell.com/u/settings">My&nbsp;Account</a>
<a href="https://my.makepostsell.com/s/new">Open a Shop</a> <a href="https://my.makepostsell.com/s/new">Open&nbsp;a&nbsp;Shop</a>
</nav> </nav>
</div> </div>
</div> </div>
<div class="mps-footer-ctas"> <div class="mps-footer-ctas">
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ Open a Shop</a> <a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button avoid-wrap">+&nbsp;Open&nbsp;a&nbsp;Shop</a>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Contribute Code</a> <a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button avoid-wrap">&#x2710;&nbsp;Contribute&nbsp;Code</a>
</div> </div>
<div class="mps-footer-bottom"> <div class="mps-footer-bottom">

27
landing.css
View file

@ -41,6 +41,7 @@
color: #515151; color: #515151;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
white-space: nowrap;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
@ -191,10 +192,8 @@ a.mps-button.landing-cta-large {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px; gap: 20px;
margin: 32px 0; margin: 32px auto;
max-width: 600px; max-width: 900px;
margin-left: auto;
margin-right: auto;
} }
.landing-pricing-card { .landing-pricing-card {
@ -221,6 +220,7 @@ a.mps-button.landing-cta-large {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
padding: 10px 24px; padding: 10px 24px;
white-space: nowrap;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
@ -242,6 +242,7 @@ a.mps-button.landing-cta-large {
display: block; display: block;
line-height: 1; line-height: 1;
margin: 28px 0 8px; margin: 28px 0 8px;
white-space: nowrap;
} }
.landing-pricing-period { .landing-pricing-period {
@ -255,6 +256,7 @@ a.mps-button.landing-cta-large {
color: #666; color: #666;
display: block; display: block;
padding: 0 24px 28px; padding: 0 24px 28px;
white-space: nowrap;
} }
/* ---- Cards (override common.css for landing) ---- */ /* ---- Cards (override common.css for landing) ---- */
@ -432,6 +434,10 @@ a.mps-button.landing-cta-large {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.landing-pricing-amount {
font-size: 2.4em;
}
.landing-two-lists { .landing-two-lists {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -449,4 +455,17 @@ a.mps-button.landing-cta-large {
.landing-section { .landing-section {
padding: 100px 40px; padding: 100px 40px;
} }
.landing-pricing-container {
max-width: 1100px;
}
.landing-pricing {
grid-template-columns: repeat(4, 1fr);
max-width: 1100px;
}
.landing-pricing-amount {
font-size: 2.4em;
}
} }