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.
This commit is contained in:
parent
e2f57e9abb
commit
38bb64b97b
3 changed files with 408 additions and 0 deletions
|
|
@ -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")
|
||||
|
||||
|
|
|
|||
401
make_post_sell/templates/styleguide.j2
Normal file
401
make_post_sell/templates/styleguide.j2
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
{% extends "base.j2" -%}
|
||||
|
||||
{% block append_to_head_tag_section %}
|
||||
<title>Style Guide — Make Post Sell</title>
|
||||
<style>
|
||||
.sg-section { margin-bottom: 40px; }
|
||||
.sg-section-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--input-border, #ccc);
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sg-subsection { margin-bottom: 24px; }
|
||||
.sg-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sg-swatches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sg-swatch {
|
||||
width: 110px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
}
|
||||
.sg-swatch-color { height: 50px; }
|
||||
.sg-swatch-info {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.sg-swatch-name { font-weight: 600; }
|
||||
.sg-swatch-hex { opacity: 0.6; }
|
||||
.sg-code {
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
margin-top: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.sg-demo {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sg-demo .mps-button { min-width: 180px; }
|
||||
.sg-button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.sg-button-row .mps-button { min-width: 160px; max-width: 200px; }
|
||||
.sg-theme-note {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content -%}
|
||||
|
||||
<section class="one-column">
|
||||
|
||||
<h1>Style Guide</h1>
|
||||
<p>Live reference of every component in Make Post Sell. Toggle dark/light mode to see both themes.</p>
|
||||
|
||||
<p style="margin-bottom: 8px;">
|
||||
<button onclick="window.setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')" class="mps-button mps-button-blue" style="min-width: 160px; max-width: 200px;">Toggle Theme</button>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
|
||||
<!-- ======== COLORS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Colors</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Light Mode</div>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #98b6fa;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Blue</div><div class="sg-swatch-hex">#98b6fa</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #a3c765;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Green</div><div class="sg-swatch-hex">#a3c765</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #bc2131;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Red</div><div class="sg-swatch-hex">#bc2131</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #9B59B6;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Purple</div><div class="sg-swatch-hex">#9B59B6</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</div><div class="sg-swatch-hex">#5871ad</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #D4D0C8;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Gray (base btn)</div><div class="sg-swatch-hex">#D4D0C8</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Dark Mode</div>
|
||||
<div class="sg-swatches">
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #7ab9ff;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Blue</div><div class="sg-swatch-hex">#7ab9ff</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #08e700;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Green</div><div class="sg-swatch-hex">#08e700</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #F34C31;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Red</div><div class="sg-swatch-hex">#F34C31</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #0d1117;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">BG Primary</div><div class="sg-swatch-hex">#0d1117</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #161b22;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">BG Secondary</div><div class="sg-swatch-hex">#161b22</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #2d3748;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Button BG</div><div class="sg-swatch-hex">#2d3748</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: #fff3cd;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Warning BG</div><div class="sg-swatch-hex">#fff3cd</div></div></div>
|
||||
<div class="sg-swatch"><div class="sg-swatch-color" style="background: #f8d7da;"></div><div class="sg-swatch-info"><div class="sg-swatch-name">Danger BG</div><div class="sg-swatch-hex">#f8d7da</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== TYPOGRAPHY ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Typography</div>
|
||||
<div class="sg-demo">
|
||||
<h1>Heading 1 (1.25em)</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<p>Body text. Helvetica, system default sizing. Color adapts to theme via CSS variables.</p>
|
||||
<p><a href="#">Link style</a> — inherits theme link color</p>
|
||||
<p><b>Bold text</b> — <em>Italic text</em></p>
|
||||
</div>
|
||||
<div class="sg-code">font-family: helvetica
|
||||
Headings: h1 = 1.25em, margin-top: 0
|
||||
Links: var(--link-color) in dark, #5f6368 in light
|
||||
Body: var(--text-primary)</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== BUTTONS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Buttons</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Core Button Classes</div>
|
||||
<div class="sg-demo">
|
||||
<div class="sg-button-row">
|
||||
<a href="#" class="mps-button">Default</a>
|
||||
<a href="#" class="mps-button mps-button-blue">Blue</a>
|
||||
<a href="#" class="mps-button mps-button-green">Green</a>
|
||||
<a href="#" class="mps-button mps-button-red">Red</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.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</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Semantic Button Classes</div>
|
||||
<div class="sg-demo">
|
||||
<div class="sg-button-row">
|
||||
<a href="#" class="mps-button shop-new-button">＋ New Shop</a>
|
||||
<a href="#" class="mps-button product-edit-button">✎ Edit</a>
|
||||
<a href="#" class="mps-button product-download-button">⬇ Download</a>
|
||||
<a href="#" class="mps-button product-new-button">＋ New Product</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.shop-new-button — green CTA
|
||||
.product-edit-button — blue
|
||||
.product-download-button — green
|
||||
.product-new-button — blue</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Small Buttons & Cancel</div>
|
||||
<div class="sg-demo">
|
||||
<div class="sg-button-row">
|
||||
<a href="#" class="mps-button mps-button-small mps-button-green">＋ New</a>
|
||||
<a href="#" class="mps-button mps-button-small mps-button-blue">☰ Actions</a>
|
||||
<button class="mps-cancel-button">Cancel</button>
|
||||
<button class="mps-cancel-button-red">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.mps-button-small — compact (140px min-width at desktop)
|
||||
.mps-cancel-button — inline cancel link
|
||||
.mps-cancel-button-red — inline danger link</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== FORMS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Form Elements</div>
|
||||
<div class="sg-demo">
|
||||
<label>Text Input</label>
|
||||
<input type="text" class="mps-product-title" placeholder="Product title" style="max-width: 400px; width: 100%;">
|
||||
<br/><br/>
|
||||
<label>Price Input</label>
|
||||
<input type="text" class="mps-product-price" placeholder="9.99" style="max-width: 200px;">
|
||||
<br/><br/>
|
||||
<label>Textarea</label>
|
||||
<textarea class="mps-product-description" placeholder="Description..." style="max-width: 400px; width: 100%; height: 80px;"></textarea>
|
||||
<br/><br/>
|
||||
<label>File Input</label>
|
||||
<input type="file" class="file-input" style="max-width: 400px;">
|
||||
</div>
|
||||
<div class="sg-code">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)</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== WELLS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Wells & Containers</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Well (gray background)</div>
|
||||
<div class="well" style="margin-bottom: 12px;">
|
||||
Content inside a well. Background: #F9F9FA, border-radius: 10px, padding: 10px.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Well Green (success)</div>
|
||||
<div class="well-green" style="background-color: #e8f5d4; border-radius: 10px; padding: 10px; margin-bottom: 12px;">
|
||||
Success container with green background.
|
||||
</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</div>
|
||||
</div>
|
||||
<div class="alert alert-info" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Info alert</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Warning alert</div>
|
||||
</div>
|
||||
<div class="alert alert-danger" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
|
||||
<div class="alert-message">Danger alert</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.alert.alert-success — green bg (#a3c765)
|
||||
.alert.alert-info — blue bg (#98b6fa)
|
||||
.alert.alert-warning — yellow bg (#fff3cd)
|
||||
.alert.alert-danger — red bg (#f8d7da)</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== PRODUCT CARDS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Product Cards (SERP)</div>
|
||||
<div class="sg-demo">
|
||||
<section class="serp" style="max-width: 500px;">
|
||||
<div class="serp-item">
|
||||
<div style="background: var(--input-border, #ddd); border-radius: 4px; width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; opacity: 0.5;">Image</div>
|
||||
<b><a href="#">Product Title</a></b>
|
||||
<br>
|
||||
<a href="#">$19.99</a>
|
||||
<br/>
|
||||
<a href="#">Shop Name</a>
|
||||
</div>
|
||||
<div class="serp-item">
|
||||
<div style="background: var(--input-border, #ddd); border-radius: 4px; width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; opacity: 0.5;">Image</div>
|
||||
<b><a href="#">Another Product</a></b>
|
||||
<br>
|
||||
<a href="#">$7.50</a>
|
||||
<br/>
|
||||
<a href="#">Shop Name</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="sg-code">.serp — auto-fit grid, minmax(160px, 1fr)
|
||||
.serp-item — hover: brightness change, transition 700ms
|
||||
.serp-thumbnail — border-radius: 4px, width: 100%</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== LAYOUT ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Layout</div>
|
||||
<div class="sg-code">.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</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== TASK BAR ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Windows 95 Task Bar</div>
|
||||
<div class="sg-demo">
|
||||
<section class="windows-95-task-bar" style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;">
|
||||
<section class="windows-95-start-button">
|
||||
<a href="#" class="windows-95-start-button mps-button mps-button-blue"><span class="start-button-icon">☰ </span> Shop Name</a>
|
||||
</section>
|
||||
<section class="call-to-action" style="text-align: right;">
|
||||
<a href="#" class="mps-button mps-button-small mps-button-green">＋ New</a>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<div class="sg-code">.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</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== THEME SYSTEM ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Theme System</div>
|
||||
<div class="sg-code">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)</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== COMMENT ACTIONS ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Comment Actions</div>
|
||||
<div class="sg-demo">
|
||||
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||||
<a href="#" class="reply-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Reply</a>
|
||||
<a href="#" class="edit-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Edit</a>
|
||||
<a href="#" class="delete-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Delete</a>
|
||||
<a href="#" class="moderate-link" style="display: inline-block; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; font-size: 13px;">Moderate</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.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</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== RIBBON ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Message Ribbon</div>
|
||||
<div class="sg-demo">
|
||||
<div class="message-ribbon" style="display: block;">
|
||||
Ribbon message here — gradient #5871ad to #82A8FF
|
||||
</div>
|
||||
</div>
|
||||
<div class="sg-code">.message-ribbon — gradient banner, hidden on mobile, shown at 800px+
|
||||
Customizable per shop: ribbon_color_1, ribbon_color_2, ribbon_text_color</div>
|
||||
</div>
|
||||
|
||||
<!-- ======== FOOTER ======== -->
|
||||
<div class="sg-section">
|
||||
<div class="sg-section-title">Footer</div>
|
||||
<div class="sg-code">.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</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
</section>
|
||||
|
||||
{%- endblock -%}
|
||||
|
|
@ -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__)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue