// Use when creating or updating any help page, article page, or content page on the Squabbit website. Defines the standard layout, colors, typography, hover effects, and page structure that all pages must follow.
Use when adding, removing, or renaming entries in the site nav (`header-nav.html`) — covers the manual second step required for pages that build.js excludes (index.html, advertise.html, branding.html, privacyPolicy.html), plus running `node build.js` for everything else.
Take a screenshot from a connected Android emulator, resize it, and convert to WebP for use in help articles or web pages. Use when the user asks to capture, screenshot, or snap the emulator screen.
Use when creating a help article for a golf game format or scoring type. Covers the full process - HTML article creation, SEO metadata, articles.json entry, and group page link.
Create a new blog post for the Squabbit website. Use when the user asks to write, add, or create a blog post or blog entry.
Use when editing header-nav.html, footer-content.html, or creating new HTML pages. Inlines shared nav and footer into all site pages.
| name | page-style |
| description | Use when creating or updating any help page, article page, or content page on the Squabbit website. Defines the standard layout, colors, typography, hover effects, and page structure that all pages must follow. |
Standard design system for all Squabbit website pages.
Reference implementations:
help/groups/gamesAndFormats/gamesAndFormatsGroup.htmlhelp/groups/league/articles/recreatingATournamentFromAnotherApp/recreatingATournamentFromAnotherApp.html1. Nav bar (copy from any existing page — build.js keeps it updated)
2. Back to Help link
3. Page header (optional badge, h1, subtitle)
4. Search bar (only if 5+ articles)
5. Section label(s) with divider line and count
6. Card grid(s)
7. No-results message (only if search bar present)
8. Footer spacer + footer (copy from any existing page)
| Token | Value |
|---|---|
| Font | 'Outfit', sans-serif — weight 400–800 |
| Background | #fafbfa |
| Text primary | #1a1a1a |
| Text secondary | #666 |
| Text muted | #777 |
| Brand green | #329543 |
| Green gradient | linear-gradient(135deg, #329543, #28a745) |
| Green light bg | #f0f9f1 |
| Card border | #e8ede9 |
| Card border hover | #c8deca |
| Section line | linear-gradient(90deg, #e2ebe4, transparent) |
| Search border | 2px solid #e2ebe4 |
| Search focus ring | 0 0 0 4px rgba(50, 149, 67, .1) |
| Card hover shadow | 0 8px 28px rgba(50, 149, 67, .1) |
| Max content width | 932px |
| Card min width | 270px (grid: repeat(auto-fill, minmax(270px, 1fr))) |
| Card border radius | 14px |
| Card padding | 22px 24px 20px |
| Grid gap | 16px |
Positioned above the header inside a max-width: 932px container with padding: 90px 16px 0 (clears fixed nav).
<div style="max-width: 932px; margin: 0 auto; padding: 90px 16px 0;">
<a href="/help.html" style="display: inline-flex; align-items: center; gap: 6px; color: #329543; text-decoration: none; font-size: .92rem; font-weight: 500; font-family: 'Outfit', sans-serif;">
<i class="bi bi-arrow-left"></i> Back to Help
</a>
</div>
Centered. Optional badge, then h1 (2.6rem / 800 weight), then subtitle paragraph.
<div class="page-header" style="padding-top: 16px;">
<span class="format-count">BADGE TEXT</span> <!-- optional -->
<h1>Page Title</h1>
<p>One or two sentences describing the page.</p>
</div>
Badge guidelines:
35+ FORMATS, 10 ARTICLES)QUICK START)Include only when the page has 5 or more articles.
<div class="search-wrap">
<i class="bi bi-search search-icon"></i>
<input type="text" id="formatSearch" placeholder="Search articles..." autocomplete="off">
</div>
When search is present, each card needs a data-search attribute with extra keywords, and each section label and grid needs a matching data-section attribute. Include the search/filter JS at the bottom (see reference implementation).
<div class="section-label" data-section="sectionId">
<h2>Section Name</h2>
<div class="section-line"></div>
<span class="section-count">N</span>
</div>
data-section only needed when search is presenttext-transform: uppercase; letter-spacing: .06em)16px (reduced from default 48px since it follows header); subsequent sections use 48px<a href="/path/to/article.html" class="format-card" data-search="extra keywords">
<div class="card-title">Card Title <i class="bi bi-arrow-right arrow"></i></div>
<p class="card-desc">One to two sentence description of what the article covers.</p>
<div class="card-aliases">Also: Alternate Name</div> <!-- optional -->
</a>
Hover behavior:
translateY(-3px))scaleY(0) → scaleY(1))Animation: All cards use fadeUp (opacity 0→1, translateY 16→0) with staggered delay of 0.03s * index.
For cards that don't fit neatly into a section category, use the .general-card class which adds a gold left border and removes the green hover bar:
<a href="..." class="format-card general-card">
At max-width: 576px:
2remThese pages use inline <style> blocks — they do NOT use article.css. Required external sheets:
/css/nav.css.btn-primary {
color: #fff;
background-color: #329543;
border-color: #329543;
}
.btn-primary:hover {
color: #fff;
background-color: #232fcc;
border-color: #212cc0;
}
| Articles | Badge | Search | Sections |
|---|---|---|---|
| 1–4 | No | No | Single "Articles" section |
| 5–9 | Yes | No | Group by category if natural split exists |
| 10+ | Yes | Yes | Group by category with data-section attributes |
Long-form help articles (single page, scrollable content) use a card-style layout that visually matches the group pages. Reference: help/groups/league/articles/recreatingATournamentFromAnotherApp/recreatingATournamentFromAnotherApp.html.
1. Nav bar (copy from any existing page)
2. Back-to-group link (.back-link-wrap → .back-link)
3. Article wrapper (.article-wrap → <article class="article-card">)
a. Article header: optional badge pill, h1 (centered)
b. Body: paragraphs, h2/h3 sections, lists, images, tables, note boxes
4. Footer spacer + footer
Do NOT use article.css — articles use inline <style> blocks like the group pages. The page-style skill is the source of truth.
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
<link href="/css/nav.css" rel="stylesheet">
<style>
body {
font-family: 'Outfit', sans-serif;
background: #fafbfa;
color: #1a1a1a;
}
.back-link-wrap {
max-width: 760px;
margin: 0 auto;
padding: 90px 16px 0;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #329543;
text-decoration: none;
font-size: .92rem;
font-weight: 500;
}
.back-link:hover { color: #28a745; text-decoration: none; }
.article-wrap {
max-width: 760px;
margin: 0 auto;
padding: 16px;
}
.article-card {
background: #fff;
border: 1px solid #e8ede9;
border-radius: 18px;
padding: 48px 56px 56px;
box-shadow: 0 8px 28px rgba(50, 149, 67, .04);
}
.article-header {
text-align: center;
margin-bottom: 32px;
}
.article-header .badge-pill {
display: inline-block;
background: linear-gradient(135deg, #329543, #28a745);
color: #fff;
font-weight: 700;
font-size: .78rem;
padding: 5px 14px;
border-radius: 20px;
letter-spacing: .04em;
margin-bottom: 16px;
text-transform: uppercase;
}
.article-header h1 {
font-size: 2.4rem;
font-weight: 800;
color: #1a1a1a;
letter-spacing: -.02em;
margin: 0 0 12px;
line-height: 1.15;
}
.article-card h2 {
font-size: 1.35rem;
font-weight: 700;
color: #1a1a1a;
letter-spacing: -.01em;
margin: 40px 0 14px;
padding-top: 8px;
position: relative;
}
.article-card h2::before {
content: '';
display: block;
width: 36px;
height: 3px;
background: linear-gradient(90deg, #329543, #28a745);
border-radius: 2px;
margin-bottom: 14px;
}
.article-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: #1a1a1a;
margin: 28px 0 10px;
}
.article-card p {
font-size: 1rem;
line-height: 1.65;
color: #333;
margin: 0 0 14px;
}
.article-card ul {
font-size: 1rem;
line-height: 1.65;
color: #333;
padding-left: 22px;
margin: 0 0 16px;
}
.article-card ul li { margin-bottom: 6px; }
.article-card a {
color: #329543;
text-decoration: none;
font-weight: 600;
}
.article-card a:hover { text-decoration: underline; }
.article-card code {
font-family: 'SFMono-Regular', Menlo, monospace;
font-size: .88em;
background: #f0f9f1;
color: #1e7a4a;
padding: 2px 7px;
border-radius: 5px;
}
.article-img {
display: block;
max-width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 6px 24px rgba(0,0,0,.08);
margin: 20px auto;
}
.nav-path {
display: inline-block;
font-size: .9rem;
color: #1e7a4a;
background: #f0f9f1;
padding: 3px 10px;
border-radius: 6px;
font-family: 'Outfit', sans-serif;
font-weight: 600;
}
.nav-path .sep { color: #99c5a3; margin: 0 4px; }
.note-box {
background: #fffbf0;
border: 1px solid #f0dfa0;
border-left: 4px solid #e0b840;
border-radius: 10px;
padding: 16px 20px;
margin: 20px 0;
font-size: .95rem;
line-height: 1.6;
color: #5a4400;
}
.note-box strong { color: #8a6d00; }
@media (max-width: 576px) {
.article-card { padding: 32px 22px 40px; border-radius: 14px; }
.article-header h1 { font-size: 1.8rem; }
.article-card h2 { font-size: 1.2rem; margin-top: 32px; }
}
</style>
<div class="back-link-wrap">
<a href="/help/groups/<group>/<group>Group.html" class="back-link">
<i class="bi bi-arrow-left"></i> Back to <Group Name>
</a>
</div>
<div class="article-wrap">
<article class="article-card">
<div class="article-header">
<span class="badge-pill"><Group Name> Article</span> <!-- optional -->
<h1>Article Title</h1>
</div>
<p>Lead paragraph...</p>
<h2>Section heading</h2>
<p>Section body...</p>
<img class="article-img" src="images/foo.webp" alt="..." style="max-width: 360px; max-height: 500px; width: auto;">
</article>
</div>
<div style="margin-bottom: 120px;"></div>
| Component | When to use |
|---|---|
.badge-pill | Optional pill above h1 — use the group name (e.g. League Article, Tournament Article) |
.nav-path | Inline code-like chip for menu paths (e.g. Settings → Other → Import tournaments) |
.note-box | Tips, warnings, callouts. Yellow with left border accent |
code | Inline code, column names, file names |
.article-img | Standard screenshot. Tall portrait phone shots add max-width: 360px; max-height: 500px; width: auto; |
| Custom tables | Define inline as needed but follow tokens (green headers on #f0f9f1, 1px solid #e8ede9 borders, rounded 12px corners) |
Articles use max-width: 760px (narrower than the 932px group pages) for comfortable reading line length.