Skip to content

Add new Redpanda footer and optimize for performance #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JakeSCahill merged 4 commits into from
Nov 13, 2025
Merged

Add new Redpanda footer and optimize for performance #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe78a42
Redesign footer with improved layout and branding
JakeSCahill Nov 12, 2025
8e0a700
Implement optimizations recommended by our Lighthouse reports
JakeSCahill Nov 12, 2025
e4d3cb7
Apply suggestions
JakeSCahill Nov 12, 2025
c61b43d
Align footer with content
JakeSCahill Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@
"no-descending-specificity": null,
"selector-type-no-unknown": null,
"color-hex-length": null,
"length-zero-no-unit": null
"length-zero-no-unit": null,
"property-no-unknown": [
true,
{
"ignoreProperties": [
"contain",
"aspect-ratio"
]
}
]
}
}
18 changes: 13 additions & 5 deletions gulp.d/tasks/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,14 @@ module.exports = (src, dest, preview) => () => {
// NOTE concat already uses stat from newest combined file
.pipe(concat('js/site.js')),
vfs
.src(['js/vendor/*([^.])?(.bundle).js', '!js/vendor/sorttable.js'], { ...opts, read: false })
.src('js/vendor/*.bundle.js', { ...opts, read: false })
.pipe(bundle(opts))
.pipe(uglify({ output: { comments: /^! / } })),
// Handle sorttable.js separately without uglify
// Minify Prism plugins for 8.1 KiB savings
vfs
.src('js/vendor/sorttable.js', opts)
.pipe(through()),
.src(['js/vendor/prism/prism-line-highlight-plugin.js', 'js/vendor/prism/prism-line-numbers-plugin.js'], opts)
.pipe(uglify({ output: { comments: /^! / } })),
// sorttable.js will be copied unminified by the catch-all below (legacy code with non-strict-mode syntax)
vfs
.src('js/vendor/*.min.js', opts)
.pipe(map((file, enc, next) => next(null, Object.assign(file, { extname: '' }, { extname: '.js' })))),
Expand Down Expand Up @@ -101,7 +102,14 @@ module.exports = (src, dest, preview) => () => {
)
),
vfs.src('css/vendor/**/*.css', opts),
vfs.src('js/vendor/**/*.js', opts),
// Copy remaining vendor JS files (excluding already minified/processed ones)
vfs.src([
'js/vendor/**/*.js',
'!js/vendor/prism/prism-line-highlight-plugin.js',
'!js/vendor/prism/prism-line-numbers-plugin.js',
'!js/vendor/*.bundle.js',
'!js/vendor/*.min.js',
], opts),
vfs.src('helpers/*.js', opts),
vfs.src('layouts/*.hbs', opts),
vfs.src('partials/*.hbs', opts),
Expand Down
21 changes: 21 additions & 0 deletions src/css/doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ html {
line-height: var(--doc-line-height);
padding: 0 1rem 4rem;
margin-top: 3rem;
/* Reserve minimum space to prevent CLS */
min-height: 400px;
/* Isolate rendering to improve performance */
contain: layout style paint;
}

