From 38bb64b97bca149248a062c0f23acbf6d327a101 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Wed, 4 Mar 2026 18:49:02 -0500 Subject: [PATCH] Add /styleguide route with live component reference New styleguide page at /styleguide showing all design system components: colors (light/dark), typography, buttons (core + semantic + small/cancel), form elements, wells, alerts, SERP product cards, layout patterns, task bar, theme system docs, comment actions, ribbon, and footer structure. Includes theme toggle button for previewing both modes. Extends base.j2, wired through routes.py and views/misc.py. --- make_post_sell/routes.py | 2 + make_post_sell/templates/styleguide.j2 | 401 +++++++++++++++++++++++++ make_post_sell/views/misc.py | 5 + 3 files changed, 408 insertions(+) create mode 100644 make_post_sell/templates/styleguide.j2 diff --git a/make_post_sell/routes.py b/make_post_sell/routes.py index a589bff..86fa8da 100644 --- a/make_post_sell/routes.py +++ b/make_post_sell/routes.py @@ -21,6 +21,8 @@ def includeme(config): config.add_route("ask-for-on-demand-tls", "/ask-for-on-demand-tls") + config.add_route("styleguide", "/styleguide") + config.add_route("home", "/") config.add_route("search", "/search") diff --git a/make_post_sell/templates/styleguide.j2 b/make_post_sell/templates/styleguide.j2 new file mode 100644 index 0000000..ab0b8de --- /dev/null +++ b/make_post_sell/templates/styleguide.j2 @@ -0,0 +1,401 @@ +{% extends "base.j2" -%} + +{% block append_to_head_tag_section %} +Style Guide — Make Post Sell + +{% endblock %} + +{% block content -%} + +
+ +

Style Guide

+

Live reference of every component in Make Post Sell. Toggle dark/light mode to see both themes.

+ +

+ +

+ +
+ + +
+
Colors
+ +
+
Light Mode
+
+
Blue
#98b6fa
+
Green
#a3c765
+
Red
#bc2131
+
Purple
#9B59B6
+
Navy
#5871ad
+
Gray (base btn)
#D4D0C8
+
+
+ +
+
Dark Mode
+
+
Blue
#7ab9ff
+
Green
#08e700
+
Red
#F34C31
+
BG Primary
#0d1117
+
BG Secondary
#161b22
+
Button BG
#2d3748
+
+
+ +
+
Status & Feedback
+
+
Check Green
#678731
+
Cross Red
#c77765
+
Warning BG
#fff3cd
+
Danger BG
#f8d7da
+
+
+
+ + +
+
Typography
+
+

Heading 1 (1.25em)

+

Heading 2

+

Heading 3

+

Body text. Helvetica, system default sizing. Color adapts to theme via CSS variables.

+

Link style — inherits theme link color

+

Bold text — Italic text

