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

Update styleguide with landing page components: pricing, step cards, protection lists, pill CTAs, alternating sections

Browse source
This commit is contained in:
russell@unturf.com 2026-03-06 07:49:45 -05:00
parent 579ee62873
commit 716bfd4577
1 changed files with 249 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

335
styleguide.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="mps.css">
<link rel="stylesheet" href="landing.css">
<style>
body { color: #515151; background-color: #F9F9FA; }
@ -81,6 +82,12 @@
border-radius: 8px;
margin-bottom: 8px;
}
.sg-demo-alt {
background: #F9F9FA;
}
.sg-demo-dark {
background: #f0f6ff;
}
</style>
</head>
@ -97,12 +104,12 @@ Style Guide &#8212; Make Post Sell Design System
<section class="nav-grid">
<section class="nav">
<section class="logo">
<br>
<a href="/"><img class="logo" src="/static/mps.png" /></a>
</section>
<section class="middle"></section>
<section class="log-in" style="margin: 30px;">
<a href="/">Home</a> &nbsp; &nbsp; | &nbsp; &nbsp;
<section class="log-in">
<a href="/">Home</a>
<span class="nav-sep">|</span>
<a href="/styleguide.html">Style Guide</a>
</section>
</section>
@ -213,6 +220,13 @@ Style Guide &#8212; Make Post Sell Design System
<div class="sg-swatch-hex">#515151</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #666666;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Desc</div>
<div class="sg-swatch-hex">#666666</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #777;"></div>
<div class="sg-swatch-info">
@ -251,6 +265,13 @@ Style Guide &#8212; Make Post Sell Design System
<div class="sg-swatch-hex">#e0e0e0</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #eeeeee;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Border Light</div>
<div class="sg-swatch-hex">#eeeeee</div>
</div>
</div>
</div>
</div>
</div>
@ -259,24 +280,41 @@ Style Guide &#8212; Make Post Sell Design System
<div class="sg-section">
<div class="sg-section-title">Typography</div>
<div class="sg-demo">
<span class="huge-bold-dark">Huge Bold Dark</span>
<br/><br/>
<span class="big-bold-dark">Big Bold Dark</span>
<br/><br/>
<span class="bold-dark">Bold Dark</span>
<br/><br/>
Body text in #515151 on Helvetica.
<br/><br/>
<a href="#">Link style &#8212; green #a3c765, weight 600</a>
</div>
<div class="sg-code">font-family: helvetica;
.huge-bold-dark &#8212; 2.7em, weight 550, color #0b0b0b
<div class="sg-subsection">
<div class="sg-label">App Typography (common.css)</div>
<div class="sg-demo">
<span class="huge-bold-dark">Huge Bold Dark</span>
<br/><br/>
<span class="big-bold-dark">Big Bold Dark</span>
<br/><br/>
<span class="bold-dark">Bold Dark</span>
<br/><br/>
Body text in #515151 on Helvetica.
<br/><br/>
<a href="#">Link style &#8212; green #a3c765, weight 600</a>
</div>
<div class="sg-code">.huge-bold-dark &#8212; 2.7em, weight 550, color #0b0b0b
.big-bold-dark &#8212; 1.4em, weight 550, color #0b0b0b
.bold-dark &#8212; weight 550, color #0b0b0b
body text &#8212; default size, color #515151
a (links) &#8212; color #a3c765, weight 600</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Landing Typography (landing.css)</div>
<div class="sg-demo">
<h1 class="landing-hero-title" style="white-space: normal;">Hero Title</h1>
<p class="landing-hero-subtitle">Hero subtitle line</p>
<h2 class="landing-section-title">Section Title</h2>
<p class="landing-body">Landing body text with <a href="#">inline link</a> and proper line-height.</p>
<p class="landing-muted">Muted caption text, centered.</p>
</div>
<div class="sg-code">.landing-hero-title &#8212; 2.4em mobile / 4.5em desktop, weight 700
.landing-hero-subtitle &#8212; 1.25em, weight 500
.landing-section-title &#8212; 2em, weight 700, centered
.landing-body &#8212; 1.05em, line-height 1.7, color #515151
.landing-muted &#8212; 14px, color #999, centered</div>
</div>
</div>
<!-- ======== BUTTONS ======== -->
@ -284,59 +322,204 @@ a (links) &#8212; color #a3c765, weight 600</div>
<div class="sg-section-title">Buttons</div>
<div class="sg-subsection">
<div class="sg-label">Primary CTA (Green)</div>
<div class="sg-label">App Buttons (common.css)</div>
<div class="sg-demo">
<a href="#" class="shop-new-button mps-button">&#65291; New Shop</a>
<a href="#" class="shop-new-button mps-button">&#x2710; Source Code</a>
</div>
<div class="sg-code">&lt;a href="#" class="shop-new-button mps-button"&gt;&#65291; New Shop&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Secondary (Blue)</div>
<div class="sg-demo">
<a href="#" class="product-edit-button mps-button">&#128366; PyPi</a>
<a href="#" class="product-edit-button mps-button">&#128366; Blog</a>
</div>
<div class="sg-code">&lt;a href="#" class="product-edit-button mps-button"&gt;&#128366; PyPi&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Purple (Source / Code)</div>
<div class="sg-demo">
<a href="#" class="source-button mps-button">&#128366; PyPi</a>
<a href="#" class="shop-new-button mps-button">+ New Shop</a>
<a href="#" class="product-edit-button mps-button">&#128366; Edit</a>
<a href="#" class="source-button mps-button">&#x2710; Source Code</a>
</div>
<div class="sg-code">&lt;a href="#" class="source-button mps-button"&gt;&#x2710; Source Code&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Navy (Log Out / Activate)</div>
<div class="sg-demo">
<a href="#" class="log-out-button mps-button">Log Out</a>
<a href="#" class="cart-activate-button mps-button">Activate</a>
</div>
<div class="sg-code">&lt;a href="#" class="log-out-button mps-button"&gt;Log Out&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Danger (Delete)</div>
<div class="sg-demo">
<a href="#" class="cart-delete-button mps-button">Delete</a>
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
</div>
<div class="sg-code">&lt;a href="#" class="cart-delete-button mps-button"&gt;Delete&lt;/a&gt;</div>
<div class="sg-code">Green CTA: .shop-new-button.mps-button
Blue: .product-edit-button.mps-button
Purple: .source-button.mps-button
Navy: .log-out-button.mps-button
Danger: .cart-delete-button.mps-button
Outline: .shop-switch-button.mps-button
border-radius: 4px, min-width: 250px</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Outline (Switch / Public)</div>
<div class="sg-label">Landing Page CTAs (landing.css)</div>
<div class="sg-demo">
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
<a href="#" class="cart-public-button mps-button"><span class="lock">&#128274;</span> Public</a>
<div class="landing-cta-group">
<a href="#" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
<a href="#" class="source-button mps-button landing-cta">&#x2710; Source Code</a>
</div>
</div>
<div class="sg-code">&lt;a href="#" class="shop-switch-button mps-button"&gt;Switch Shop&lt;/a&gt;</div>
<div class="sg-code">Add .landing-cta for pill shape + hover lift
border-radius: 50px, padding: 16px 32px
box-shadow: 0 2px 8px rgba(0,0,0,0.08)
hover: translateY(-1px), deeper shadow
.landing-cta-large &#8212; 18px font, 48px horizontal padding</div>
</div>
</div>
<!-- ======== LANDING SECTIONS ======== -->
<div class="sg-section">
<div class="sg-section-title">Landing Sections</div>
<div class="sg-subsection">
<div class="sg-label">Alternating sections (no HR dividers)</div>
<div class="sg-demo" style="padding: 0; overflow: hidden;">
<div style="padding: 24px; background: #FFFFFF;">
<h2 class="landing-section-title" style="font-size: 1.2em;">White section (.landing-section)</h2>
</div>
<div style="padding: 24px; background: #F9F9FA;">
<h2 class="landing-section-title" style="font-size: 1.2em;">Alt section (.landing-section-alt)</h2>
</div>
<div style="padding: 24px; background: #FFFFFF;">
<h2 class="landing-section-title" style="font-size: 1.2em;">White section</h2>
</div>
</div>
<div class="sg-code">&lt;section class="landing-section"&gt;...&lt;/section&gt;
&lt;section class="landing-section landing-section-alt"&gt;...&lt;/section&gt;
.landing-section &#8212; padding: 64px mobile, 80px tablet, 100px desktop
.landing-section-alt &#8212; background: #F9F9FA
.landing-final-cta &#8212; gradient: #f8faf5 to #f0f6ff</div>
</div>
</div>
<!-- ======== PRICING CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Pricing Cards</div>
<div class="sg-demo sg-demo-alt">
<div class="landing-pricing" style="max-width: 500px;">
<div class="landing-pricing-card">
<span class="landing-pricing-icon">&#128197;</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>
</div>
<div class="landing-pricing-card landing-pricing-featured">
<span class="landing-pricing-badge">Best value</span>
<span class="landing-pricing-icon">&#127775;</span>
<span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
<span class="landing-pricing-desc">Save 42%. Two months free.</span>
</div>
</div>
</div>
<div class="sg-code">.landing-pricing-card &#8212; white bg, 1px border, 16px radius
.landing-pricing-featured &#8212; 2px green border, green shadow
.landing-pricing-badge &#8212; absolute pill, green bg, white text
.landing-pricing-amount &#8212; 3em, weight 700
.landing-pricing-period &#8212; 0.35em, color #999</div>
</div>
<!-- ======== FEATURE CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Feature Cards</div>
<div class="sg-demo">
<div class="mps-card-grid" style="max-width: 500px;">
<div class="mps-card">
<span class="mps-card-icon">&#128176;</span>
<span class="mps-card-title">Card Title</span>
<span class="mps-card-desc">Card description with details about the feature goes here.</span>
</div>
<div class="mps-card">
<span class="mps-card-icon">&#128200;</span>
<span class="mps-card-title"><a href="#">Linked Card Title</a></span>
<span class="mps-card-desc">Cards with links in the title use green hover.</span>
</div>
</div>
</div>
<div class="sg-code">&lt;div class="mps-card-grid"&gt;
&lt;div class="mps-card"&gt;
&lt;span class="mps-card-icon"&gt;...&lt;/span&gt;
&lt;span class="mps-card-title"&gt;Title&lt;/span&gt;
&lt;span class="mps-card-desc"&gt;Description&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
Landing: 12px radius, subtle shadow, hover lift
Grid: 1 col mobile, 2 col tablet+, .three-col for 3</div>
</div>
<!-- ======== STEP CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Step Cards</div>
<div class="sg-demo">
<div class="mps-card-grid three-col" style="max-width: 600px;">
<div class="mps-card landing-step-card">
<span class="landing-step-number">1</span>
<span class="mps-card-title">First Step</span>
<span class="mps-card-desc">Description of the first step.</span>
</div>
<div class="mps-card landing-step-card">
<span class="landing-step-number">2</span>
<span class="mps-card-title">Second Step</span>
<span class="mps-card-desc">Description of the second step.</span>
</div>
<div class="mps-card landing-step-card">
<span class="landing-step-number">3</span>
<span class="mps-card-title">Third Step</span>
<span class="mps-card-desc">Description of the third step.</span>
</div>
</div>
</div>
<div class="sg-code">.landing-step-card &#8212; centered text
.landing-step-number &#8212; 44px green circle, white number, weight 700</div>
</div>
<!-- ======== PROTECTION LISTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Protection Lists</div>
<div class="sg-demo">
<div class="landing-two-lists" style="max-width: 600px;">
<div class="landing-list-card landing-list-bad">
<ul>
<li><span class="landing-x">&#x274C;</span> Negative item</li>
<li><span class="landing-x">&#x274C;</span> Another negative</li>
</ul>
</div>
<div class="landing-list-card landing-list-good">
<ul>
<li><span class="landing-check">&#x2714;</span> <b>Positive item</b> <span class="landing-list-detail">&#8212; Details</span></li>
<li><span class="landing-check">&#x2714;</span> <b>Another positive</b> <span class="landing-list-detail">&#8212; More details</span></li>
</ul>
</div>
</div>
</div>
<div class="sg-code">.landing-list-bad &#8212; bg #fef2f2, border #f5d5d5
.landing-list-good &#8212; bg #f0f9e8, border #d5e8c0
.landing-x &#8212; color #c77765
.landing-check &#8212; color #678731
.landing-list-detail &#8212; color #666
Grid: stacked mobile, 2 col at 800px+</div>
</div>
<!-- ======== COMPARISON CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Comparison Cards</div>
<div class="sg-demo">
<div class="mps-comparison" style="max-width: 500px;">
<div class="mps-comparison-card marketplace">
<span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
<span class="mps-comparison-label">Marketplace (30% commission)</span>
</div>
<div class="mps-comparison-card mps">
<span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
<span class="mps-comparison-label">Make Post Sell (0% commission)</span>
</div>
</div>
</div>
<div class="sg-code">.mps-comparison-card.marketplace &#8212; bg #f8d7da, border #c77765
.mps-comparison-card.mps &#8212; bg #e8f5d4, border #678731
.mps-comparison-amount &#8212; 2.4em, weight 600
Landing: 16px radius, 32px padding</div>
</div>
<!-- ======== RIBBON ======== -->
<div class="sg-section">
<div class="sg-section-title">Ribbons</div>
@ -405,34 +588,7 @@ Background: #FFFFFF</div>
<div class="alert-message">Danger alert &#8212; red background #f8d7da</div>
</div>
</div>
<div class="sg-code">&lt;div class="alert alert-success"&gt;
&lt;div class="alert-message"&gt;Message&lt;/div&gt;
&lt;/div&gt;
Variants: alert-success, alert-info, alert-warning, alert-danger</div>
</div>
<!-- ======== LISTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Check &amp; Cross Lists</div>
<div class="sg-demo">
<ul style="list-style-type: none; padding-left: 0;">
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Positive item</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Description here</span></span>
</li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Another positive</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">More details</span></span>
</li>
</ul>
<ul style="list-style-type: none; padding-left: 0;">
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Negative item we protect against</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Another negative item</li>
</ul>
</div>
<div class="sg-code">Checkmark: color #678731, &#x2714;
Cross: color #c77765, &#x274C;
list-style-type: none</div>
<div class="sg-code">Variants: alert-success, alert-info, alert-warning, alert-danger</div>
</div>
<!-- ======== LAYOUT ======== -->
@ -466,6 +622,13 @@ Desktop (800px+): 3 columns (logo | middle | log-in)</div>
@media (min-width: 800px) &#8212; tablet/desktop
@media (min-width: 1200px) &#8212; wide desktop</div>
</div>
<div class="sg-subsection">
<div class="sg-label">CSS Files</div>
<div class="sg-code">common.css &#8212; shared app styles (layout, buttons, nav, wells, footer, cards)
mps.css &#8212; message ribbon, alerts
landing.css &#8212; landing page (hero, sections, pricing, CTAs, lists, steps)</div>
</div>
</div>
<!-- ======== FOOTER ======== -->
@ -536,7 +699,7 @@ Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)</div>
</div>
<div class="mps-footer-ctas">
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">&#65291; New Shop</a>
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ New Shop</a>
<a href="https://blog.makepostsell.com/" class="product-edit-button mps-button">&#128366; Blog</a>
</div>