Refresh site design, content, and layout

[aclark4life]

Summary

A visual and content refresh of the site featuring our GitHub Sponsors profile.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

[Copilot]

Pull request overview

This PR delivers a visual/content refresh of the Pillow website by replacing the prior Bootstrap-based layout with a custom, framework-free single-page design and updated supporting assets/tooling.

Changes:

• Rebuild index.html into a new sectioned layout (hero, project links, sponsor pitch, enterprise, showcase, history, footer) and remove Bootstrap usage.
• Add a full custom stylesheet and a small “back to top” behavior script.
• Add repo hygiene/tooling docs and configuration (README.rst, justfile, .pre-commit-config.yaml).

Reviewed changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
README.rst	Expands project/site structure and local contributing guidance.
justfile	Adds a convenience task to run pre-commit across the repo.
index.html	Replaces the site layout/content with the refreshed design and new sections.
assets/js/back-to-top.js	Implements scroll-driven visibility for the “back to top” button.
assets/images/sonar-logo.svg	Adds the Sonar logo asset for the enterprise section.
assets/images/psychedelic-glow.png	Adds background art asset used in the hero styling.
assets/css/pillow.css	Introduces a complete custom CSS design system and page styling.
.pre-commit-config.yaml	Adds pre-commit hooks for whitespace/format/basic validation and large-file checks.

Comments suppressed due to low confidence (7)

index.html:133

• This external link opens in a new tab but is missing rel="noopener"/"noreferrer", which can allow reverse-tabnabbing.

                        <a class="btn btn-sponsor-light btn-lg" target="_blank" href="https://github.com/sponsors/python-pillow">
                            <i class="fas fa-heart"></i>Become a GitHub Sponsor</a>

index.html:88

• These documentation links use target="_blank" without rel="noopener"/"noreferrer". Add rel to mitigate reverse-tabnabbing (and apply the same pattern to other target="_blank" links in this page).

                                Our <a target="_blank" href="https://pillow.readthedocs.io/">documentation</a> is hosted by Read the Docs and includes
                                <a target="_blank" href="https://pillow.readthedocs.io/en/stable/installation.html">installation instructions</a>,
                                <a target="_blank" href="https://pillow.readthedocs.io/en/stable/handbook/index.html">handbook</a>,
                                <a target="_blank" href="https://pillow.readthedocs.io/en/stable/reference/index.html">API reference</a> and
                                <a target="_blank" href="https://pillow.readthedocs.io/en/stable/releasenotes/index.html">release notes</a>.

index.html:272

• These footer social links open in a new tab but are missing rel="noopener"/"noreferrer" (Mastodon currently only has rel="me").

                        <a class="icon-link" target="_blank" href="https://github.com/python-pillow/Pillow" aria-label="GitHub">
                            <i class="fab fa-github"></i></a>
                        <a class="icon-link" target="_blank" href="https://fosstodon.org/@pillow" rel="me" aria-label="Mastodon">
                            <i class="fab fa-mastodon"></i></a>

index.html:281

• These links open in a new tab but are missing rel="noopener"/"noreferrer".

                        <li><a target="_blank" href="https://pillow.readthedocs.io/">Documentation</a></li>
                        <li><a target="_blank" href="https://pillow.readthedocs.io/en/stable/releasenotes/index.html">Release notes</a></li>
                        <li><a target="_blank" href="https://github.com/python-pillow/Pillow">Source code</a></li>
                        <li><a target="_blank" href="https://pypi.org/project/pillow/">PyPI package</a></li>

index.html:291

• These links open in a new tab but are missing rel="noopener"/"noreferrer".

                        <li><a target="_blank" href="https://github.com/python-pillow/Pillow/issues">GitHub issues</a></li>
                        <li><a target="_blank" href="https://stackoverflow.com/questions/tagged/python-imaging-library">Stack Overflow</a></li>
                        <li><a target="_blank" href="https://gitter.im/python-pillow/Pillow">Gitter</a></li>
                        <li><a target="_blank" href="https://github.com/python-pillow/Pillow/graphs/contributors">Contributors</a></li>
                    </ul>

index.html:296

• This external link opens in a new tab but is missing rel="noopener"/"noreferrer".

                    <a class="btn btn-sponsor btn-sm" target="_blank" href="https://github.com/sponsors/python-pillow">Become a Sponsor</a>

index.html:305

