Make smaller statuses stand out in the carousel

This commit is contained in:
Lim Chee Aun 2023-02-19 01:10:06 +08:00
parent 65c1af2eac
commit 7e65d8be5d
3 changed files with 19 additions and 2 deletions

View file

@ -614,6 +614,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
counter-increment: index;
position: relative;
}
.status-carousel .content-container .content:only-child {
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
}
.status-carousel
.content-container[style*='content-text-weight:1']
.media-container.media-eq1 {
/* LOL, this is madness, reading a value from the style attribute */
height: auto;
}
.status-carousel.boosts-carousel {
--carousel-color: var(--reblog-color);
--carousel-faded-color: var(--reblog-faded-color);

View file

@ -43,6 +43,7 @@ function Status({
size = 'm',
skeleton,
readOnly,
contentTextWeight,
}) {
if (skeleton) {
return (
@ -160,7 +161,12 @@ function Status({
<NameText account={status.account} instance={instance} showAvatar />{' '}
boosted
</div>
<Status status={reblog} instance={instance} size={size} />
<Status
status={reblog}
instance={instance}
size={size}
contentTextWeight={contentTextWeight}
/>
</div>
);
}
@ -320,7 +326,7 @@ function Status({
spoilerText || sensitive ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`}
style={
size === 'l' && {
(size === 'l' || contentTextWeight) && {
'--content-text-weight':
Math.round(
(spoilerText.length + htmlContentLength(content)) / 140,

View file

@ -325,12 +325,14 @@ function Timeline({
statusID={statusID}
instance={instance}
size="s"
contentTextWeight
/>
) : (
<Status
status={item}
instance={instance}
size="s"
contentTextWeight
/>
)}
</Link>