Add corner ribbon, fix button CTA hierarchy, add style guide page
- Corner ribbon "Contribute Code" links to source repo (top-right, fixed) - Source Code button now green CTA, PyPi stays blue secondary - New styleguide.html with live component reference - CLAUDE.md updated with design system documentation - Style Guide link added to footer Resources
This commit is contained in:
parent
523919dd65
commit
5818fbfa81
4 changed files with 641 additions and 2 deletions
56
CLAUDE.md
56
CLAUDE.md
|
|
@ -10,4 +10,58 @@ Do not add attribution lines like "Generated with Claude Code" or "Co-Authored-B
|
|||
|
||||
- Focus on implementing the requested changes accurately
|
||||
- Keep commit messages concise and descriptive of the actual changes made
|
||||
- Respect that the user owns their codebase and all modifications to it
|
||||
- Respect that the user owns their codebase and all modifications to it
|
||||
|
||||
## Design System
|
||||
|
||||
Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/desktop) and 1200px (wide).
|
||||
|
||||
### Files
|
||||
|
||||
- `common.css` — shared app styles (layout, buttons, nav, wells, footer, corner ribbon)
|
||||
- `mps.css` — message ribbon, alerts
|
||||
- `styleguide.html` — live component reference
|
||||
|
||||
### Color Palette
|
||||
|
||||
| Color | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Green CTA | `#a3c765` | Primary buttons (shop-new, source code, download, done, checkout), links, alert-success |
|
||||
| Blue Secondary | `#98b6fa` | Secondary buttons (edit, preview, save, PyPi, blog), alert-info |
|
||||
| Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon |
|
||||
| Light Navy | `#82A8FF` | Ribbon gradient end |
|
||||
| Danger Red | `#CC6958` | Delete button |
|
||||
| Check Green | `#678731` | Checkmark list items |
|
||||
| Cross Red | `#c77765` | Cross list items |
|
||||
| Text Dark | `#0b0b0b` | Headings (bold-dark, big-bold-dark, huge-bold-dark) |
|
||||
| Text Body | `#515151` | Body text |
|
||||
| Text Muted | `#777` | Footer links, taglines |
|
||||
| Text Faint | `#999` | Footer bottom |
|
||||
| BG Light | `#F9F9FA` | Page background, nav, wells, footer |
|
||||
| White | `#FFFFFF` | Content sections, well-white |
|
||||
| Border | `#e0e0e0` | Dividers, footer borders |
|
||||
|
||||
### Button Hierarchy
|
||||
|
||||
Green = primary CTA (action the user should take). Blue = secondary (informational). Navy = account actions. Red = destructive.
|
||||
|
||||
- `.shop-new-button.mps-button` — green CTA
|
||||
- `.product-edit-button.mps-button` — blue secondary
|
||||
- `.log-out-button.mps-button` — navy
|
||||
- `.cart-delete-button.mps-button` — danger red
|
||||
- `.shop-switch-button.mps-button` — outline (border only)
|
||||
|
||||
### Typography Classes
|
||||
|
||||
- `.huge-bold-dark` — 2.7em, weight 550 (page titles)
|
||||
- `.big-bold-dark` — 1.4em, weight 550 (section headings)
|
||||
- `.bold-dark` — weight 550 (inline emphasis)
|
||||
|
||||
### Components
|
||||
|
||||
- **Corner ribbon** — `.corner-ribbon` fixed top-right, navy, links to source repo
|
||||
- **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile
|
||||
- **Wells** — `.well` (gray bg) and `.well.well-white` (white bg), rounded corners
|
||||
- **Alerts** — `.alert.alert-success`, `.alert.alert-info`, `.alert.alert-warning`, `.alert.alert-danger`
|
||||
- **Footer** — `.mps-footer` with grid (`.mps-footer-grid`), groups, CTAs, bottom bar
|
||||
- **Layout** — `.one-column` (800px max), `.one-column-thin` (400px max)
|
||||
37
common.css
37
common.css
|
|
@ -776,6 +776,43 @@ textarea.markup-editor-textarea {
|
|||
color: #a3c765;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CORNER RIBBON
|
||||
============================================ */
|
||||
|
||||
.corner-ribbon {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.corner-ribbon a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: 30px;
|
||||
width: 220px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background-color: #5871ad;
|
||||
text-decoration: none;
|
||||
transform: rotate(45deg);
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.corner-ribbon a:hover {
|
||||
background-color: #a3c765;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.mps-footer-grid {
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
|
||||
<body style="color: #515151; background-color: #F9F9FA;">
|
||||
|
||||
<div class="corner-ribbon">
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Contribute Code</a>
|
||||
</div>
|
||||
|
||||
<div class="message-ribbon">
|
||||
Sell digital downloads or physical products — commission free!
|
||||
</div>
|
||||
|
|
@ -161,7 +165,7 @@ Sell digital downloads or physical products — commission free!
|
|||
|
||||
<center>
|
||||
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="product-edit-button mps-button">🕮 PyPi</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="product-edit-button mps-button">✐ Source Code</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="shop-new-button mps-button">✐ Source Code</a>
|
||||
</center>
|
||||
|
||||
<br/>
|
||||
|
|
@ -515,6 +519,7 @@ Perfect, just leave a message in the comment box below and make sure to verify y
|
|||
<a href="https://blog.makepostsell.com/">Blog</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Source Code</a>
|
||||
<a href="https://pypi.org/project/make-post-sell/" target="_blank">PyPi</a>
|
||||
<a href="/styleguide.html">Style Guide</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
543
styleguide.html
Normal file
543
styleguide.html
Normal file
|
|
@ -0,0 +1,543 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<title>Style Guide — Make Post Sell</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#5871ad">
|
||||
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<link rel="stylesheet" href="mps.css">
|
||||
|
||||
<style>
|
||||
body { color: #515151; background-color: #F9F9FA; }
|
||||
|
||||
a { color: #a3c765; font-weight: 600; }
|
||||
|
||||
.bold-dark { color: #0b0b0b; font-weight: 550; }
|
||||
.big-bold-dark { color: #0b0b0b; font-size: 1.4em; font-weight: 550; }
|
||||
.huge-bold-dark { color: #0b0b0b; font-size: 2.7em; font-weight: 550; }
|
||||
|
||||
section.content { background-color: #F9F9FA; }
|
||||
section.well-white { background-color: #FFFFFF; }
|
||||
|
||||
.sg-section { margin-bottom: 40px; }
|
||||
.sg-section-title {
|
||||
color: #0b0b0b;
|
||||
font-size: 1.6em;
|
||||
font-weight: 550;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sg-subsection { margin-bottom: 24px; }
|
||||
.sg-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #777;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sg-swatches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.sg-swatch {
|
||||
width: 120px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
.sg-swatch-color {
|
||||
height: 60px;
|
||||
}
|
||||
.sg-swatch-info {
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.sg-swatch-name { font-weight: 600; color: #0b0b0b; }
|
||||
.sg-swatch-hex { color: #999; }
|
||||
.sg-code {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.sg-demo {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="color: #515151; background-color: #F9F9FA;">
|
||||
|
||||
<div class="corner-ribbon">
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Contribute Code</a>
|
||||
</div>
|
||||
|
||||
<div class="message-ribbon">
|
||||
Style Guide — Make Post Sell Design System
|
||||
</div>
|
||||
|
||||
<section class="main">
|
||||
|
||||
<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> |
|
||||
<a href="/styleguide.html">Style Guide</a>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<section class="one-column well">
|
||||
|
||||
<span class="huge-bold-dark">Style Guide</span>
|
||||
<br/><br/>
|
||||
Live reference of every component on makepostsell.com. Use this to keep the design consistent as we grow.
|
||||
|
||||
<br/><br/><br/>
|
||||
|
||||
<!-- ======== COLORS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Colors</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Primary & CTA</div>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #a3c765;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Green CTA</div>
|
||||
<div class="sg-swatch-hex">#a3c765</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #98b6fa;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Blue Secondary</div>
|
||||
<div class="sg-swatch-hex">#98b6fa</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #5871ad;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Navy Brand</div>
|
||||
<div class="sg-swatch-hex">#5871ad</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #82A8FF;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Light Navy</div>
|
||||
<div class="sg-swatch-hex">#82A8FF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Status & Feedback</div>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #678731;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Check Green</div>
|
||||
<div class="sg-swatch-hex">#678731</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #c77765;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Cross Red</div>
|
||||
<div class="sg-swatch-hex">#c77765</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #CC6958;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Danger Red</div>
|
||||
<div class="sg-swatch-hex">#CC6958</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Text & Background</div>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #0b0b0b;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Text Dark</div>
|
||||
<div class="sg-swatch-hex">#0b0b0b</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #515151;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Text Body</div>
|
||||
<div class="sg-swatch-hex">#515151</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #777;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Text Muted</div>
|
||||
<div class="sg-swatch-hex">#777777</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #999;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Text Faint</div>
|
||||
<div class="sg-swatch-hex">#999999</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #F9F9FA; border-bottom: 1px solid #e0e0e0;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">BG Light</div>
|
||||
<div class="sg-swatch-hex">#F9F9FA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #FFFFFF; border-bottom: 1px solid #e0e0e0;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">White</div>
|
||||
<div class="sg-swatch-hex">#FFFFFF</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-swatch">
|
||||
<div class="sg-swatch-color" style="background: #e0e0e0;"></div>
|
||||
<div class="sg-swatch-info">
|
||||
<div class="sg-swatch-name">Border</div>
|
||||
<div class="sg-swatch-hex">#e0e0e0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== TYPOGRAPHY ======== -->
|
||||
<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 — green #a3c765, weight 600</a>
|
||||
</div>
|
||||
<div class="sg-code">font-family: helvetica;
|
||||
|
||||
.huge-bold-dark — 2.7em, weight 550, color #0b0b0b
|
||||
.big-bold-dark — 1.4em, weight 550, color #0b0b0b
|
||||
.bold-dark — weight 550, color #0b0b0b
|
||||
body text — default size, color #515151
|
||||
a (links) — color #a3c765, weight 600</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== BUTTONS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Buttons</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Primary CTA (Green)</div>
|
||||
<div class="sg-demo">
|
||||
<a href="#" class="shop-new-button mps-button">＋ New Shop</a>
|
||||
<a href="#" class="shop-new-button mps-button">✐ Source Code</a>
|
||||
</div>
|
||||
<div class="sg-code"><a href="#" class="shop-new-button mps-button">＋ New Shop</a></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">🕮 PyPi</a>
|
||||
<a href="#" class="product-edit-button mps-button">🕮 Blog</a>
|
||||
</div>
|
||||
<div class="sg-code"><a href="#" class="product-edit-button mps-button">🕮 PyPi</a></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"><a href="#" class="log-out-button mps-button">Log Out</a></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>
|
||||
</div>
|
||||
<div class="sg-code"><a href="#" class="cart-delete-button mps-button">Delete</a></div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Outline (Switch / Public)</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">🔒</span> Public</a>
|
||||
</div>
|
||||
<div class="sg-code"><a href="#" class="shop-switch-button mps-button">Switch Shop</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== RIBBON ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Ribbons</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Message Ribbon (top banner, desktop only)</div>
|
||||
<div class="sg-demo">
|
||||
<div class="message-ribbon" style="display: block;">
|
||||
Sell digital downloads or physical products — commission free!
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code"><div class="message-ribbon">
|
||||
Your message here
|
||||
</div>
|
||||
|
||||
Gradient: #5871ad → #82A8FF
|
||||
Hidden on mobile, visible at 800px+</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Corner Ribbon (fixed, top-right)</div>
|
||||
<div class="sg-demo" style="position: relative; min-height: 160px; overflow: hidden;">
|
||||
<div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 150px; height: 150px;">
|
||||
<a href="#" style="display: block; position: absolute; right: -40px; top: 30px; width: 220px; padding: 8px 0; text-align: center; font-size: 13px; font-weight: bold; color: #ffffff; background-color: #5871ad; text-decoration: none; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2);">Contribute Code</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code"><div class="corner-ribbon">
|
||||
<a href="https://git.unturf.com/..." target="_blank">Contribute Code</a>
|
||||
</div>
|
||||
|
||||
Navy #5871ad, hovers to green #a3c765
|
||||
Fixed position, z-index 99</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== WELLS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Wells</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Well (gray background)</div>
|
||||
<div class="sg-demo">
|
||||
<section class="one-column well">
|
||||
Content inside a gray well with rounded corners.
|
||||
</section>
|
||||
</div>
|
||||
<div class="sg-code"><section class="one-column well">...</section>
|
||||
|
||||
Background: #F9F9FA, border-radius: 10px, padding: 10px</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Well White</div>
|
||||
<div class="sg-demo">
|
||||
<section class="one-column well well-white">
|
||||
Content inside a white well with rounded corners.
|
||||
</section>
|
||||
</div>
|
||||
<div class="sg-code"><section class="one-column well well-white">...</section>
|
||||
|
||||
Background: #FFFFFF</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== ALERTS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Alerts</div>
|
||||
|
||||
<div class="sg-demo">
|
||||
<div class="alert alert-success" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Success alert — green background #a3c765</div>
|
||||
</div>
|
||||
<div class="alert alert-info" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Info alert — blue background #98b6fa</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Warning alert — yellow background #fff3cd</div>
|
||||
</div>
|
||||
<div class="alert alert-danger" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Danger alert — red background #f8d7da</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code"><div class="alert alert-success">
|
||||
<div class="alert-message">Message</div>
|
||||
</div>
|
||||
|
||||
Variants: alert-success, alert-info, alert-warning, alert-danger</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== LISTS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Check & 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;"> ✔ Positive item</b>
|
||||
<span style="color: #515151;"> — <span class="avoid-wrap">Description here</span></span>
|
||||
</li>
|
||||
<li style="margin-bottom: 10px;"><b style="color: #678731;"> ✔ Another positive</b>
|
||||
<span style="color: #515151;"> — <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">❌</b> Negative item we protect against</li>
|
||||
<li style="margin-bottom: 10px;"><b style="color: #c77765">❌</b> Another negative item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sg-code">Checkmark: color #678731, ✔
|
||||
Cross: color #c77765, ❌
|
||||
list-style-type: none</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== LAYOUT ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Layout</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">One Column (max-width 800px, centered)</div>
|
||||
<div class="sg-code"><section class="one-column">...</section>
|
||||
<section class="one-column well">...</section>
|
||||
<section class="one-column-thin">...</section> (max-width 400px)</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Navigation Grid</div>
|
||||
<div class="sg-code"><section class="nav-grid">
|
||||
<section class="nav">
|
||||
<section class="logo">...</section>
|
||||
<section class="middle">...</section>
|
||||
<section class="log-in">...</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
Mobile: stacked (1 column)
|
||||
Desktop (800px+): 3 columns (logo | middle | log-in)</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Breakpoints</div>
|
||||
<div class="sg-code">Mobile first (no media query)
|
||||
@media (min-width: 800px) — tablet/desktop
|
||||
@media (min-width: 1200px) — wide desktop</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== FOOTER ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Footer</div>
|
||||
|
||||
<div class="sg-code"><footer class="mps-footer">
|
||||
<div class="mps-footer-grid">
|
||||
<div class="mps-footer-brand">...</div>
|
||||
<div class="mps-footer-group">
|
||||
<span class="mps-footer-group-title">Title</span>
|
||||
<nav class="mps-footer-links">
|
||||
<a href="#">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mps-footer-ctas">...</div>
|
||||
<div class="mps-footer-bottom">...</div>
|
||||
</footer>
|
||||
|
||||
Mobile: stacked (1 column)
|
||||
Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)</div>
|
||||
<p>See live footer below ↓</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer class="mps-footer">
|
||||
<div class="mps-footer-grid">
|
||||
|
||||
<div class="mps-footer-brand">
|
||||
<a href="/" class="mps-footer-logo">Make Post Sell</a>
|
||||
<p class="mps-footer-tagline">
|
||||
Commission-free digital downloads & physical product sales for creators.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mps-footer-group">
|
||||
<span class="mps-footer-group-title">Get Started</span>
|
||||
<nav class="mps-footer-links">
|
||||
<a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a>
|
||||
<a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Create a Product</a>
|
||||
<a href="https://blog.makepostsell.com/c/59c8c980-3a3b-11ef-8208-c3d535a3beac/how-to-create-new-content-on-makepostsell">Create Content</a>
|
||||
<a href="https://blog.makepostsell.com/c/64903474-3a3c-11ef-8208-c3d535a3beac/how-to-create-a-digital-bundle-for-products-content-on-makepostsell">Create a Bundle</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mps-footer-group">
|
||||
<span class="mps-footer-group-title">Resources</span>
|
||||
<nav class="mps-footer-links">
|
||||
<a href="https://blog.makepostsell.com/">Blog</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Source Code</a>
|
||||
<a href="https://pypi.org/project/make-post-sell/" target="_blank">PyPi</a>
|
||||
<a href="/styleguide.html">Style Guide</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mps-footer-group">
|
||||
<span class="mps-footer-group-title">Account</span>
|
||||
<nav class="mps-footer-links">
|
||||
<a href="https://my.makepostsell.com/u/settings">My Account</a>
|
||||
<a href="https://my.makepostsell.com/s/new">New Shop</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mps-footer-ctas">
|
||||
<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">🕮 Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="mps-footer-bottom">
|
||||
makepostsell.com © 2026 — Commission-free sales by <a href="https://www.unturf.com/software/" target="_blank">unturf.com</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue