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;
}
.sponsor-aside {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.sponsor-close {
flex: 0 0 auto;
align-self: flex-start;
@@ -197,8 +205,10 @@
padding: 10px 12px;
}
.sponsor-card-banner .sponsor-visit {
.sponsor-card-banner .sponsor-aside {
flex-basis: 100%;
flex-direction: row;
align-items: center;
padding-inline-start: 52px;
}
}
@@ -74,12 +74,20 @@ export default function SponsorCard({
<SponsorLogo sponsor={sponsor} />
<span className="sponsor-body" dir="auto">
<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>
{text && <span className="sponsor-text">{text}</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">
{t('pages.sponsors.visit')} <ExportOutlined />
</span>