Skip to content

Styling: fix alignment on homepage #4669

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 4 commits into from
Oct 30, 2025
Merged

Styling: fix alignment on homepage #4669

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
5322ba9
updat community icon
Blargian Oct 29, 2025
5878887
add external link overlay
Blargian Oct 29, 2025
16992ed
center search text
Blargian Oct 30, 2025
e461b07
fix spacing
Blargian Oct 30, 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
92 changes: 55 additions & 37 deletions src/components/IntegrationGrid/IntegrationGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,37 +72,60 @@ function IntegrationCard({ integration }: { integration: IntegrationData }) {

const linkTo = getNavigationLink(integration.docsLink, integration.slug);

// Check if this is an external link (not to clickhouse.com/docs)
const isExternalLink = linkTo.startsWith('http') && !linkTo.includes('clickhouse.com/docs');

return (
<Link
to={linkTo}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<CUICard style={{ position: 'relative' }}>
{/* Tier Icon in top right corner */}
{integration.integration_tier && integration.integration_tier !== 'community' && (
<div style={{
position: 'absolute',
top: '12px',
right: '12px',
zIndex: 1,
opacity: 0.7
}}>
{getTierIcon(integration.integration_tier)}
</div>
)}
<CUICard.Body>
<CUICard.Header>
<img
src={getLogoSrc()}
alt={`${integration.integration_title || integration.slug} logo`}
/>
</CUICard.Header>
<CUICard.Footer>
{integration.integration_title}
</CUICard.Footer>
</CUICard.Body>
</CUICard>
</Link>
<div className={styles.cardWrapper}>
<Link
to={linkTo}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<CUICard style={{ position: 'relative' }}>
{/* Tier Icon in top right corner */}
{integration.integration_tier && integration.integration_tier !== 'community' && (
<div style={{
position: 'absolute',
top: '12px',
right: '12px',
zIndex: 1,
opacity: 0.7
}}>
{getTierIcon(integration.integration_tier)}
</div>
)}
<CUICard.Body>
<CUICard.Header>
<img
src={getLogoSrc()}
alt={`${integration.integration_title || integration.slug} logo`}
/>
</CUICard.Header>
<CUICard.Footer>
{integration.integration_title}
</CUICard.Footer>
</CUICard.Body>
</CUICard>
</Link>
{/* External link overlay */}
{isExternalLink && (
<div className={styles.externalLinkOverlay}>
<svg
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</div>
)}
</div>
);
}

Expand Down Expand Up @@ -630,13 +653,8 @@ function getTierIcon(tier: string, withMargin = false): React.ReactNode {
);
case 'community':
return (
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style={marginStyle}>
<path fillRule="evenodd" clipRule="evenodd" d="M6.22168 4.44463V4.44463C6.22168 3.46263 7.01768 2.66663 7.99968 2.66663V2.66663C8.98168 2.66663 9.77768 3.46263 9.77768 4.44463V4.44463C9.77768 5.42663 8.98168 6.22263 7.99968 6.22263V6.22263C7.01768 6.22196 6.22168 5.42596 6.22168 4.44463Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.91309 11.5553V11.5553C1.91309 10.5733 2.70909 9.77734 3.69109 9.77734V9.77734C4.67309 9.77734 5.46909 10.5733 5.46909 11.5553V11.5553C5.46842 12.5373 4.67309 13.3333 3.69109 13.3333V13.3333C2.70909 13.3333 1.91309 12.5373 1.91309 11.5553Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M10.5322 11.5553V11.5553C10.5322 10.5733 11.3282 9.77734 12.3102 9.77734V9.77734C13.2922 9.77734 14.0882 10.5733 14.0882 11.5553V11.5553C14.0882 12.5373 13.2922 13.3333 12.3102 13.3333V13.3333C11.3276 13.3333 10.5322 12.5373 10.5322 11.5553H10.5322Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.5939 11.1134H5.40723" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.95996 5.94006L11.54 9.96006" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.45996 9.96006L7.03996 5.94006" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" style={marginStyle}>
<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
</svg>
);
default:
Expand Down
40 changes: 40 additions & 0 deletions src/components/IntegrationGrid/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,4 +178,44 @@
font-size: 1.1rem;
margin: 0;
}
}

.externalLinkOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
border-radius: 8px;
pointer-events: none;

[data-theme='dark'] & {
background: rgba(255, 255, 255, 0.15);
}

svg {
width: 32px;
height: 32px;
color: white;

[data-theme='dark'] & {
color: var(--ifm-color-emphasis-800);
}
}
}

.cardWrapper {
position: relative;

&:hover .externalLinkOverlay {
opacity: 1;
}
}
11 changes: 10 additions & 1 deletion src/css/home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@
@media (min-width: 768px) {
flex-direction: row;
padding-top: 2rem;
padding-bottom: 2rem;
padding-bottom: 2.5rem;
padding-right: 2rem;
justify-content: space-between;
}
Expand All @@ -231,6 +231,15 @@
}
}

