From 5818fbfa81595b6691a419099c5ccad686966921 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Wed, 4 Mar 2026 15:50:49 -0500 Subject: [PATCH] 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 --- CLAUDE.md | 56 ++++- common.css | 37 ++++ index.html | 7 +- styleguide.html | 543 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 641 insertions(+), 2 deletions(-) create mode 100644 styleguide.html diff --git a/CLAUDE.md b/CLAUDE.md index 7f5b35e..6bd2d4c 100644 --- a/CLAUDE.md +++ b/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 \ No newline at end of file +- 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) \ No newline at end of file diff --git a/common.css b/common.css index 8d6a4e3..987451a 100644 --- a/common.css +++ b/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; diff --git a/index.html b/index.html index 714c2e4..8d94ff1 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,10 @@ +
+ Contribute Code +
+
Sell digital downloads or physical products — commission free!
@@ -161,7 +165,7 @@ Sell digital downloads or physical products — commission free!
🕮 PyPi - ✐ Source Code + ✐ Source Code

@@ -515,6 +519,7 @@ Perfect, just leave a message in the comment box below and make sure to verify y Blog Source Code PyPi + Style Guide diff --git a/styleguide.html b/styleguide.html new file mode 100644 index 0000000..7a17120 --- /dev/null +++ b/styleguide.html @@ -0,0 +1,543 @@ + + + + + +Style Guide — Make Post Sell + + + + + + + + + + + + + +
+ Contribute Code +
+ +
+Style Guide — Make Post Sell Design System +
+ +
+ +
+
+ +
+ +
+
+ +
+
+ + Style Guide +

+ Live reference of every component on makepostsell.com. Use this to keep the design consistent as we grow. + +


+ + +
+
Colors
+ +
+
Primary & CTA
+
+
+
+
+
Green CTA
+
#a3c765
+
+
+
+
+
+
Blue Secondary
+
#98b6fa
+
+
+
+
+
+
Navy Brand
+
#5871ad
+
+
+
+
+
+
Light Navy
+
#82A8FF
+
+
+
+
+ +
+
Status & Feedback
+
+
+
+
+
Check Green
+
#678731
+
+
+
+
+
+
Cross Red
+
#c77765
+
+
+
+
+
+
Danger Red
+
#CC6958
+
+
+
+
+ +
+
Text & Background
+
+
+
+
+
Text Dark
+
#0b0b0b
+
+
+
+
+
+
Text Body
+
#515151
+
+
+
+
+
+
Text Muted
+
#777777
+
+
+
+
+
+
Text Faint
+
#999999
+
+
+
+
+
+
+
+
+
BG Light
+
#F9F9FA
+
+
+
+
+
+
White
+
#FFFFFF
+
+
+
+
+
+
Border
+
#e0e0e0
+
+
+
+
+
+ + +
+
Typography
+ +
+ Huge Bold Dark +

+ Big Bold Dark +

+ Bold Dark +

+ Body text in #515151 on Helvetica. +

+ Link style — green #a3c765, weight 600 +
+
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
+
+ + +
+
Buttons
+ +
+
Primary CTA (Green)
+
+ ＋ New Shop + ✐ Source Code +
+
<a href="#" class="shop-new-button mps-button">＋ New Shop</a>
+
+ +
+
Secondary (Blue)
+
+ 🕮 PyPi + 🕮 Blog +
+
<a href="#" class="product-edit-button mps-button">🕮 PyPi</a>
+
+ +
+
Navy (Log Out / Activate)
+
+ Log Out + Activate +
+
<a href="#" class="log-out-button mps-button">Log Out</a>
+
+ +
+
Danger (Delete)
+
+ Delete +
+
<a href="#" class="cart-delete-button mps-button">Delete</a>
+
+ +
+
Outline (Switch / Public)
+
+ Switch Shop + 🔒 Public +
+
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
+
+
+ + +
+
Ribbons
+ +
+
Message Ribbon (top banner, desktop only)
+
+
+ Sell digital downloads or physical products — commission free! +
+
+
<div class="message-ribbon"> + Your message here +</div> + +Gradient: #5871ad → #82A8FF +Hidden on mobile, visible at 800px+
+
+ +
+
Corner Ribbon (fixed, top-right)
+
+ +
+
<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
+
+
+ + +
+
Wells
+ +
+
Well (gray background)
+
+
+ Content inside a gray well with rounded corners. +
+
+
<section class="one-column well">...</section> + +Background: #F9F9FA, border-radius: 10px, padding: 10px
+
+ +
+
Well White
+
+
+ Content inside a white well with rounded corners. +
+
+
<section class="one-column well well-white">...</section> + +Background: #FFFFFF
+
+
+ + +
+
Alerts
+ +
+
+
Success alert — green background #a3c765
+
+
+
Info alert — blue background #98b6fa
+
+
+
Warning alert — yellow background #fff3cd
+
+
+
Danger alert — red background #f8d7da
+
+
+
<div class="alert alert-success"> + <div class="alert-message">Message</div> +</div> + +Variants: alert-success, alert-info, alert-warning, alert-danger
+
+ + +
+
Check & Cross Lists
+ +
+
    +
  • ✔   Positive item + — Description here +
    • +
  • ✔   Another positive + — More details +
    • +
+
    +
  • ❌   Negative item we protect against
    • +
  • ❌   Another negative item
    • +
+
+
Checkmark: color #678731, ✔ +Cross: color #c77765, ❌ +list-style-type: none
+
+ + +
+
Layout
+ +
+
One Column (max-width 800px, centered)
+
<section class="one-column">...</section> +<section class="one-column well">...</section> +<section class="one-column-thin">...</section> (max-width 400px)
+
+ +
+
Navigation Grid
+
<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)
+
+ +
+
Breakpoints
+
Mobile first (no media query) +@media (min-width: 800px) — tablet/desktop +@media (min-width: 1200px) — wide desktop
+
+
+ + +
+
Footer
+ +
<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)
+

See live footer below ↓

+
+ +
+
+
+ + + + +