.doc ul.index {
Expand Down Expand Up @@ -93,6 +97,11 @@ html {
margin-top: 2rem;
}

.doc .sect1 {
/* Isolate rendering to improve performance */
contain: layout style;
}

.doc h1.sect0 {
background: var(--abstract-background);
font-size: 1.8em;
Expand Down Expand Up @@ -657,6 +666,18 @@ table code {
max-width: 100%;
vertical-align: middle;
background: white;
/* Optimize image rendering - use high quality for downscaled images */
image-rendering: auto;
/* Isolate image rendering to improve performance */
contain: layout style;
/* Prevent CLS from unsized images - use default aspect ratio */
aspect-ratio: 16 / 9;
}

/* Once image loads, use its natural aspect ratio */
.doc .imageblock img[width][height],
.doc .image > img[width][height] {
aspect-ratio: auto;
}

.doc .image:not(.left):not(.right) > img {
Expand Down
183 changes: 128 additions & 55 deletions src/css/footer-bump.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,99 +2,172 @@
--body-font-family: "Inter", sans-serif;
--body-faint-font-color: #667085;
--body-font-color: #181818;
--body-background: #fff;
--secondary-font-size: calc(15.5 / 18 * 1rem);
--nav-border-color: #f2f4f7;
--doc-max-width: 1000px;
--toc-width: calc(250 / 18 * 1rem);
--toc-width--widescreen: 25%;
--toc-width--widescreen: calc(350 / 18 * 1rem);
--link-highlight-color: #444ce7;
--body-font-family-bold: "Inter", sans-serif;
}

html[data-theme=dark] {
--body-font-color: white;
--body-background: #181818;
}

/* Footer container */
footer.footer {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
font-family: var(--body-font-family);
padding-top: 48px;
color: var(--body-faint-font-color);
font-size: var(--secondary-font-size);
background-color: var(--body-background);
border-top: 1px solid var(--nav-border-color);
color: var(--body-font-color);
font-family: var(--body-font-family);
min-height: 300px;
contain: layout style;
}

footer nav.footer-nav {
.padding-global {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.container-large {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
}

.footer__wrap {
padding-top: 3rem;
padding-bottom: 2rem;
}

/* Footer top section */
.footer__top {
display: flex;
font-size: var(--secondary-font-size);
width: 100%;
padding-bottom: 30px;
flex: 1 1 0%;
flex-direction: row;
justify-content: space-between;
font-family: "Calibre Regular", sans-serif;
max-width: var(--doc-max-width);
margin: 0 auto;
flex-direction: column;
gap: 2rem;
margin-bottom: 2.5rem;
}

.footer__logo-link {
display: inline-block;
}

.footer__logo {
height: 40px;
width: auto;
}

/* Footer columns */
.footer__columns {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

footer .footer-links {
.footer__column {
display: flex;
flex-direction: column;
line-height: 1.5rem;
font-size: var(--secondary-font-size);
margin: 0;
gap: 0.75rem;
}

.footer-links-heading {
display: inline;
line-height: 1rem;
letter-spacing: 0.2em;
margin-bottom: 20px;
font-weight: 300;
.footer__header {
font-weight: 600;
font-size: 0.875rem;
color: var(--body-font-color);
font-size: var(--secondary-font-size);
margin-bottom: 0.5rem;
font-family: var(--body-font-family-bold);
}

.footer-links-list {
line-height: 1.5rem;
.footer__link {
font-size: 0.875rem;
color: var(--body-faint-font-color);
text-decoration: none;
transition: color 0.2s;
line-height: 1.5;
}

.footer__link:hover {
color: var(--link-highlight-color);
}

/* Grey line separator */
.line__grey {
height: 1px;
background-color: var(--nav-border-color);
margin: 2rem 0;
}

/* Footer bottom section */
.footer__bottom {
display: flex;
flex-direction: column;
padding-left: 0;
gap: 5px;
margin: 0;
font-size: var(--secondary-font-size);
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}

.footer-links-list-item {
list-style: none;
.footer__socials {
display: flex;
gap: 1rem;
align-items: center;
}

.footer-links-list-item-detail {
max-height: 19px;
color: var(--body-faint-font-color) !important;
text-decoration: none;
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--body-faint-font-color);
transition: color 0.2s;
}

@media (min-width: 1024px) {
body.home footer nav.footer-nav {
max-width: var(--doc-max-width);
}
.footer__social-link:hover {
color: var(--link-highlight-color);
}

footer .footer-links {
margin-right: 1rem;
}
.footer__social-link svg {
width: 100%;
height: auto;
max-width: 24px;
max-height: 24px;
}

main:not(.labs):not(.home) footer.footer {
width: calc(100% - var(--toc-width));
margin-left: 48px;
.footer__legal-container {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
font-size: 0.75rem;
}

.text-style-footer-legal {
color: var(--body-faint-font-color);
font-size: 0.75rem;
text-decoration: none;
transition: color 0.2s;
}

.text-style-footer-legal:hover {
color: var(--link-highlight-color);
}

@media (min-width: 769px) {
.footer__columns {
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
}

@media screen and (min-width: 1350px) {
main:not(.labs):not(.home) footer.footer {
width: calc(100% - var(--toc-width--widescreen));
@media (min-width: 1024px) {
.footer__top {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}

Expand Down
Loading
Loading