github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-29 14:00:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Align the Help Center footer with penpot.app

Browse Source 
The footer had a hardcoded 2025 copyright and links that no longer match
penpot.app. The year is now set at build time. Sections, links and
social icons follow the current penpot.app footer, and the grid wraps
into two rows to fit the new sections.

Closes #12132

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Andres Gonzalez 2026-10-08 08:36:52 +02:00
parent e7041234f3
commit 3949adff52
6 changed files with 78 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/_includes/layouts/base.njk
View File

@ -89,39 +89,72 @@
<ul class="footer-block">
<li class="footer-block--title">Product</li>
<li><a href="https://penpot.app/design">Design</a></li>
<li><a href="https://penpot.app/ai/mcp-server">MCP Server</a></li>
<li><a href="https://penpot.app/code">Code</a></li>
<li><a href="https://penpot.app/collaboration">Collaboration</a></li>
<li><a href="https://penpot.app/integrations-api">Integrations & API</a></li>
<li><a href="https://penpot.app/self-host">Self-host</a></li>
<li><a href="https://penpot.app/features">Features</a></li>
<li><a href="https://penpot.app/pricing">Pricing</a></li>
<li><a href="https://penpot.app/design/design-tool">Design Tool</a></li>
<li><a href="https://penpot.app/penpot-vs-figma">Penpot vs Figma</a></li>
<li><a href="https://penpot.app/penpot-vs-adobexd">Penpot vs Adobe XD</a></li>
<li><a href="https://penpot.app/penpot-vs-canva">Penpot vs Canva</a></li>
<li><a href="https://penpot.app/penpot-vs-sketch">Penpot vs Sketch</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Resources</li>
<li><a href="https://penpot.app/libraries-templates">Libraries & templates</a></li>
<li><a href="https://penpot.app/courses/">Penpot UI Design Course</a></li>
<li><a href="https://penpot.app/penpothub/plugins">Plugins</a></li>
<li><a href="https://penpot.app/penpothub/libraries-templates">Libraries & templates</a></li>
<li><a href="https://penpot.app/learning-center">Learning center</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLgcCPfOv5v54WpXhHmNO7T-YC7AE-SRsr" target="_blank">Tutorials</a></li>
<li><a href="https://www.youtube.com/@Penpot" target="_blank">Tutorials</a></li>
<li><a href="https://community.penpot.app/" target="_blank">Community</a></li>
<li><a href="https://penpot.app/dev-diaries">Dev diaries</a></li>
<li><a href="https://penpot.app/release-notes">Release notes</a></li>
<li><a href="/">Help center</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Legal</li>
<li><a href="https://penpot.app/terms">Terms & conditions</a></li>
<li><a href="https://penpot.app/privacy">Privacy policy</a></li>
<li><a href="https://penpot.app/cookie">Cookie policy</a></li>
<li><a href="https://penpot.app/dpa">Data processing agreement</a></li>
<li class="footer-block--title">For Businesses</li>
<li><a href="https://penpot.app/security-and-compliance">Security & Compliance</a></li>
<li><a href="https://penpot.app/pricing">Pricing</a></li>
<li><a href="https://penpot.app/self-host">Self-host</a></li>
<li><a href="https://penpot.app/integrations-api">Integration & API</a></li>
<li><a href="https://penpot.app/why-penpot">Why Penpot</a></li>
<li><a href="https://penpot.app/penpot-enterprise">Penpot Enterprise</a></li>
<li><a href="https://penpot.app/open-design-infrastructure">Design Infrastructure</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Company</li>
<li><a href="https://penpot.app/about">About</a></li>
<li><a href="https://penpot.app/blog/">Blog</a></li>
<li><a href="https://penpot.app/wall-of-love">Wall of love</a></li>
<li><a href="https://penpotfest.org/">Penpot Fest</a></li>
<li><a href="https://penpot.app/penpotfest">Penpot Fest</a></li>
<li><a href="https://penpot.app/careers">Careers</a></li>
<li><a href="https://penpot.app/media-kit">Media Kit</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Use Cases</li>
<li><a href="https://penpot.app/design/wireframing">Wireframing</a></li>
<li><a href="https://penpot.app/design/prototyping">Prototyping</a></li>
<li><a href="https://penpot.app/design/ux-design">UX design</a></li>
<li><a href="https://penpot.app/ai/ai-workflows">AI Workflows</a></li>
<li><a href="https://penpot.app/design/collaborative-UI-design-software">Collaborative UI Design</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Key Features</li>
<li><a href="https://penpot.app/ai/mcp-server">Penpot MCP Server</a></li>
<li><a href="https://penpot.app/collaboration/design-tokens">Design Tokens</a></li>
<li><a href="https://penpot.app/design/design-systems">Design Systems</a></li>
<li><a href="https://penpot.app/design/layout">CSS Grid and Flex Layouts</a></li>
</ul>
<ul class="footer-block">
<li class="footer-block--title">Legal</li>
<li><a href="https://penpot.app/terms">Terms & conditions</a></li>
<li><a href="https://penpot.app/privacy-policy">Privacy policy</a></li>
<li><a href="https://penpot.app/cookie">Cookie policy</a></li>
<li><a href="https://penpot.app/dpa">Data processing agreement</a></li>
<li><a href="https://penpot.app/whistleblowing">Whistleblowing</a></li>
</ul>
</div>
<div class="footer-bottom">
<div class="footer-text"><span>Kaleidos © 2025 | Made with LOVE and Open Source</span></div>
<div class="footer-text"><span>Kaleidos © {% year %} | Made with LOVE and Open Source</span></div>
<div class="github-widget">
<a class="github-link" href="https://github.com/penpot/penpot" rel="noopener" target="_blank" aria-label="Star penpot/penpot on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.208 58.208" version="1.1">
@ -137,11 +170,14 @@
<ul class="footer-icon-list">
<li><a href="https://github.com/penpot" target="_blank" title="GitHub"><img src="/img/github.svg" alt="GitHub"/></a></li>
<li><a href="https://fosstodon.org/@penpot/" target="_blank" title="Mastodon"><img src="/img/mastodon.svg" alt="Mastodon"/></a></li>
<li><a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank" title="YouTube"><img src="/img/youtube.svg" alt="YouTube"/></a></li>
<li><a href="https://bsky.app/profile/penpot.app" target="_blank" title="Bluesky"><img src="/img/bluesky.svg" alt="Bluesky"/></a></li>
<li><a href="https://www.youtube.com/@Penpot" target="_blank" title="YouTube"><img src="/img/youtube.svg" alt="YouTube"/></a></li>
<li><a href="https://peertube.kaleidos.net/" target="_blank" title="PeerTube"><img src="/img/peertube.svg" alt="PeerTube"/></a></li>
<li><a href="https://www.reddit.com/r/Penpot/" target="_blank" title="Reddit"><img src="/img/reddit.svg" alt="Reddit"/></a></li>
<li><a href="https://twitter.com/penpotapp" target="_blank"><img src="/img/x.svg" alt="X"/></a></li>
<li><a href="https://instagram.com/penpotapp/" target="_blank"><img src="/img/instagram.svg" alt="Instagram"/></a></li>
<li><a href="https://www.linkedin.com/company/penpot/" target="_blank"><img src="/img/linkedin.svg" alt="Linkedin"/></a></li>
<li><a href="https://twitter.com/penpotapp" target="_blank" title="X"><img src="/img/x.svg" alt="X"/></a></li>
<li><a href="https://instagram.com/penpot.app" target="_blank" title="Instagram"><img src="/img/instagram.svg" alt="Instagram"/></a></li>
<li><a href="https://www.linkedin.com/company/penpot/" target="_blank" title="LinkedIn"><img src="/img/linkedin.svg" alt="LinkedIn"/></a></li>
<li class="footer-dpg"><a href="https://www.digitalpublicgoods.net/r/penpot" target="_blank" title="Digital Public Good"><img src="/img/digital-public-good.png" alt="Digital Public Good"/></a></li>
</ul>
</div>
</footer>

