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__)