Visitar URL original
feat: redesign the landing page and brand (#43) · commit-check/commit-check.com@0f41125 · GitHub
Skip to content

Commit 0f41125

Browse files
shenxianpengshenxianpeng
authored
feat: redesign the landing page and brand (#43)
## What changes **Home page.** Rewritten around what a visitor needs to know first: - Hero: "Catch bad commits before they merge", with an animated commit-msg hook that rejects `Fix: add streaming support`, suggests the fix, and accepts it. - *Where it runs*: one `cchk.toml` fanning out to the five entry points (CLI, pre-commit, Action, App, MCP), each a card linking to its guide. On a phone these become a list. - *commit-check-action*: a tabbed demo of `pr-comments`, `job-summary`, `pr-title`, `message` and `branch`, plus a copyable workflow. - Rule groups, the anatomy of a finding, who uses it, pricing, the existing FAQ, and a site map. **Brand, site-wide.** - New mark (a commit on a history line, ticked). - Ink header and footer on every page. - Signal Blue stays at the badge's `#2c9ccd`. - Bricolage Grotesque for headings, and Instrument Sans for text in place of Inter. - The favicon, touch icon and social cards are regenerated to match. **Pricing.** The Team plan reads "Coming soon" on the home page and in the App guide. ## How the demos work `docs/javascripts/landing.js` is a small timeline player. The markup in `index.md` carries `data-on` / `data-from` / `data-until` / `data-type` / `data-hl` attributes (documented at the top of the file), and `landing.css` defines each state. - **Without JavaScript or under `prefers-reduced-motion`:** every demo shows its final frame, and the Action panels are listed one under another. - **While scrolled out of view:** the animations pause. - **With instant navigation:** they start on arrival and stop on leave. - **Keyboard:** the Action demo's tabs are an ARIA tablist and respond to the arrow keys. The sample output comes from real commit-check 2.18.0 runs. The only omission is the ASCII-art banner, and HTML comments say so where it is left out. Code ligatures are off, so `==>` is not drawn as an arrow. The workflow snippet adds `types: [..., edited]`. It enables `pr-title`, and the Action README notes that without `edited` an edited title is not re-checked. ## Docs sync - Latest release is 2.18.0 on PyPI. - The changelog has its dated entry. - All four `rev:` pins name v2.18.0. - `python -m pytest tests/ -q` passes (10 tests). - `mkdocs build --strict` passes, with and without social cards. ## Not in this PR - `docs/terms.md` still mentions a 14-day Team trial; it is a legal page, left for a separate decision. - `demo.gif`, `demo-poster.png` and `merge-box.png` are no longer referenced by any page. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Redesigned the landing page with an overview of where the product runs, grouped rule descriptions, usage information, and updated pricing. * Added an interactive GitHub Action demo with tabs, animated examples, and copyable setup instructions. * Updated the pricing information: the Team plan is marked “Coming soon,” with private-repository coverage available through the GitHub Action until launch. * **Style** * Refreshed the documentation’s colors, typography, and page layout for a more consistent look in light and dark modes. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent e867fb5 commit 0f41125

11 files changed

Lines changed: 3222 additions & 527 deletions

File tree

‎docs/assets/extra.css‎

Lines changed: 85 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,105 @@
11
/* Brand palette -----------------------------------------------------------
2-
Material's "custom" primary/accent read these variables. */
2+
Material's "custom" primary/accent read these variables.
3+
4+
Ink is the brand's dark and Signal Blue its accent. The header and footer
5+
are Ink on every page, so the docs and the landing page share one frame;
6+
Signal Blue is the same #2c9ccd the README badge has always used, so badges
7+
already in the wild still match. */
38
:root {
9+
--cc-ink: #0b1620;
10+
--cc-ink-raised: #13212c;
411
--cc-brand: #2c9ccd;
512
--cc-brand-dark: #1e85a8;
613
--cc-brand-light: #5bb3d9;
7-
/* The brand blue only reaches 4.2:1 on white; links need 4.5:1. */
14+
/* The brand blue only reaches 3.1:1 on white; links need 4.5:1. */
815
--cc-link: #176b89;
916

10-
/* The hero sits on brand blue, so its button is white rather than branded. */
11-
--cc-hero-button-bg: #ffffff;
12-
13-
--md-primary-fg-color: var(--cc-brand);
14-
--md-primary-fg-color--light: var(--cc-brand-light);
15-
--md-primary-fg-color--dark: var(--cc-brand-dark);
17+
--md-primary-fg-color: var(--cc-ink);
18+
--md-primary-fg-color--light: var(--cc-ink-raised);
19+
--md-primary-fg-color--dark: #060d13;
1620
--md-accent-fg-color: var(--cc-brand-dark);
21+
22+
/* A literal stack: the theme defines --md-text-font-family below :root,
23+
so a var() of it here would resolve to nothing. */
24+
--cc-display-font: "Bricolage Grotesque", "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
1725
}
1826

27+
/* The theme sets the footer colours per scheme, so they are overridden per
28+
scheme too; on :root alone they would lose to the theme's own. */
29+
[data-md-color-scheme="default"],
1930
[data-md-color-scheme="slate"] {
20-
--md-primary-fg-color: var(--cc-brand);
31+
--md-footer-bg-color: #081119;
32+
--md-footer-bg-color--dark: #060d13;
33+
}
34+
35+
[data-md-color-scheme="slate"] {
36+
/* Material tints every slate grey from one hue; 205 is Ink's. */
37+
--md-hue: 205;
38+
--md-default-bg-color: #0e1a23;
39+
--md-primary-fg-color: var(--cc-ink);
2140
--md-accent-fg-color: var(--cc-brand-light);
2241
--md-typeset-a-color: var(--cc-brand-light);
2342
}
2443

2544
[data-md-color-scheme="default"] {
2645
--md-typeset-a-color: var(--cc-link);
46+
/* A light header in the light scheme, Ink in the dark one, so the header
47+
answers the theme toggle like the rest of the page. */
48+
--md-primary-fg-color: #ffffff;
49+
--md-primary-fg-color--light: #f4f6f7;
50+
--md-primary-fg-color--dark: #eef2f4;
51+
--md-primary-bg-color: var(--cc-ink);
52+
--md-primary-bg-color--light: #4f6270;
53+
}
54+
55+
[data-md-color-scheme="default"] .md-header {
56+
box-shadow: inset 0 -1px 0 #dce3e8;
57+
}
58+
59+
/* The theme's search field is a translucent black meant for a coloured
60+
header; on a white one it needs a solid tint instead. */
61+
[data-md-color-scheme="default"] .md-search__form {
62+
background-color: #eef2f4;
63+
}
64+
65+
[data-md-color-scheme="default"] .md-search__form:hover {
66+
background-color: #e4e9ed;
67+
}
68+
69+
/* A primary button is Signal Blue with Ink text: white on this blue is 3.1:1,
70+
under the 4.5:1 a button label needs; Ink on it is 5.9:1. */
71+
.md-typeset .md-button--primary {
72+
background-color: var(--cc-brand);
73+
border-color: var(--cc-brand);
74+
color: var(--cc-ink);
75+
}
76+
77+
.md-typeset .md-button--primary:focus,
78+
.md-typeset .md-button--primary:hover {
79+
background-color: var(--cc-brand-light);
80+
border-color: var(--cc-brand-light);
81+
color: var(--cc-ink);
82+
}
83+
84+
/* Display face for page titles, section headings and the site name. Body text
85+
stays in the theme's text font. */
86+
.md-typeset h1,
87+
.md-typeset h2 {
88+
font-family: var(--cc-display-font);
89+
font-weight: 700;
90+
letter-spacing: -0.02em;
91+
}
92+
93+
/* The theme draws page titles in a light grey at weight 300; in the display
94+
face they read as headings only at full strength. */
95+
.md-typeset h1 {
96+
color: var(--md-default-fg-color);
97+
}
98+
99+
.md-header__title {
100+
font-family: var(--cc-display-font);
101+
font-weight: 700;
102+
letter-spacing: -0.01em;
27103
}
28104

29105
/* Feature grid: uses Material's card grid, tightened up a little. */

‎docs/assets/favicon.svg‎

Lines changed: 5 additions & 7 deletions
Loading

‎docs/assets/logo.svg‎

Lines changed: 7 additions & 12 deletions
Loading

‎docs/guides/github-app.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,13 +181,13 @@ without a wall of red.
181181

182182
Public repositories are free on any account, and everything on a personal
183183
account is free, and both stay free. Only an organization's private
184-
repositories are paid:
184+
repositories will be paid, on a Team plan that is not on sale yet:
185185

186186
| Plan | Price | Covers |
187187
|---|---|---|
188188
| Open Source | Free | Public repositories, on any account |
189189
| Personal | Free | Private repositories on a personal account |
190-
| Team | $19 / month | Private repositories in an organization, 14-day free trial |
190+
| Team | Coming soon | Private repositories in an organization |
191191

192192
The Team plan is not tiered by seat count. Twenty of you and twenty thousand of
193193
you pay the same, so growing the team never changes the bill.

0 commit comments

Comments
 (0)