diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss index 88ea5fff..b06926f1 100644 --- a/src/components/Feed/ArticleCard.module.scss +++ b/src/components/Feed/ArticleCard.module.scss @@ -624,13 +624,19 @@ .shoutCardTitle, .shoutCardSubtitle { display: inline; - @include font-size(1.4rem); + @include font-size(1.8rem); } .shoutCardTitle { padding-right: 0.25em; } + .shoutCardTitlesContainer { + a { + padding: 0.3em 0; + } + } + a:hover { .shoutCardLinkContainer { color: #fff; @@ -701,3 +707,7 @@ flex: 1; } } + +.shoutTopicTop { + margin-bottom: 0.4rem !important; +} diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx index cd693ce2..aa4db4b9 100644 --- a/src/components/Feed/ArticleCard.tsx +++ b/src/components/Feed/ArticleCard.tsx @@ -129,7 +129,7 @@ export const ArticleCard = (props: ArticleCardProps) => { } slug={mainTopic.slug} isFloorImportant={props.settings?.isFloorImportant} - class={styles.shoutTopic} + class={clsx(styles.shoutTopic, { [styles.shoutTopicTop]: props.settings.isShort })} /> diff --git a/src/components/Feed/Beside.module.scss b/src/components/Feed/Beside.module.scss index 18780446..a3f04775 100644 --- a/src/components/Feed/Beside.module.scss +++ b/src/components/Feed/Beside.module.scss @@ -17,8 +17,10 @@ &.top { border-bottom: 1px solid #e1e1e1; display: flex; - margin-bottom: 1.6rem; - padding-bottom: 1.6rem; + justify-content: space-between; + line-height: 1; + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; &:last-child { border: none; @@ -30,16 +32,16 @@ } } - &::before { + &::after { content: counter(item, upper-roman); counter-increment: item; + flex: 0 1.4em; font-size: 1.4em; font-weight: 900; line-height: 1; - padding-right: 0.3em; - min-width: 2em; + min-width: 1.4em; + padding-left: 0.3em; text-align: center; - width: 2em; } } }