• Links opened with target="_blank" should include rel="noopener"/"noreferrer" to prevent reverse-tabnabbing.

                    © 1995-2011 Fredrik Lundh and contributors. © 2010-2024 Jeffrey 'Alex' Clark and
                    <a target="_blank" href="https://github.com/python-pillow/Pillow/graphs/contributors">contributors</a>.
                    Logo by Alastair Houghton. Psychedelic art by Jeremy Kun.
                </p>
                <a target="_blank" href="https://github.com/python-pillow/python-pillow.github.io">Site source</a>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 10 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (9)

index.html:66

• The decorative heart icon in this button should be hidden from screen readers, and there should be a space between the icon and the label so it is read/selected cleanly.

                            <a class="btn btn-sponsor btn-lg" href="#sponsor">
                                <i class="fas fa-heart"></i>Sponsor</a>
                        </div>

index.html:117

• The heart icon in this heading is decorative; mark it aria-hidden so it isn't announced redundantly before the heading text.

                        <h2><i class="fas fa-heart"></i> Support Pillow's Future</h2>

index.html:295

• The heart icon in this section heading is decorative; mark it aria-hidden so it doesn't get announced separately from the heading text.

                    <h4><i class="fas fa-heart"></i> Support Pillow</h4>
                    <p>Pillow is maintained by volunteers. Sponsorship funds security fixes, reviews and new features.</p>

index.html:311

• The back-to-top link already has an aria-label, so the arrow icon should be aria-hidden to avoid being announced redundantly.

        <a class="back-to-top" href="#top" aria-label="Back to top">
            <i class="fas fa-arrow-up"></i>
        </a>

assets/css/pillow.css:644

• ul elements retain default browser margin/padding unless reset, which can cause unexpected indentation/misalignment in the footer columns. Reset margin/padding in this rule to keep layout consistent across browsers.

.footer-col ul {
    list-style: none;
    display: grid;
    gap: .6rem;
}

index.html:46

• Font Awesome icons here are decorative but are not marked as such, so some assistive technologies may announce them (and the button text is currently glued directly to the icon, which can also read awkwardly). Add aria-hidden to the icons and include a space before the visible text.

This issue also appears in the following locations of the same file:

• line 64
• line 117
• line 294
• line 309

                    <a class="btn btn-sponsor btn-sm" href="#sponsor">
                        <i class="fas fa-heart"></i>Sponsor</a>
                    <a class="icon-link" target="_blank" rel="noopener noreferrer" href="https://github.com/python-pillow/Pillow" aria-label="GitHub">
                        <i class="fab fa-github"></i></a>
                    <a class="icon-link" target="_blank" href="https://fosstodon.org/@pillow" rel="me noopener noreferrer" aria-label="Mastodon">
                        <i class="fab fa-mastodon"></i></a>

index.html:272

• These links already have aria-labels, so the nested icon elements should be aria-hidden to avoid duplicate/ambiguous announcements by assistive technologies.

                        <a class="icon-link" target="_blank" rel="noopener noreferrer" href="https://github.com/python-pillow/Pillow" aria-label="GitHub">
                            <i class="fab fa-github"></i></a>
                        <a class="icon-link" target="_blank" href="https://fosstodon.org/@pillow" rel="me noopener noreferrer" aria-label="Mastodon">
                            <i class="fab fa-mastodon"></i></a>

assets/js/back-to-top.js:13

• On short pages (where document height <= viewport height), atBottom evaluates true even at scrollY=0, causing the “back to top” button to be visible immediately. Gate the bottom detection on the page being scrollable.

        var scrollY = window.scrollY || window.pageYOffset;
        var atBottom = window.innerHeight + scrollY >= document.documentElement.scrollHeight - 4;
        button.classList.toggle("is-visible", scrollY > SHOW_AFTER_PX || atBottom);

index.html:251

• This link URL ends with a bare "#", which just navigates to the top of the release notes page. If the intent is to link to the Pillow 9.0.0 release notes page itself, remove the trailing hash so it’s a canonical URL.

                    <a target="_blank" rel="noopener noreferrer" href="https://pillow.readthedocs.io/en/stable/releasenotes/9.0.0.html#">Pillow 9.0.0</a> was dedicated to the memory of Fredrik Lundh, aka Effbot, who died in

[Copilot]

Pull request overview

Copilot reviewed 7 out of 11 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (7)

index.html:177

• The decorative Font Awesome icon is missing aria-hidden, so some screen readers may announce it instead of just the heading text.

                            <h3><i class="fas fa-square"></i>Wagtail</h3>