21
docs/css/index.css
View File

@ -393,9 +393,13 @@ footer {
.footer-inside {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
column-gap: 1.5rem;
max-width: 1400px;
width: 100%;
}
.footer-inside .footer-logo {
grid-row: span 2;
}
.footer-inside .main-logo {
margin-right: auto;
}
@ -465,6 +469,9 @@ footer {
.footer-icon-list a img:hover {
fill: var(--graylight);
}
.footer-icon-list .footer-dpg a img {
width: auto;
}
.github-widget {
height: 28px;
display: grid;
@ -1172,7 +1179,19 @@ table tr:nth-child(odd) {
transform: rotate(180deg);
}
.footer-inside {
flex-direction: column;
grid-template-columns: 1fr 1fr;
}
.footer-inside .footer-logo {
grid-column: 1 / -1;
grid-row: auto;
}
.footer-bottom {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-icon-list {
flex-wrap: wrap;
height: auto;
}
:target[id]::before {
display: inline;

3
docs/eleventy.config.mjs
View File

@ -56,6 +56,9 @@ export default function (eleventyConfig) {
return Math.min.apply(null, numbers);
});
// Current year, resolved at build time.
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy("js");

1
docs/img/bluesky.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="4912.5 3531 16 16"><path fill="#fff" d="M4912.5 3533a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm3.893.475c-1.2-.901-3.143-1.597-3.143.62 0 .443.254 3.72.403 4.252.517 1.85 2.403 2.322 4.081 2.036-2.933.499-3.679 2.153-2.067 3.806 3.059 3.141 4.397-.788 4.74-1.794.063-.185.093-.271.093-.197 0-.074.03.012.093.197.343 1.006 1.681 4.934 4.74 1.794 1.611-1.653.865-3.306-2.067-3.806 1.678.286 3.564-.186 4.081-2.036.149-.532.403-3.809.403-4.252 0-2.217-1.943-1.521-3.143-.62-1.662 1.248-3.45 3.779-4.107 5.137-.656-1.358-2.445-3.889-4.107-5.137"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 644 B

BIN
docs/img/digital-public-good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

1
docs/img/peertube.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 222 222"><path fill="#fff" d="M0 27.4C0 12.277 12.277 0 27.4 0h167.2C209.724 0 222 12.277 222 27.4v167.2c0 15.123-12.277 27.4-27.4 27.4H27.4C12.277 222 0 209.723 0 194.6zm66 41.25v41.65l2.046-1.329c1.126-.73 15.228-10.091 31.339-20.802l29.293-19.473-31.34-20.848L66 27zm63.244 41.85c0 32.822.19 41.163.93 40.722C134.02 148.932 191 110.783 191 110.5s-56.98-38.431-60.826-40.722c-.74-.441-.93 7.9-.93 40.722M66 152.35V194l31.339-20.848 31.339-20.848-29.293-19.473c-16.111-10.71-30.213-20.072-31.339-20.802L66 110.7z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B