From 3a87f6dbd87ed3904723f1191fe46fac9cfb5542 Mon Sep 17 00:00:00 2001 From: Xianpeng Shen Date: Thu, 24 Sep 2026 20:03:16 +0300 Subject: [PATCH 1/6] docs: redesign the home page The home page is now its own template: a light header, a hero that shows what lands on a pull request, a chooser for the four tools, the one-LLVM-version idea, what reviewers see, showcase projects, a one-file quick start and a sponsor band. Inner pages keep the Material layout; home.css and the fonts load on the home page only. The header keeps the md-header class and includes Material's search partial, so search works as before. The logo wall is replaced by projects from the showcase page, whose use of cpp-linter-action was checked. extra.css loses the rules that only the old home page used. --- docs/index.md | 207 +--- docs/overrides/home.html | 441 ++++++++- docs/stylesheets/extra.css | 194 ---- docs/stylesheets/home.css | 1915 ++++++++++++++++++++++++++++++++++++ 4 files changed, 2347 insertions(+), 410 deletions(-) create mode 100644 docs/stylesheets/home.css diff --git a/docs/index.md b/docs/index.md index 1549fc5..e13d708 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,210 +5,7 @@ hide: - feedback template: home.html title: C/C++ Linting +description: clang-format and clang-tidy for C and C++ pull requests, pre-commit hooks and CI, with one LLVM version everywhere. --- - - -## Everything you need for linting C/C++ code - -
- -- :material-chart-line: **Built in Open Source** - - --- - - Open-source and MIT-licensed. Bringing contributors together to empower impactful C/C++ lint projects in open source and beyond. - -- :material-cog: **Zero Configuration** - - --- - - Works out of the box with sensible defaults. Advanced users can customize every aspect to match their coding standards. - -- :material-devices: **Works Everywhere** - - --- - - GitHub Actions, Pre-commit, Command Line, Docker containers and more – integrate anywhere your code lives. - -
- -
- -
- -## Trusted by developers worldwide - -
- -**Join thousands of developers and organizations using cpp-linter in production** - -
-
- Microsoft - Microsoft -
-
- Apache - Apache -
-
- NASA - NASA -
-
- Samsung - Samsung -
-
- TheAlgorithms - TheAlgorithms -
-
- Nextcloud - Nextcloud -
-
- CachyOS - CachyOS -
-
- Qualcomm - Qualcomm -
-
- Zondax - Zondax -
-
- NNStreamer - NNStreamer -
-
- Chocolate Doom - Chocolate Doom -
-
- LedgerHQ - LedgerHQ -
-
- LLNL - LLNL -
-
- cohere - cohere -
-
- Diasurgical - Diasurgical -
-
- Khronos Group - Khronos Group -
-
- man-group - Man Group -
-
- Stanford SSI - Stanford SSI -
-
- Cambridge ICCS - Cambridge ICCS -
-
- OpenMSL - OpenMSL -
-
- Xemu Project - Xemu Project -
-
- Bloomberg - Bloomberg -
-
- -
-
- 1,000+ - GitHub Users -
-
- 30K+ - Downloads/Month -
-
- 50+ - Contributors -
-
- -[See who uses cpp-linter →](showcase.md){ .md-button } - -
- -## Quick Start - -=== "GitHub Actions" - - Add cpp-linter-action to your workflow in seconds: - - ```yaml - steps: - - uses: actions/checkout@v5 - - uses: cpp-linter/cpp-linter-action@v2 - id: linter - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - style: 'file' # Use .clang-format config file - tidy-checks: '' # Use .clang-tidy config file - # only 'update' a single comment in a pull request thread. - thread-comments: ${{ github.event_name == 'pull_request' && 'update' }} - - name: Fail fast?! - if: steps.linter.outputs.checks-failed > 0 - run: exit 1 - ``` -=== "Pre-commit" - - Add to your `.pre-commit-config.yaml`: - - ```yaml - repos: - - repo: https://github.com/cpp-linter/cpp-linter-hooks - rev: v1.6.0 # Use the tag or commit you want - hooks: - - id: clang-format - args: [--style=Google] # Other coding style: LLVM, GNU, Chromium, Microsoft, Mozilla, WebKit. - - id: clang-tidy - args: [--checks=-*,bugprone-*,performance-*,readability-*] - ``` - -=== "Command Line" - - Install and run locally: - - ```bash - pip install cpp-linter - cpp-linter --style=file --tidy-checks='-*,readability-*' src/ - ``` - ---- - -
- -## Join Our Community - -**Be part of a growing ecosystem of C/C++ developers who care about code quality.** - -[GitHub Discussions :fontawesome-brands-github:](https://github.com/cpp-linter/cpp-linter/discussions){ .md-button } - - -
+ diff --git a/docs/overrides/home.html b/docs/overrides/home.html index 677afe7..ab05972 100644 --- a/docs/overrides/home.html +++ b/docs/overrides/home.html @@ -1,18 +1,437 @@ {% extends "main.html" %} +{#- + The home page has its own header, sections and footer; every other page + keeps the standard Material layout. home.css and the fonts below are only + loaded on this page. +-#} + +{% block extrahead %} + {{ super() }} + + + +{% endblock %} + +{% block header %} + {% set links = [ + ("Get started", "getting-started/" | url), + ("Tools", "#tools"), + ("Why cpp-linter", "why-cpp-linter/" | url), + ("Showcase", "showcase/" | url), + ("Blog", "blog/" | url), + ("Community", "discussion/" | url), + ] %} +
+ +
+{% endblock %} + +{% block tabs %}{% endblock %} + {% block hero %} -
-

C/C++ linting that just works

-

- Automated, configurable, and reliable linting for your C/C++ projects — set up in minutes. -

-

- - Get started - - + {% set arrow %}{% include ".icons/material/arrow-right.svg" %}{% endset %} + {% set check %}{% include ".icons/material/check-bold.svg" %}{% endset %} +

+ +
+
+
+

{{ check }} clang-format and clang-tidy for C and C++

+

+ C/C++ pull requests
+ that arrive
+ already checked. +

+

+ cpp-linter runs clang-format and clang-tidy on the code each pull + request changes and posts the fixes as suggestions a reviewer can + apply in one click. Every laptop and CI runner uses the same LLVM + version. +

+
+ Add it to a repository {{ arrow }} + + Find the right tool {% include ".icons/material/arrow-down.svg" %} + +
+
    +
  • {{ check }} Used by 1,000+ repositories
    • +
  • {{ check }} 30K+ downloads a month
    • +
  • {{ check }} Free and MIT licensed
    • +
+
+ + +
+
+ + {% set tools = [ + { + "title": "On every pull request", "name": "cpp-linter-action", "icon": "octicons/git-pull-request-24", + "text": "Review suggestions, line annotations and one summary comment, on Linux, macOS and Windows runners.", + "code": "uses: cpp-linter/cpp-linter-action@v2", + "href": "https://cpp-linter.github.io/cpp-linter-action/", "cta": "Read the docs", + }, + { + "title": "Before every commit", "name": "cpp-linter-hooks", "icon": "octicons/git-commit-24", + "text": "pre-commit hooks that install the exact clang-format and clang-tidy version you pin, on every developer's machine.", + "code": "args: [--style=file, --version=21]", + "href": "https://github.com/cpp-linter/cpp-linter-hooks", "cta": "View on GitHub", + }, + { + "title": "In any CI or script", "name": "cpp-linter", "icon": "octicons/terminal-24", + "text": "The engine behind the action, as a Python command for any other CI system or a local run.", + "code": "pip install cpp-linter", + "href": "https://cpp-linter.github.io/cpp-linter/", "cta": "Read the docs", + }, + { + "title": "Just the clang tools", "name": "clang-tools", "icon": "octicons/package-24", + "text": "clang-format, clang-tidy and friends at any LLVM version from 12 to 23, via pip, Docker, Homebrew or asdf.", + "code": "pip install clang-tools", + "href": "https://cpp-linter.github.io/clang-tools-pip/", "cta": "Read the docs", + }, + ] %} +
+
+
+
+

Start here

+

Pick where the checks run

+

Four ways in. All of them read the same .clang-format and .clang-tidy files from your repository.

+
+ Compare with other tools {{ arrow }} +
+
+ {% for tool in tools %} +
+ {% include ".icons/" ~ tool.icon ~ ".svg" %} +

{{ tool.title }}

+

{{ tool.name }}

+

{{ tool.text }}

+ {{ tool.code }} + {{ tool.cta }} {{ arrow }} +
+ {% endfor %} +
+
+
+ + {% set stations = [ + ("octicons/device-desktop-24", "On your laptop", "clang-tools", "Install the exact binary with pip, Docker, Homebrew or asdf."), + ("octicons/git-commit-24", "Before each commit", "cpp-linter-hooks", "pre-commit runs it on the files you staged."), + ("octicons/git-pull-request-24", "On the pull request", "cpp-linter-action", "Checks the changed lines and suggests the fixes."), + ("octicons/terminal-24", "In any other CI", "cpp-linter", "The same checks as one Python command."), + ] %} +
+
+
+
+

The idea behind it

+

Pin the LLVM version once

+
+

+ Different clang-format releases format the same file differently. + cpp-linter installs the version you pin at every step, so CI never + asks for a change a contributor's machine didn't make. +

+
+
+ +
    + {% for icon, title, name, text in stations %} +
  1. + {% include ".icons/" ~ icon ~ ".svg" %} + LLVM 21 +

    {{ title }}

    + {{ name }} +

    {{ text }}

    +
    2. + {% endfor %} +
+
+
+
+ +
+
+
+

On the pull request

+

Fixes land where reviewers already look

+

No logs to dig through. Every finding shows up in the diff, next to the line it is about.

+
+
+
+ +

Suggestions you can commit

+

clang-format and clang-tidy fixes arrive as review suggestions. Apply the ones you agree with in one click.

+
+
+ +

A note on the exact line

+

Each finding is annotated in the diff view, on pull requests from forks too.

+
+
+ +

One summary that stays current

+

A single comment lists the results and is rewritten on every push, instead of piling up new ones.

+
+
+ +
+

Fixes pushed for you

+ New in v2.23 +
+

Turn on auto-fix and cpp-linter commits the clang-format fixes back to the branch of a same-repository pull request.

+
+
+
+ {% include ".icons/octicons/history-24.svg" %} +

+ Bringing clang-tidy to an old codebase? Limit the checks + to the lines each pull request changes, and a strict .clang-tidy works + from the first pull request. +

+ Read the guide {{ arrow }} +
+
+
+ + {#- Stars as of September 2026, from the showcase page. -#} + {% set projects = [ + ("zealdocs/zeal", "Zeal", "Offline documentation browser", "12.8k"), + ("Alexays/Waybar", "Waybar", "Status bar for Wayland compositors", "11.9k"), + ("libvips/libvips", "libvips", "Fast image processing library", "11.6k"), + ("diasurgical/DevilutionX", "DevilutionX", "Diablo for modern operating systems", "9.7k"), + ("iree-org/iree", "IREE", "MLIR-based ML compiler and runtime", "3.9k"), + ("nextcloud/desktop", "Nextcloud Desktop", "Desktop sync client for Nextcloud", "3.9k"), + ("bloomberg/blazingmq", "BlazingMQ", "High-performance message queue", "3.2k"), + ("TrenchBroom/TrenchBroom", "TrenchBroom", "Cross-platform level editor", "2.8k"), + ] %} +
+
+
+

Showcase

+

Running in 1,000+ repositories

+

550+ public projects run it on their default branch, with 87,000+ GitHub stars between them. A few of them, with stars as of September 2026:

+
+
+ {% for repo, name, text, stars in projects %} + + {{ repo }} + {{ name }} + {{ text }} + {% include ".icons/octicons/star-fill-16.svg" %}{{ stars }} -

+ {% endfor %} +
+
+ See every project in the showcase {{ arrow }} +
+
+
+ +
+
+
+

Get started

+

Start with one workflow file

+
    +
  1. 1Save it as .github/workflows/cpp-linter.yml
    2. +
  2. 2Open a pull request that touches C or C++ code.
    3. +
  3. 3Commit the suggestions you agree with.
    4. +
+

Runs on Linux, macOS and Windows runners with LLVM 12 to 23, and reads your .clang-format and .clang-tidy files.

+ Read the getting started guide {{ arrow }} +
+
+
+ .github/workflows/cpp-linter.yml + +
+
name: cpp-linter
+on: pull_request
+
+jobs:
+  cpp-linter:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v5
+      - uses: cpp-linter/cpp-linter-action@v2
+        env:
+          GITHUB_TOKEN: {% raw %}${{ secrets.GITHUB_TOKEN }}{% endraw %}
+        with:
+          style: file
+          tidy-checks: ''
+          format-review: true
+          tidy-review: true
+
+
+
+ +
+
+
+

Built by two volunteers

+

cpp-linter is free and MIT licensed. Sponsorship pays for the hours that go into reviews, releases and support for each new LLVM version.

+
+
+ {% include ".icons/octicons/heart-16.svg" %} Sponsor cpp-linter + Ask in Discussions +
+
+
+ +
+{% endblock %} + +{% block content %}{% endblock %} + +{% block footer %} + {% endblock %} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 48a6e86..669fcbb 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,55 +1,3 @@ -:root > * { - --cpp-linter-logo-color-green: #40b385; - --cpp-linter-logo-color-yellow: #ffc20a; -} - -/* Hero section styling */ -.hero { - text-align: center; - padding: 4rem 0; - background: var(--md-primary-fg-color); - color: var(--md-primary-bg-color); -} - -.hero h1 { - font-size: 3rem; - font-weight: 700; - margin-bottom: 1rem; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); - text-align: center; - color: unset; -} - -.hero p { - font-size: 1.2rem; - margin-bottom: 2rem; - opacity: 0.9; - width: 65%; - margin-left: auto; - margin-right: auto; -} - -.hero .twemoji { - --md-icon-size: 1.125em; - display: inline-flex; - height: var(--md-icon-size); - vertical-align: text-top; -} - -.hero .md-button { - background: var(--cpp-linter-logo-color-yellow); - color: black; - border: none; - border-radius: unset; - display: inline-block; -} - -.hero .md-button:hover { - background: var(--cpp-linter-logo-color-green); - color: black; - border: none; -} - .md-typeset .md-button:hover { color: black; } @@ -69,20 +17,6 @@ border-color: var(--md-primary-fg-color); } -/* Community section styling */ -.community-section { - background: var(--md-default-fg-color--lightest); - padding: 3rem 2rem; - margin: 3rem -1.5rem 0 -1.5rem; - text-align: center; - border-radius: 1rem 1rem 0 0; -} - -.community-section h2 { - color: var(--md-primary-fg-color); - margin-bottom: 1rem; -} - /* Code block enhancements */ .md-typeset pre > code { border-radius: 0.5rem; @@ -136,134 +70,6 @@ box-shadow: 0 4px 12px rgba(0,0,0,0.15); } -/* Trusted by section styling */ -.trusted-by { - text-align: center; - padding: 3rem 0; - background: var(--md-default-fg-color--lightest); - margin: 3rem -1.5rem; - border-radius: 1rem; -} - -.trusted-by p { - font-size: 1.1rem; - color: var(--md-default-fg-color--light); - margin-bottom: 2rem; -} - -.logo-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 2rem; - margin-bottom: 3rem; - padding: 0 2rem; -} - -.logo-item { - display: flex; - flex-direction: column; - align-items: center; - transition: all 0.3s ease; - padding: 1rem; - border-radius: 0.5rem; -} - -.logo-item:hover { - transform: translateY(-4px); - background: var(--md-default-bg-color); - box-shadow: 0 8px 25px rgba(0,0,0,0.1); -} - -.logo-item img { - width: 60px; - height: 60px; - border-radius: 50%; - margin-bottom: 0.5rem; - filter: grayscale(100%); - transition: filter 0.3s ease; -} - -.logo-item:hover img { - filter: grayscale(0%); -} - -.logo-item span { - font-size: 0.9rem; - font-weight: 500; - color: var(--md-default-fg-color--light); -} - -/* Stats grid under trusted by section */ -.stats-grid { - display: flex; - justify-content: center; - align-items: center; - gap: 0; - margin: 2rem auto 0; - padding: 1.5rem 0; - max-width: 700px; -} - -.stat { - flex: 1; - text-align: center; - padding: 0 2rem; - position: relative; -} - -.stat + .stat::before { - content: ''; - position: absolute; - left: 0; - top: 10%; - height: 80%; - width: 1px; - background: var(--md-default-fg-color--lightest); -} - -.stat strong { - display: block; - font-size: 2.2rem; - font-weight: 800; - color: var(--md-primary-fg-color); - line-height: 1.2; - margin-bottom: 0.25rem; -} - -.stat span { - display: block; - font-size: 0.9rem; - color: var(--md-default-fg-color--light); - font-weight: 500; -} - -/* Mobile responsiveness */ -@media screen and (max-width: 768px) { - .logo-grid { - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - padding: 0 1rem; - } - - .stats-grid { - flex-direction: column; - gap: 1.5rem; - padding: 1rem 0; - } - - .stat { - padding: 0.5rem 0; - } - - .stat + .stat::before { - display: none; - } - - .stat strong { - font-size: 1.8rem; - } -} - /* Ensure tab items have proper contrast */ .md-tabs__item { background-color: transparent; diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css new file mode 100644 index 0000000..c6d4e86 --- /dev/null +++ b/docs/stylesheets/home.css @@ -0,0 +1,1915 @@ +/* + * Home page only: loaded by docs/overrides/home.html. The colors come from + * the logo (yellow circle, green check) and the indigo palette shared by the + * cpp-linter docs sites. + */ + +:root { + --cl-paper: #f7f5ef; + --cl-soft: #fbfaf6; + --cl-line: #e3dfd3; + --cl-line-strong: #d8d3c4; + --cl-ink: #171a2e; + --cl-ink-2: #454a63; + --cl-muted: #62677f; + --cl-primary: #4051b5; + --cl-primary-tint: #e8eaf8; + --cl-deep: #2b3685; + --cl-yellow: #ffc20a; + --cl-green: #40b385; + --cl-green-text: #1f7a57; + --cl-red-text: #a33a36; + --cl-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; + --cl-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; + --cl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; +} + +.md-container { + background: var(--cl-paper); +} + +/* the page is built from the hero block; Material's content column stays empty */ +.md-main { + display: none; +} + +.cl-home, +.cl-header, +.cl-footer { + font-family: var(--cl-text); + -webkit-font-smoothing: antialiased; +} + +.cl-home a, +.cl-header a, +.cl-footer a { + text-decoration: none; +} + +.cl-home a:focus-visible, +.cl-header a:focus-visible, +.cl-footer a:focus-visible, +.cl-copy:focus-visible, +.cl-menu > summary:focus-visible { + outline: 2px solid var(--cl-primary); + outline-offset: 3px; + border-radius: 8px; +} + +.cl-ico { + display: inline-flex; + flex-shrink: 0; + width: 1.05em; + height: 1.05em; +} + +.cl-ico svg { + width: 100%; + height: 100%; + fill: currentcolor; +} + +.cl-ico--green { + color: var(--cl-green-text); +} + +.cl-ico--warn { + color: #9a6700; +} + +.cl-muted { + color: var(--cl-muted); +} + +.cl-wrap { + box-sizing: border-box; + max-width: 1248px; + margin: 0 auto; + padding: 0 24px; +} + +/* Header */ + +.cl-header { + background: var(--cl-paper); + color: var(--cl-ink); + border-bottom: 1px solid var(--cl-line); + box-shadow: none; +} + +.cl-header.md-header--shadow { + box-shadow: 0 10px 24px -22px rgba(23, 26, 46, 0.6); +} + +.cl-header__inner { + box-sizing: border-box; + max-width: 1248px; + height: 76px; + margin: 0 auto; + padding: 0 24px; + gap: 24px; +} + +.cl-brand { + display: flex; + flex-shrink: 0; + align-items: center; + gap: 12px; + color: var(--cl-ink); + font-family: var(--cl-display); + font-size: 23px; + font-weight: 760; + letter-spacing: -0.01em; +} + +.cl-brand:hover { + color: var(--cl-ink); +} + +.cl-brand img { + width: 38px; + height: 38px; +} + +.cl-nav { + display: flex; + flex: 1; + justify-content: center; + gap: 32px; +} + +.cl-nav a { + color: var(--cl-ink-2); + font-size: 16px; + font-weight: 560; + white-space: nowrap; +} + +.cl-nav a:hover { + color: var(--cl-ink); +} + +.cl-header__actions { + display: flex; + align-items: center; + gap: 12px; + margin-left: auto; +} + +.cl-header .md-header__button { + margin: 0; + color: var(--cl-ink); +} + +.cl-menu { + display: none; + position: relative; +} + +.cl-menu > summary { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 12px; + color: var(--cl-ink); + cursor: pointer; + list-style: none; +} + +.cl-menu > summary::-webkit-details-marker { + display: none; +} + +.cl-menu > summary svg { + width: 24px; + height: 24px; + fill: currentcolor; +} + +.cl-menu__panel { + position: absolute; + top: calc(100% + 12px); + right: 0; + z-index: 5; + display: flex; + flex-direction: column; + min-width: 240px; + padding: 8px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 14px; + box-shadow: 0 24px 50px -24px rgba(23, 26, 46, 0.45); +} + +.cl-menu__panel a { + padding: 12px 14px; + border-radius: 10px; + color: var(--cl-ink); + font-size: 16px; + font-weight: 560; +} + +.cl-menu__panel a:hover { + background: var(--cl-paper); + color: var(--cl-ink); +} + +/* + * Material's search box, restyled for the light header: a 44px icon button + * that opens into a search field over the navigation. + */ +@media screen and (min-width: 60em) { + .cl-header .md-search { + width: 44px; + height: 44px; + padding: 0; + } + + .cl-header .md-search__inner { + position: absolute; + top: 0; + right: 0; + z-index: 3; + float: none; + width: 44px; + padding: 0; + } + + [data-md-toggle="search"]:checked ~ .cl-header .md-search__inner { + width: 560px; + } + + .cl-header .md-search__form, + .cl-header .md-search__form:hover { + box-sizing: border-box; + height: 44px; + background: #fff; + border: 1px solid var(--cl-line-strong); + border-radius: 12px; + } + + [data-md-toggle="search"]:checked ~ .cl-header .md-search__form { + border-radius: 12px 12px 0 0; + } + + .cl-header .md-search__input { + color: var(--cl-ink); + font-family: var(--cl-text); + font-size: 15px; + cursor: pointer; + } + + .cl-header .md-search__input::placeholder { + color: transparent; + } + + [data-md-toggle="search"]:checked ~ .cl-header .md-search__input { + cursor: text; + } + + [data-md-toggle="search"]:checked ~ .cl-header .md-search__input::placeholder { + color: var(--cl-muted); + } + + .cl-header .md-search__input + .md-search__icon, + [data-md-toggle="search"]:checked ~ .cl-header .md-search__input + .md-search__icon { + color: var(--cl-ink-2); + } + + .cl-header .md-search__icon[for="__search"] { + top: 9px; + left: 9px; + } + + .cl-header .md-search__output { + top: 43px; + } +} + +/* Buttons and links */ + +.cl-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + box-sizing: border-box; + height: 44px; + padding: 0 16px; + border-radius: 12px; + font-size: 15px; + font-weight: 600; + line-height: 1; + white-space: nowrap; + transition: background-color 0.2s, border-color 0.2s; +} + +.cl-btn--lg { + height: 56px; + padding: 0 24px; + border-radius: 14px; + font-size: 17px; + font-weight: 650; +} + +.cl-btn--primary, +.cl-btn--primary:hover { + background: var(--cl-primary); + color: #fff; + box-shadow: 0 12px 26px -14px rgba(43, 54, 133, 0.75); +} + +.cl-btn--primary:hover { + background: var(--cl-deep); +} + +.cl-btn--line, +.cl-btn--line:hover { + background: #fff; + border: 1px solid var(--cl-line-strong); + color: var(--cl-ink); +} + +.cl-btn--line:hover { + border-color: #bdb6a2; +} + +.cl-btn--ink, +.cl-btn--ink:hover { + background: var(--cl-ink); + color: #fff; +} + +.cl-btn--ink:hover { + background: #2c3049; +} + +.cl-btn--outline, +.cl-btn--outline:hover { + background: transparent; + border: 2px solid var(--cl-ink); + color: var(--cl-ink); +} + +.cl-btn--outline:hover { + background: rgba(23, 26, 46, 0.08); +} + +.cl-link { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--cl-primary); + font-size: 16px; + font-weight: 650; + white-space: nowrap; +} + +.cl-link:hover { + color: var(--cl-deep); + text-decoration: underline; +} + +/* Section scaffolding */ + +.cl-home { + color: var(--cl-ink); +} + +/* keep anchor targets clear of the sticky header */ +.cl-home [id] { + scroll-margin-top: 88px; +} + +.cl-band { + padding: 112px 0; +} + +.cl-band--white { + background: #fff; + border-top: 1px solid var(--cl-line); + border-bottom: 1px solid var(--cl-line); +} + +.cl-band--indigo { + background: var(--cl-deep); + color: #fff; +} + +.cl-head { + max-width: 760px; +} + +.cl-head--split { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 40px; + max-width: none; +} + +.cl-head--split > div { + max-width: 720px; +} + +.cl-head--center { + display: flex; + flex-direction: column; + align-items: center; + max-width: none; + text-align: center; +} + +.cl-head--center .cl-sub { + max-width: 700px; +} + +.cl-eyebrow { + margin: 0; + color: var(--cl-green-text); + font-size: 13px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.cl-band--indigo .cl-eyebrow { + color: var(--cl-yellow); +} + +.cl-h2 { + margin: 14px 0 0; + color: var(--cl-ink); + font-family: var(--cl-display); + font-size: 46px; + font-weight: 760; + line-height: 1.08; + letter-spacing: -0.02em; +} + +.cl-band--indigo .cl-h2 { + color: #fff; +} + +.cl-sub { + margin: 14px 0 0; + color: var(--cl-ink-2); + font-size: 18px; + line-height: 1.6; +} + +.cl-h3 { + margin: 0; + color: var(--cl-ink); + font-family: var(--cl-display); + font-size: 23px; + font-weight: 720; + line-height: 1.2; +} + +.cl-inline-code { + padding: 1px 6px; + background: #efece3; + border-radius: 5px; + color: var(--cl-ink); + font-family: var(--cl-mono); + font-size: 0.85em; +} + +/* Hero */ + +.cl-hero { + padding: 84px 0 104px; +} + +.cl-hero__grid { + display: grid; + grid-template-columns: minmax(0, 640px) minmax(0, 1fr); + gap: 40px; + align-items: center; +} + +.cl-chip { + display: inline-flex; + align-items: center; + gap: 8px; + margin: 0; + padding: 7px 14px 7px 10px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 999px; + color: var(--cl-ink-2); + font-size: 14px; + font-weight: 600; +} + +.cl-hero__title { + margin: 30px 0 0; + color: var(--cl-ink); + font-family: var(--cl-display); + font-size: clamp(33px, 3.83vw + 18px, 64px); + font-weight: 780; + line-height: 1.03; + letter-spacing: -0.025em; +} + +.cl-circled { + position: relative; + display: inline-block; + padding: 0 0.12em; + white-space: nowrap; +} + +.cl-circled__ring { + position: absolute; + top: -0.19em; + left: -0.25em; + width: calc(100% + 0.53em); + height: calc(100% + 0.38em); + overflow: visible; +} + +.cl-circled__ring path { + fill: none; + stroke: var(--cl-yellow); + stroke-width: 0.11em; + stroke-linecap: round; + vector-effect: non-scaling-stroke; +} + +.cl-circled__text { + position: relative; +} + +.cl-circled__check { + position: absolute; + top: -0.56em; + right: -0.78em; + width: 1em; + height: 0.81em; + overflow: visible; +} + +.cl-circled__check path, +.cl-visual__check path { + fill: none; + stroke: var(--cl-green); + stroke-linecap: round; + stroke-linejoin: round; +} + +.cl-circled__check path { + stroke-width: 10; +} + +.cl-lead { + max-width: 580px; + margin: 30px 0 0; + color: var(--cl-ink-2); + font-size: 19px; + line-height: 1.6; +} + +.cl-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-top: 38px; +} + +.cl-proof { + display: flex; + flex-wrap: wrap; + gap: 12px 26px; + margin: 40px 0 0; + padding: 0; + list-style: none; +} + +.cl-proof li { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + color: var(--cl-ink-2); + font-size: 15px; + font-weight: 500; +} + +/* Hero illustration: a review card inside the logo's brush circle */ + +.cl-visual { + position: relative; + justify-self: end; + box-sizing: border-box; + width: 600px; + max-width: 100%; + padding: 104px 50px 105px; +} + +.cl-visual__ring { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: visible; +} + +.cl-visual__ring path { + fill: none; + stroke: var(--cl-yellow); + stroke-width: 16px; + stroke-linecap: round; + vector-effect: non-scaling-stroke; +} + +.cl-visual__pin { + position: absolute; + top: 62px; + left: 4px; + z-index: 3; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background: var(--cl-ink); + border-radius: 999px; + box-shadow: 0 12px 26px -14px rgba(23, 26, 46, 0.7); + color: #fff; + font-family: var(--cl-mono); + font-size: 12.5px; + font-weight: 600; +} + +.cl-visual__check { + position: absolute; + top: 42px; + right: -20px; + z-index: 3; + width: 140px; + height: 120px; + overflow: visible; +} + +.cl-visual__check path { + stroke-width: 18; +} + +.cl-review { + position: relative; + z-index: 2; + overflow: hidden; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 18px; + box-shadow: 0 30px 70px -30px rgba(23, 26, 46, 0.45); +} + +/* the diff stat sits next to the file name; the corner belongs to the check mark */ +.cl-review__file { + display: flex; + align-items: center; + gap: 14px; + padding: 14px 18px; + background: var(--cl-soft); + border-bottom: 1px solid #eeeae0; + font-family: var(--cl-mono); + font-size: 13px; + font-weight: 600; +} + +.cl-review__path { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.cl-review__path .cl-ico { + color: var(--cl-muted); +} + +.cl-add-text { + color: var(--cl-green-text); +} + +.cl-del-text { + color: var(--cl-red-text); +} + +.cl-review__diff { + padding: 8px 0; +} + +.cl-diff { + color: var(--cl-ink); + font-family: var(--cl-mono); + font-size: 13px; + line-height: 24px; +} + +.cl-diff--roomy { + line-height: 26px; +} + +.cl-diff__line { + display: flex; +} + +.cl-diff__line--add { + background: #e9f6ef; +} + +.cl-diff__line--fix { + background: #e6f5ee; +} + +.cl-diff__line--del { + background: #fcebea; +} + +.cl-diff__line--warn { + background: #fff4cc; +} + +.cl-diff__no { + flex-shrink: 0; + width: 46px; + padding-right: 12px; + color: #8a8fa3; + text-align: right; +} + +.cl-diff__line--add .cl-diff__no { + color: #6b7e73; +} + +.cl-diff__line--warn .cl-diff__no { + color: #6b4e00; +} + +.cl-diff__mark { + flex-shrink: 0; + width: 18px; +} + +.cl-diff__line--add .cl-diff__mark, +.cl-diff__line--fix .cl-diff__mark { + color: var(--cl-green-text); +} + +.cl-diff__line--del .cl-diff__mark { + color: var(--cl-red-text); +} + +.cl-diff__code { + white-space: pre; +} + +.cl-comment { + margin: 4px 16px 16px; + overflow: hidden; + border: 1px solid var(--cl-line); + border-radius: 14px; +} + +.cl-comment__head { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 14px; + border-bottom: 1px solid #eeeae0; + font-size: 14px; +} + +.cl-comment__head img, +.cl-summary__head img { + box-sizing: border-box; + width: 26px; + height: 26px; + padding: 2px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 999px; +} + +.cl-comment__bot { + padding: 1px 6px; + border: 1px solid var(--cl-line-strong); + border-radius: 6px; + color: var(--cl-ink-2); + font-size: 11px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.cl-comment__tool { + margin-left: auto; + padding: 3px 8px; + background: var(--cl-primary-tint); + border-radius: 6px; + color: var(--cl-primary); + font-family: var(--cl-mono); + font-size: 11.5px; + font-weight: 600; +} + +.cl-comment__body { + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px 14px 14px; +} + +.cl-comment__body p { + margin: 0; + font-size: 14.5px; + line-height: 1.5; +} + +.cl-comment__body code { + padding: 1px 5px; + background: #f1efe8; + border-radius: 4px; + font-family: var(--cl-mono); + font-size: 13px; +} + +.cl-suggestion { + overflow: hidden; + border: 1px solid var(--cl-line); + border-radius: 10px; + font-family: var(--cl-mono); + font-size: 13px; + line-height: 24px; +} + +.cl-suggestion__title { + padding: 5px 12px; + background: var(--cl-soft); + border-bottom: 1px solid #eeeae0; + color: var(--cl-ink-2); + font-family: var(--cl-text); + font-size: 12.5px; + font-weight: 600; +} + +.cl-suggestion .cl-diff__mark { + width: 28px; + text-align: center; +} + +.cl-comment__actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.cl-fake-btn { + display: inline-flex; + align-items: center; + height: 36px; + padding: 0 14px; + background: #fff; + border: 1px solid var(--cl-line-strong); + border-radius: 9px; + color: var(--cl-ink); + font-size: 13.5px; + font-weight: 600; +} + +.cl-fake-btn--primary { + background: var(--cl-primary); + border-color: var(--cl-primary); + color: #fff; +} + +.cl-fake-btn--end { + align-self: flex-end; + height: 30px; + padding: 0 12px; + font-size: 12.5px; +} + +.cl-fixchip { + position: absolute; + right: 0; + bottom: 64px; + z-index: 3; + display: flex; + align-items: center; + gap: 12px; + padding: 12px 18px 12px 12px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 14px; + box-shadow: 0 18px 40px -20px rgba(23, 26, 46, 0.5); +} + +.cl-fixchip__icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + background: var(--cl-green-text); + border-radius: 999px; + color: #fff; +} + +.cl-fixchip__icon svg { + width: 18px; + height: 18px; + fill: currentcolor; +} + +.cl-fixchip__text { + display: flex; + flex-direction: column; + gap: 2px; + color: var(--cl-muted); + font-size: 12.5px; +} + +.cl-fixchip__text code { + color: var(--cl-ink); + font-family: var(--cl-mono); + font-size: 12.5px; + font-weight: 600; +} + +/* wide screens: the illustration keeps its full size and overlaps the gap */ +@media screen and (min-width: 1248px) { + .cl-visual { + max-width: none; + } +} + +/* Tools */ + +.cl-tools { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; + margin-top: 52px; +} + +.cl-tool { + display: flex; + flex-direction: column; + gap: 14px; + box-sizing: border-box; + min-height: 420px; + padding: 28px; + background: var(--cl-paper); + border: 1px solid var(--cl-line); + border-radius: 18px; +} + +.cl-tool__icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + margin-bottom: 6px; + background: var(--cl-primary-tint); + border-radius: 14px; + color: var(--cl-primary); +} + +.cl-tool__icon svg { + width: 24px; + height: 24px; + fill: currentcolor; +} + +.cl-tool__name { + margin: 0; + color: var(--cl-primary); + font-family: var(--cl-mono); + font-size: 13px; + font-weight: 600; +} + +.cl-tool__text { + margin: 0; + color: var(--cl-ink-2); + font-size: 15.5px; + line-height: 1.6; +} + +.cl-tool__code { + display: flex; + align-items: center; + box-sizing: border-box; + min-height: 62px; + margin-top: auto; + padding: 10px 14px; + background: var(--cl-ink); + border-radius: 10px; + color: #e8e9f2; + font-family: var(--cl-mono); + font-size: 12.5px; + line-height: 1.55; + overflow-wrap: anywhere; +} + +/* One version, every step */ + +.cl-intro { + display: grid; + grid-template-columns: 560px minmax(0, 1fr); + gap: 80px; + align-items: end; +} + +.cl-intro > p { + margin: 0; + color: #d9dcf2; + font-size: 18px; + line-height: 1.65; +} + +.cl-track { + position: relative; + margin-top: 72px; +} + +.cl-track__line { + position: absolute; + top: 22px; + left: 0; + width: 100%; + height: 40px; + overflow: visible; +} + +.cl-track__line path { + fill: none; + stroke: var(--cl-yellow); + stroke-width: 7px; + stroke-linecap: round; + vector-effect: non-scaling-stroke; +} + +.cl-stations { + position: relative; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 32px; + margin: 0; + padding: 0; + list-style: none; +} + +.cl-station { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0; +} + +.cl-station__dot { + display: flex; + align-items: center; + justify-content: center; + width: 84px; + height: 84px; + background: #fff; + border-radius: 999px; + box-shadow: 0 0 0 8px var(--cl-deep); + color: var(--cl-deep); +} + +.cl-station__dot svg { + width: 30px; + height: 30px; + fill: currentcolor; +} + +.cl-station__pin { + align-self: flex-start; + margin-top: 14px; + padding: 3px 8px; + background: var(--cl-yellow); + border-radius: 6px; + color: var(--cl-ink); + font-family: var(--cl-mono); + font-size: 12px; + font-weight: 600; +} + +.cl-station h3 { + margin: 4px 0 0; + color: #fff; + font-family: var(--cl-display); + font-size: 22px; + font-weight: 720; +} + +.cl-station__name { + color: #c3c9f5; + font-family: var(--cl-mono); + font-size: 13px; + font-weight: 600; +} + +.cl-station p { + margin: 0; + color: #d9dcf2; + font-size: 15.5px; + line-height: 1.6; +} + +/* What lands on the pull request */ + +.cl-outcomes { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + margin-top: 52px; +} + +.cl-outcome { + display: flex; + flex-direction: column; + gap: 12px; + padding: 28px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 18px; +} + +.cl-outcome > p { + margin: 0; + color: var(--cl-ink-2); + font-size: 16px; + line-height: 1.6; +} + +.cl-outcome__art { + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; + box-sizing: border-box; + min-height: 168px; + margin-bottom: 8px; + padding: 20px 24px; + background: var(--cl-paper); + border-radius: 14px; +} + +.cl-outcome__title { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; +} + +.cl-mini { + overflow: hidden; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 10px; +} + +.cl-mini .cl-diff__no { + width: 40px; +} + +.cl-mini .cl-diff__line--del .cl-diff__mark, +.cl-mini .cl-diff__line--fix .cl-diff__mark { + width: 30px; + text-align: center; +} + +.cl-annotation { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + margin: 0; + color: var(--cl-ink-2); + font-size: 13px; +} + +.cl-annotation strong { + color: var(--cl-ink); +} + +.cl-summary { + display: flex; + flex-direction: column; + gap: 12px; + padding: 14px 16px; +} + +.cl-summary p { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 10px; + margin: 0; + font-size: 13.5px; +} + +.cl-summary__head img { + width: 22px; + height: 22px; +} + +.cl-tag { + padding: 4px 11px; + border-radius: 999px; + font-size: 12.5px; + font-weight: 600; +} + +.cl-tag--ok { + background: #e6f5ee; + color: var(--cl-green-text); +} + +.cl-tag--warn { + background: #fff1c2; + color: #6b4e00; +} + +.cl-commit { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 14px; +} + +.cl-commit .cl-fixchip__icon { + width: 30px; + height: 30px; +} + +.cl-commit .cl-fixchip__icon svg { + width: 16px; + height: 16px; +} + +.cl-commit code { + font-size: 13px; +} + +.cl-badge-new { + padding: 3px 10px; + background: var(--cl-yellow); + border-radius: 999px; + color: var(--cl-ink); + font-size: 12px; + font-weight: 700; +} + +.cl-strip { + display: flex; + align-items: center; + gap: 20px; + margin-top: 24px; + padding: 24px 32px; + background: #fff; + border: 1px solid var(--cl-line); + border-radius: 18px; +} + +.cl-strip .cl-tool__icon { + margin: 0; +} + +.cl-strip p { + flex: 1; + margin: 0; + color: var(--cl-ink); + font-size: 17px; + line-height: 1.55; +} + +/* Showcase */ + +.cl-projects { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; + margin-top: 52px; +} + +.cl-project { + display: flex; + flex-direction: column; + gap: 6px; + padding: 22px; + background: var(--cl-paper); + border: 1px solid var(--cl-line); + border-radius: 16px; + transition: border-color 0.2s, transform 0.2s; +} + +.cl-home .cl-project, +.cl-home .cl-project:hover { + color: var(--cl-ink); +} + +.cl-project:hover { + border-color: #bdb6a2; + transform: translateY(-2px); +} + +.cl-project__repo { + color: var(--cl-muted); + font-family: var(--cl-mono); + font-size: 12.5px; + overflow-wrap: anywhere; +} + +.cl-project__name { + font-family: var(--cl-display); + font-size: 21px; + font-weight: 720; +} + +.cl-project__text { + color: var(--cl-ink-2); + font-size: 14.5px; + line-height: 1.5; +} + +.cl-project__stars { + display: flex; + align-items: center; + gap: 6px; + margin-top: 8px; + font-size: 14px; + font-weight: 650; +} + +.cl-project__stars svg { + width: 16px; + height: 16px; + fill: #d99b00; +} + +.cl-center { + display: flex; + justify-content: center; + margin-top: 40px; +} + +/* Quick start */ + +.cl-start { + display: grid; + grid-template-columns: 470px minmax(0, 1fr); + gap: 72px; + align-items: center; +} + +.cl-steps { + display: flex; + flex-direction: column; + gap: 18px; + margin: 32px 0 0; + padding: 0; + list-style: none; +} + +.cl-steps li { + display: flex; + align-items: flex-start; + gap: 16px; + margin: 0; + font-size: 17px; + line-height: 1.55; +} + +.cl-steps li > span:last-child { + padding-top: 5px; +} + +.cl-steps__no { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + background: #fff; + border: 1px solid var(--cl-line-strong); + border-radius: 999px; + font-family: var(--cl-display); + font-size: 16px; + font-weight: 760; +} + +.cl-note { + margin: 18px 0 20px; + color: var(--cl-muted); + font-size: 15.5px; + line-height: 1.6; +} + +.cl-window { + overflow: hidden; + background: var(--cl-ink); + border-radius: 20px; + box-shadow: 0 30px 70px -34px rgba(23, 26, 46, 0.6); +} + +.cl-window__bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 14px 18px 14px 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.cl-window__file { + overflow: hidden; + color: #c9cce0; + font-family: var(--cl-mono); + font-size: 13px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cl-copy { + display: inline-flex; + flex-shrink: 0; + align-items: center; + gap: 8px; + height: 34px; + padding: 0 12px; + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.24); + border-radius: 8px; + color: #fff; + font-family: var(--cl-text); + font-size: 13px; + font-weight: 600; + cursor: pointer; +} + +.cl-copy:hover { + background: rgba(255, 255, 255, 0.08); +} + +.cl-code { + margin: 0; + padding: 22px 24px 26px; + overflow-x: auto; + color: #e8e9f2; + font-family: var(--cl-mono); + font-size: 14px; + line-height: 24px; +} + +.cl-code .k { + color: #a9b6ff; +} + +.cl-code .s { + color: #ffd66b; +} + +.cl-code .b { + color: #7ddbb3; +} + +/* Sponsor band */ + +.cl-sponsor { + padding: 76px 0; + background: var(--cl-yellow); +} + +.cl-sponsor__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 48px; +} + +.cl-sponsor h2 { + margin: 0; + color: var(--cl-ink); + font-family: var(--cl-display); + font-size: 42px; + font-weight: 780; + line-height: 1.1; + letter-spacing: -0.02em; +} + +.cl-sponsor p { + max-width: 720px; + margin: 12px 0 0; + color: #2a2d40; + font-size: 18px; + line-height: 1.6; +} + +.cl-sponsor__actions { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + gap: 14px; +} + +/* Footer */ + +.cl-footer { + padding: 72px 0 48px; + background: var(--cl-ink); + color: #c9cce0; +} + +.cl-footer__grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 48px; +} + +.cl-footer__brand { + display: flex; + align-items: center; + gap: 12px; + margin: 0; + color: #fff; + font-family: var(--cl-display); + font-size: 22px; + font-weight: 760; +} + +.cl-footer__brand img { + width: 36px; + height: 36px; +} + +.cl-footer__about { + max-width: 340px; + margin: 16px 0 0; + color: #a9aec8; + font-size: 15.5px; + line-height: 1.6; +} + +.cl-footer nav { + display: flex; + flex-direction: column; + gap: 12px; +} + +.cl-footer__label { + margin: 0; + color: #fff; + font-size: 13px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.cl-footer a { + color: #c9cce0; + font-size: 15.5px; +} + +.cl-footer a:hover { + color: #fff; + text-decoration: underline; +} + +.cl-footer__bottom { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 12px; + margin-top: 56px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.12); + color: #a9aec8; + font-size: 14px; +} + +/* Smaller screens */ + +@media screen and (max-width: 1199px) { + .cl-nav { + display: none; + } + + .cl-menu { + display: block; + } + + .cl-tools { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cl-tool { + min-height: 0; + } +} + +@media screen and (max-width: 1119px) { + .cl-hero__grid { + grid-template-columns: minmax(0, 1fr); + gap: 56px; + } + + .cl-visual { + justify-self: center; + } + + .cl-projects { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media screen and (max-width: 999px) { + .cl-intro, + .cl-start { + grid-template-columns: minmax(0, 1fr); + gap: 20px; + } + + .cl-start { + gap: 40px; + } + + .cl-track__line { + display: none; + } + + .cl-stations { + grid-template-columns: repeat(2, minmax(0, 1fr)); + row-gap: 40px; + } +} + +@media screen and (max-width: 899px) { + .cl-outcomes { + grid-template-columns: minmax(0, 1fr); + } + + .cl-sponsor__inner { + flex-direction: column; + align-items: flex-start; + gap: 24px; + } + + .cl-footer__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cl-footer__grid > :first-child { + grid-column: 1 / -1; + } +} + +@media screen and (max-width: 759px) { + .cl-header__wide { + display: none; + } + + .cl-header__inner { + height: 64px; + padding: 0 12px 0 20px; + gap: 4px; + } + + .cl-brand { + gap: 10px; + font-size: 20px; + } + + .cl-brand img { + width: 32px; + height: 32px; + } + + .cl-wrap { + padding: 0 20px; + } + + .cl-hero { + padding: 36px 0 44px; + } + + .cl-band { + padding: 56px 0; + } + + .cl-chip { + font-size: 13px; + } + + .cl-hero__title { + margin-top: 24px; + } + + .cl-lead { + margin-top: 20px; + font-size: 16.5px; + } + + .cl-actions { + flex-direction: column; + margin-top: 26px; + } + + .cl-actions .cl-btn { + width: 100%; + height: 52px; + font-size: 16.5px; + } + + .cl-proof { + flex-direction: column; + gap: 10px; + margin-top: 26px; + } + + .cl-h2 { + margin-top: 10px; + font-size: 30px; + line-height: 1.1; + } + + .cl-sub, + .cl-intro > p { + margin-top: 10px; + font-size: 16px; + } + + .cl-head--split { + flex-direction: column; + align-items: flex-start; + gap: 20px; + } + + .cl-tools, + .cl-projects { + grid-template-columns: minmax(0, 1fr); + gap: 14px; + margin-top: 28px; + } + + .cl-tool { + gap: 10px; + padding: 22px; + } + + .cl-outcomes { + margin-top: 28px; + } + + .cl-outcome { + padding: 22px; + } + + .cl-outcome__art { + padding: 16px; + } + + .cl-strip { + flex-direction: column; + align-items: flex-start; + padding: 22px; + } + + .cl-sponsor { + padding: 44px 0; + } + + .cl-sponsor h2 { + font-size: 28px; + } + + .cl-sponsor p { + font-size: 16px; + } + + .cl-sponsor__actions { + flex-direction: column; + width: 100%; + } + + .cl-sponsor__actions .cl-btn { + width: 100%; + } +} + +@media screen and (max-width: 640px) { + .cl-hide-sm { + display: none; + } + + .cl-visual { + width: 100%; + padding: 60px 16px 70px; + } + + .cl-visual__ring path { + stroke-width: 10px; + } + + .cl-visual__pin { + top: 30px; + left: 0; + gap: 6px; + padding: 6px 11px; + font-size: 11px; + } + + .cl-visual__check { + top: 12px; + right: -8px; + width: 84px; + height: 72px; + } + + .cl-review__file { + padding: 11px 14px; + font-size: 12px; + } + + .cl-review__diff, + .cl-suggestion { + font-size: 12px; + line-height: 22px; + } + + .cl-review__diff .cl-diff__no { + width: 34px; + padding-right: 8px; + } + + .cl-review__diff .cl-diff__mark { + width: 14px; + } + + .cl-suggestion .cl-diff__mark { + width: 24px; + } + + .cl-comment { + margin: 4px 12px 12px; + } + + .cl-comment__head { + gap: 8px; + padding: 10px 12px; + font-size: 13px; + } + + .cl-comment__body { + gap: 10px; + padding: 10px 12px 12px; + } + + .cl-comment__body p { + font-size: 13.5px; + } + + .cl-fixchip { + bottom: 0; + gap: 10px; + padding: 10px 14px 10px 10px; + } + + .cl-fixchip__icon { + width: 28px; + height: 28px; + } + + .cl-fixchip__text, + .cl-fixchip__text code { + font-size: 11.5px; + } + + .cl-stations { + grid-template-columns: minmax(0, 1fr); + } + + .cl-code { + padding: 18px; + font-size: 12.5px; + line-height: 21px; + } +} + +@media screen and (max-width: 479px) { + .cl-footer__grid { + grid-template-columns: minmax(0, 1fr); + } +} From 632877e6c2707affda3a3443f25863827ffc2e50 Mon Sep 17 00:00:00 2001 From: Xianpeng Shen Date: Thu, 24 Sep 2026 21:50:11 +0300 Subject: [PATCH 2/6] docs: match the home page to what the tools do, and unify site colors The review and summary comment mockups now show github-actions as the author, with the wording cpp-linter actually posts. There is no cpp-linter bot account; comments come from the workflow token or your own App. Copy that read opt-in features as defaults now names the input and the permission it needs: review suggestions, the summary comment and auto-fix. The version pin, the CLI in other CI, the clang-tools channels (Docker up to 22, a macOS Homebrew tap for 19 to 23) and the licensing are stated as they are. The quick start uses checkout@v7 and one review type, and no longer sets thread-comments, which fails on pull requests from forks. Waybar only keeps the action in a disabled .yml.bak workflow, so it is dropped from the home page and the showcase, and the star total falls to 75,000+. The other 34 showcase projects were rechecked. Inner pages now use the home page's paper background, light header and tabs, ink footer and fonts in the light scheme. Fonts load site-wide from overrides/main.html; the dark scheme keeps Material's colors. --- docs/index.md | 2 +- docs/overrides/home.html | 129 +++++++++++++++++++------------------ docs/overrides/main.html | 15 +++++ docs/showcase.md | 8 ++- docs/stylesheets/extra.css | 93 +++++++++++++++++++++++--- docs/stylesheets/home.css | 34 ++++++---- mkdocs.yml | 2 + 7 files changed, 194 insertions(+), 89 deletions(-) create mode 100644 docs/overrides/main.html diff --git a/docs/index.md b/docs/index.md index e13d708..a090386 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,7 +5,7 @@ hide: - feedback template: home.html title: C/C++ Linting -description: clang-format and clang-tidy for C and C++ pull requests, pre-commit hooks and CI, with one LLVM version everywhere. +description: clang-format and clang-tidy for C and C++ pull requests, pre-commit hooks and CI, with the LLVM version you pin. --- diff --git a/docs/overrides/home.html b/docs/overrides/home.html index ab05972..2b9c0c3 100644 --- a/docs/overrides/home.html +++ b/docs/overrides/home.html @@ -2,14 +2,11 @@ {#- The home page has its own header, sections and footer; every other page - keeps the standard Material layout. home.css and the fonts below are only - loaded on this page. + keeps the standard Material layout. home.css is only loaded on this page. -#} {% block extrahead %} {{ super() }} - - {% endblock %} @@ -81,10 +78,12 @@

already checked.

- cpp-linter runs clang-format and clang-tidy on the code each pull - request changes and posts the fixes as suggestions a reviewer can - apply in one click. Every laptop and CI runner uses the same LLVM - version. + cpp-linter runs clang-format and clang-tidy on the files each pull + request changes and reports what it finds in the job log and as + annotations on the pull request. Turn on reviews and the fixes arrive + as suggestions you commit in one click. Set the same LLVM version in + the workflow and the pre-commit hooks, and laptops and CI use the + same major release.

Add it to a repository {{ arrow }} @@ -94,12 +93,12 @@

  • {{ check }} Used by 1,000+ repositories
    • -
  • {{ check }} 30K+ downloads a month
    • -
  • {{ check }} Free and MIT licensed
    • +
  • {{ check }} Linux, macOS and Windows runners
    • +
  • {{ check }} Free and open source
-