+
+
font-family: helvetica +Headings: h1 = 1.25em, margin-top: 0 +Links: var(--link-color) in dark, #5f6368 in light +Body: var(--text-primary)
+
+ + +
+
Buttons
+ +
+
Core Button Classes
+
+
+ Default + Blue + Green + Red +
+
+
.mps-button — gray default (#D4D0C8) +.mps-button-blue — blue action (#98b6fa) +.mps-button-green — green success (#a3c765) +.mps-button-red — red danger (#bc2131) + +Dark mode: background-image patterns, colored borders
+
+ +
+
Semantic Button Classes
+
+
+ ＋ New Shop + ✎ Edit + ⬇ Download + ＋ New Product +
+
+
.shop-new-button — green CTA +.product-edit-button — blue +.product-download-button — green +.product-new-button — blue
+
+ +
+
Small Buttons & Cancel
+
+
+ ＋ New + ☰ Actions + + +
+
+
.mps-button-small — compact (140px min-width at desktop) +.mps-cancel-button — inline cancel link +.mps-cancel-button-red — inline danger link
+
+
+ + +
+
Form Elements
+
+ + +

+ + +

+ + +

+ + +
+
input[type="text"] — padding: 8px, border-radius: 4px, 1px solid #ccc +textarea — same styling, box-sizing: border-box +Dark mode: var(--input-bg), var(--input-border)
+
+ + +
+
Wells & Containers
+ +
+
Well (gray background)
+
+ Content inside a well. Background: #F9F9FA, border-radius: 10px, padding: 10px. +
+
+ +
+
Well Green (success)
+
+ Success container with green background. +
+
+
+ + +
+
Alerts
+
+
+
Success alert
+
+
+
Info alert
+
+
+
Warning alert
+
+
+
Danger alert
+
+
+
.alert.alert-success — green bg (#a3c765) +.alert.alert-info — blue bg (#98b6fa) +.alert.alert-warning — yellow bg (#fff3cd) +.alert.alert-danger — red bg (#f8d7da)
+
+ + +
+
Product Cards (SERP)
+
+
+
+
Image
+ Product Title +
+ $19.99 +
+ Shop Name +
+
+
Image
+ Another Product +
+ $7.50 +
+ Shop Name +
+
+
+
.serp — auto-fit grid, minmax(160px, 1fr) +.serp-item — hover: brightness change, transition 700ms +.serp-thumbnail — border-radius: 4px, width: 100%
+
+ + +
+
Layout
+
.one-column — max-width: 600px, centered +.one-column-thin — max-width: 400px, centered +.action-columns — 2-column grid (50/50) +section.nav — mobile: stacked, desktop: 3 columns +section.content — main content area + +Breakpoints: + @media (max-width: 640px) portrait — phone adjustments + @media (max-width: 768px) — tablet + @media (min-width: 800px) — desktop nav, 2-col layouts + @media (min-width: 960px) — wider product grids + @media (min-width: 1200px) — large desktop padding
+
+ + +
+
Windows 95 Task Bar
+
+
+
+ ☰   Shop Name +
+
+ ＋ New +
+
+
+
.windows-95-task-bar — grid, 1 col mobile / 2 col desktop +.windows-95-start-button — blue action menu button +.call-to-action — right-aligned new button
+
+ + +
+
Theme System
+
CSS Variables (set on html[data-theme]): + +Light: Dark: +--bg-primary: #ffffff --bg-primary: #0d1117 +--bg-secondary: #f8f9fa --bg-secondary: #161b22 +--text-primary: #333333 --text-primary: #ffffff +--link-color: #5f6368 --link-color: #7ab9ff +--blue-color: #98b6fa --blue-color: #7ab9ff +--green-color: #a3c765 --green-color: #08e700 +--red-color: #bc2131 --red-color: #F34C31 +--input-bg: #ffffff --input-bg: #161b22 +--input-border: #cccccc --input-border: #7ab9ff + +Priority: localStorage > user pref > shop default > light +Toggle: window.setTheme('dark') / window.setTheme('light') +Attribute: html[data-theme="dark"] or html[data-theme="light"] + +Dark buttons use background-image patterns: + /static/img/trans-blue.png (normal) / trans-blue2.png (hover) + /static/img/trans-green.png (normal) / trans-green2.png (hover) + /static/img/trans-red.png (normal) / trans-red2.png (hover)
+
+ + +
+
Comment Actions
+
+
+ Reply + Edit + Delete + Moderate +
+
+
.reply-link — blue text, blue border on hover +.edit-link — same pattern +.delete-link — red text, red border on hover +.moderate-link — same as reply +Dark mode: uses theme background images on hover
+
+ + +
+
Message Ribbon
+
+
+ Ribbon message here — gradient #5871ad to #82A8FF +
+
+
.message-ribbon — gradient banner, hidden on mobile, shown at 800px+ +Customizable per shop: ribbon_color_1, ribbon_color_2, ribbon_text_color
+
+ + +
+
Footer
+
.mps-footer — border-top, padding, bg +.mps-footer-grid — 1 col mobile, 4 col desktop (2fr 1fr 1fr 1fr) +.mps-footer-brand — logo + tagline +.mps-footer-group — title + links column +.mps-footer-group-title — uppercase, small, bold +.mps-footer-links a — muted color, green on hover +.mps-footer-ctas — button row with borders +.mps-footer-bottom — centered copyright text + +SaaS domain: full footer with Get Started, Resources, Account +Shop domain: shop-specific footer with feeds + account
+
+ +
+ +
+ +{%- endblock -%} diff --git a/make_post_sell/views/misc.py b/make_post_sell/views/misc.py index 49dab06..990a856 100644 --- a/make_post_sell/views/misc.py +++ b/make_post_sell/views/misc.py @@ -20,6 +20,11 @@ Disallow: """ +@view_config(route_name="styleguide", renderer="styleguide.j2") +def styleguide_view(request): + return {} + + @view_config(route_name="favicon") def favicon_view(request): here = os.path.dirname(__file__)