style(sponsor): stack the banner's sponsor tag above Visit

This commit is contained in:
MHSanaei
2026-10-03 12:34:46 +02:00
parent 0054e671f8
commit 7d232a76c9
2 changed files with 21 additions and 3 deletions
@@ -95,6 +95,14 @@
white-space: nowrap; white-space: nowrap;
} }
.sponsor-aside {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.sponsor-close { .sponsor-close {
flex: 0 0 auto; flex: 0 0 auto;
align-self: flex-start; align-self: flex-start;
@@ -197,8 +205,10 @@
padding: 10px 12px; padding: 10px 12px;
} }
.sponsor-card-banner .sponsor-visit { .sponsor-card-banner .sponsor-aside {
flex-basis: 100%; flex-basis: 100%;
flex-direction: row;
align-items: center;
padding-inline-start: 52px; padding-inline-start: 52px;
} }
} }
@@ -74,12 +74,20 @@ export default function SponsorCard({
<SponsorLogo sponsor={sponsor} /> <SponsorLogo sponsor={sponsor} />
<span className="sponsor-body" dir="auto"> <span className="sponsor-body" dir="auto">
<span className="sponsor-head"> <span className="sponsor-head">
<span className="sponsor-tag">{tag}</span> {variant !== 'banner' && <span className="sponsor-tag">{tag}</span>}
<span className="sponsor-title">{title}</span> <span className="sponsor-title">{title}</span>
</span> </span>
{text && <span className="sponsor-text">{text}</span>} {text && <span className="sponsor-text">{text}</span>}
</span> </span>
{variant !== 'compact' && ( {variant === 'banner' && (
<span className="sponsor-aside">
<span className="sponsor-tag">{tag}</span>
<span className="sponsor-visit">
{t('pages.sponsors.visit')} <ExportOutlined />
</span>
</span>
)}
{variant === 'card' && (
<span className="sponsor-visit"> <span className="sponsor-visit">
{t('pages.sponsors.visit')} <ExportOutlined /> {t('pages.sponsors.visit')} <ExportOutlined />
</span> </span>