.docs-doc-id-home-page .home-page-section-search p + .home-page-hero-right-search {
margin-top: 0 !important;
}

/* Also target the SearchBar wrapper directly */
.docs-doc-id-home-page .home-page-hero-right-search {
margin-top: 0 !important;
}

.home-page-section:last-of-type {
border-bottom: none;
}
Expand Down
10 changes: 5 additions & 5 deletions src/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const Hero = ({children, color}) => {
}}>
<div style={{display: 'flex', float: 'left', margin: 0, marginRight: '8px'}}><IconLightning
iconWidth={'24px'}/></div>
<div>Quick Start</div>
<div>Quick start</div>
</div>
<div>Get started with Cloud</div>
</a>
Expand Down Expand Up @@ -93,7 +93,7 @@ export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link})
export const SearchClickHouse = ({children, color}) => {
return (
<div className='home-page-section-search'>
<p style={{fontWeight: '600', fontSize: '18px', margin: 'auto', flex: '1'}}>Search documentation</p>
<p style={{fontWeight: '600', fontSize: '18px', marginTop: '1.5rem', flex: '1'}}>Search documentation</p>
<div className='home-page-hero-right-search'>
<SearchBar style="width: 75%"/>
</div>
Expand Down Expand Up @@ -175,10 +175,10 @@ export const DeployClickHouse = ({children, color}) => {
<HomePageOptionButton svgIcon={<IconCloud iconWidth='28px'/>}
link='https://clickhouse.com/cloud'>Cloud</HomePageOptionButton>
<HomePageOptionButton svgIcon={<IconSingleNode iconWidth='28px'/>}
link='/docs/architecture/introduction'>Node Deployment</HomePageOptionButton>
link='/docs/architecture/introduction'>Node deployment</HomePageOptionButton>
<HomePageOptionButton svgIcon={<IconCluster iconWidth='28px'/>}
link='/docs/architecture/cluster-deployment'>Cluster
Deployment</HomePageOptionButton>
deployment</HomePageOptionButton>
</div>
</div>
)
Expand All @@ -199,7 +199,7 @@ export const MoreResources = ({children, color}) => {
link='/docs/whats-new/changelog'>Changelog</HomePageOptionButton>
<HomePageOptionButton svgIcon={<IconDatasets iconWidth='28px'/>}
link='/docs/getting-started/example-datasets'>Sample
Datasets</HomePageOptionButton>
datasets</HomePageOptionButton>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/theme/Navbar/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,4 @@ export default function NavbarContent() {
</div>
</div>
);
}
}
11 changes: 3 additions & 8 deletions src/theme/badges/CommunityMaintained/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,9 @@ import styles from "./styles.module.css"

const Icon = () => {
return (
<div className={styles.CommunityMaintainedIcon} style={{ marginRight: '8px', marginTop: '4px' }}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M6.22168 4.44463V4.44463C6.22168 3.46263 7.01768 2.66663 7.99968 2.66663V2.66663C8.98168 2.66663 9.77768 3.46263 9.77768 4.44463V4.44463C9.77768 5.42663 8.98168 6.22263 7.99968 6.22263V6.22263C7.01768 6.22196 6.22168 5.42596 6.22168 4.44463Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M1.91309 11.5553V11.5553C1.91309 10.5733 2.70909 9.77734 3.69109 9.77734V9.77734C4.67309 9.77734 5.46909 10.5733 5.46909 11.5553V11.5553C5.46842 12.5373 4.67309 13.3333 3.69109 13.3333V13.3333C2.70909 13.3333 1.91309 12.5373 1.91309 11.5553Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M10.5322 11.5553V11.5553C10.5322 10.5733 11.3282 9.77734 12.3102 9.77734V9.77734C13.2922 9.77734 14.0882 10.5733 14.0882 11.5553V11.5553C14.0882 12.5373 13.2922 13.3333 12.3102 13.3333V13.3333C11.3276 13.3333 10.5322 12.5373 10.5322 11.5553H10.5322Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.5939 11.1134H5.40723" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.95996 5.94006L11.54 9.96006" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.45996 9.96006L7.03996 5.94006" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" />
<div className={styles.CommunityMaintainedIcon} style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 256 256">
<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
</svg>
</div>
)
Expand Down
8 changes: 4 additions & 4 deletions src/theme/badges/CommunityMaintained/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
}

.CommunityMaintainedIcon svg path {
fill: #69afff;
stroke: #ffffff;
fill: #ffffff;
stroke: none;
}

.CommunityMaintainedBadge a {
Expand All @@ -34,6 +34,6 @@
}

[data-theme="dark"] .CommunityMaintainedIcon svg path {
fill: #69afff;
stroke: #ffffff;
fill: #ffffff;
stroke: none;
}