Skip to content

Footer design tweaks #3109

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
merged 5 commits into from
Apr 8, 2025
Merged

Footer design tweaks #3109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
80ada6b
Initial tweaks
zenoachtig Apr 7, 2025
d601188
Refactor to use grid
zenoachtig Apr 7, 2025
5f09516
Format
zenoachtig Apr 7, 2025
74a9aad
Changeset
zenoachtig Apr 7, 2025
095bbe6
Update for `page-no-toc` pages
zenoachtig Apr 7, 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
5 changes: 5 additions & 0 deletions .changeset/cold-crews-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"gitbook": patch
---

Tweak footer design (and refactor)
202 changes: 101 additions & 101 deletions packages/gitbook/src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,123 +15,123 @@ export function Footer(props: { context: GitBookSiteContext }) {
const { context } = props;
const { customization } = context;

const hasLogo = customization.footer.logo;
const groupCount = customization.footer.groups?.length ?? 0;
const hasGroups = groupCount > 0;
const hasCopyright = customization.footer.copyright;
const hasThemeToggle = customization.themes.toggeable;

const mobileOnly = !hasLogo && !hasGroups && !hasCopyright && hasThemeToggle;

return (
<footer
className={tcls(
'border-tint-subtle border-t',
// If the footer only contains a mode toggle, we only show it on smaller screens
customization.themes.toggeable &&
!customization.footer.copyright &&
!customization.footer.logo &&
customization.footer.groups?.length === 0
? 'xl:hidden'
: null
mobileOnly ? 'xl:hidden' : null
)}
>
<div className="scroll-nojump">
<div className={tcls(CONTAINER_STYLE, 'px-4', 'mx-auto', 'flex', 'gap-12')}>
<div className="hidden page-no-toc:hidden basis-72 lg:block" />
<div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
<div
className={tcls(
'py-8',
'gap-12',
'flex',
'flex-wrap',
'items-start',
'w-full',
'flex-1',
'max-w-3xl',
'page-full-width:max-w-none',
'mx-auto'
'mx-auto grid max-w-3xl justify-between gap-12 lg:max-w-none',
'grid-cols-[auto_auto]',
'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]'
)}
>
{/* Footer Logo */}
{customization.footer.logo ? (
<Image
alt="Logo"
resize={context.imageResizer}
sources={{
light: {
src: customization.footer.logo.light,
},
dark: customization.footer.logo.dark
? {
src: customization.footer.logo.dark,
}
: null,
}}
priority="lazy"
style={[
'w-auto',
'max-w-40',
'lg:max-w-64',
'max-h-12',
'object-contain',
'object-left',
'rounded',
'straight-corners:rounded-sm',
'order-1',
]}
sizes={[
{
width: 320,
},
]}
/>
) : null}
{
// Footer Logo
customization.footer.logo ? (
<div className="col-start-1 row-start-1">
<Image
alt="Logo"
resize={context.imageResizer}
sources={{
light: {
src: customization.footer.logo.light,
},
dark: customization.footer.logo.dark
? {
src: customization.footer.logo.dark,
}
: null,
}}
priority="lazy"
style={[
'w-auto',
'max-w-40',
'lg:max-w-64',
'max-h-10',
'lg:max-h-12',
'object-contain',
'object-left',
'rounded',
'straight-corners:rounded-sm',
]}
sizes={[
{
width: 320,
},
]}
/>
</div>
) : null
}

{/* Mode Switcher */}
{customization.themes.toggeable ? (
<div className="order-2 ml-auto flex items-center justify-end xl:hidden">
<React.Suspense fallback={null}>
<ThemeToggler />
</React.Suspense>
</div>
) : null}
{
// Theme Toggle
customization.themes.toggeable ? (
<div className="-col-start-2 row-start-1 flex items-start justify-end xl:hidden">
<React.Suspense fallback={null}>
<ThemeToggler />
</React.Suspense>
</div>
) : null
}

{/* Navigation Groups (split into equal columns) */}
{customization.footer.groups?.length > 0 ? (
<div
className={tcls(
'order-3 mx-auto flex w-full grow flex-col gap-10 sm:flex-row sm:gap-6',
!customization.footer.logo &&
customization.footer.groups.length < 2 &&
'self-center sm:order-1 sm:w-auto sm:max-w-3xl sm:flex-1 sm:items-start sm:text-start'
)}
>
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
(column, columnIndex) => (
<div
key={columnIndex}
className="flex w-full flex-col gap-10"
>
{column.map((group, groupIndex) => (
<FooterLinksGroup
key={groupIndex}
group={group}
context={context}
/>
))}
</div>
)
)}
</div>
) : null}
{
// Navigation groups (split into equal columns)
customization.footer.groups?.length > 0 ? (
<div
className={tcls(
'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2'
)}
>
<div className="mx-auto flex max-w-3xl flex-col gap-10 sm:flex-row sm:gap-6">
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
(column, columnIndex) => (
<div
key={columnIndex}
className="flex flex-1 grow flex-col gap-10"
>
{column.map((group, groupIndex) => (
<FooterLinksGroup
key={groupIndex}
group={group}
context={context}
/>
))}
</div>
)
)}
</div>
</div>
) : null
}

{/* Legal */}
<div
className={tcls(
'order-4 mx-auto flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs empty:hidden',
customization.footer.groups.length === 0 &&
'self-center sm:order-1 sm:w-auto sm:max-w-3xl sm:flex-1 sm:items-start sm:text-start'
)}
>
{customization.footer.copyright ? (
<p>{customization.footer.copyright}</p>
) : null}
</div>
{
// Legal
customization.footer.copyright ? (
<div className="order-last col-span-full flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs">
<p>{customization.footer.copyright}</p>
</div>
) : null
}
</div>
<div className="hidden page-no-toc:hidden lg:block xl:basis-56" />
</div>
</div>
</footer>
Expand Down