index.html:185

• The decorative Font Awesome icon is missing aria-hidden, so some screen readers may announce it instead of just the heading text.

                            <h3><i class="fas fa-square"></i>Home Assistant</h3>

index.html:193

• The decorative Font Awesome icon is missing aria-hidden, so some screen readers may announce it instead of just the heading text.

                            <h3><i class="fas fa-square"></i>Matplotlib</h3>

assets/css/pillow.css:36

• Smooth scrolling should be disabled when the user has prefers-reduced-motion enabled, otherwise it can cause motion-sickness for some users.

html {
    scroll-behavior: smooth;
}

index.html:24

• With the new CNAME pointing at python-pillow.org, the canonical URL should be updated to the custom domain to avoid SEO/caching inconsistencies (and to prevent search engines preferring the github.io URL).

        <link rel="icon" type="image/x-icon" href="assets/images/pillow.ico">
        <link rel="canonical" href="https://python-pillow.github.io/">

README.rst:4

• README still states the site is hosted at python-pillow.github.io, but this PR adds a CNAME for python-pillow.org. The README should reflect the primary/custom domain (optionally mentioning the github.io URL as an alias).

This website is hosted at `python-pillow.github.io <https://python-pillow.github.io/>`_.

index.html:169

• The decorative Font Awesome icon is missing aria-hidden, so some screen readers may announce it instead of just the heading text.

This issue also appears in the following locations of the same file:

• line 177
• line 185
• line 193

                            <h3><i class="fas fa-square"></i>Django</h3>

[Copilot]

Pull request overview

Copilot reviewed 7 out of 12 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

assets/css/pillow.css:749

• The “back to top” link is hidden using opacity/pointer-events only. It remains focusable via keyboard navigation even when invisible, which is confusing for keyboard/screen-reader users. Add visibility: hidden by default and toggle it alongside the .is-visible state so it’s removed from the tab order when hidden.

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--ink);
    color: var(--paper);
    border: 2px solid var(--coral);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    text-decoration: none;
    font-size: 1.1rem;
    z-index: 10;
    opacity: 0;
    transform: translateY(.5rem);
    pointer-events: none;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, background-color .15s ease-in-out;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

[Copilot]

Pull request overview

Copilot reviewed 7 out of 12 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (2)

index.html:134

• Avoid inline styling here; it makes future styling changes harder and bypasses the stylesheet. Consider replacing this with a semantic class (e.g. class="sponsor-cta") and moving text-align: center into assets/css/pillow.css.

                    <div style="text-align: center;">
                        <a class="btn btn-sponsor-light btn-lg" href="https://github.com/sponsors/python-pillow">
                            <i class="fas fa-heart" aria-hidden="true"></i> Become a GitHub Sponsor</a>
                    </div>

index.html:300

• The footer copyright range is now outdated (current year is 2026). Update the end year so the site content stays accurate.

                    © 1995-2011 Fredrik Lundh and contributors. © 2010-2024 Jeffrey 'Alex' Clark and
                    <a href="https://github.com/python-pillow/Pillow/graphs/contributors">contributors</a>.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 12 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

assets/css/pillow.css:250

• .hero::before applies a CSS filter over a full-viewport pseudo-element. GPU filters on large layers are relatively expensive on low-end/mobile devices (extra compositing + repaint costs), especially above-the-fold. Consider pre-blurring/pre-saturating the background asset instead (or dropping the filter) to keep the hero lightweight.

    background-image: url(../images/psychedelic-glow.png);
    background-size: cover;
    background-position: center;
    filter: blur(1px) saturate(1.3);
    opacity: .45;

[Copilot]

Pull request overview

Copilot reviewed 7 out of 13 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

index.html:123

• In the sponsor pitch text, “well maintained” should be hyphenated as the compound adjective “well-maintained”, and adding a comma improves readability (“secure, fast, and …”).

                            Millions of projects depend on Pillow every day. If Pillow powers your product or
                            business, consider sponsoring us to help keep it secure, fast and well maintained
                            for everyone.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 13 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

assets/js/back-to-top.js:15

• The bottom-of-page threshold uses a hard-coded 4 pixel fudge factor. Making it a named constant (with a brief name indicating its purpose) will make the intent clearer and easier to tweak later.

        var atBottom = isScrollable && window.innerHeight + scrollY >= pageHeight - 4;

[Copilot]

Pull request overview

Copilot reviewed 7 out of 13 changed files in this pull request and generated no new comments.