diff --git a/dotcom-rendering/mise.toml b/dotcom-rendering/mise.toml new file mode 100644 index 00000000000..6ea5a7e1f47 --- /dev/null +++ b/dotcom-rendering/mise.toml @@ -0,0 +1,2 @@ +[tools] +node = "24" diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index fae4d263d26..3a248b6952b 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -1,6 +1,5 @@ import { css } from '@emotion/react'; import { - between, from, headlineBold17, headlineBold20, @@ -83,23 +82,18 @@ const marginRight = css` } `; -const invertedStyle = (design: ArticleDesign) => { - if (design === ArticleDesign.Gallery) { - return ''; - } - return css` - /* Handle text wrapping onto a new line */ - white-space: pre-wrap; - box-decoration-break: clone; +const invertedStyle = css` + /* Handle text wrapping onto a new line */ + white-space: pre-wrap; + box-decoration-break: clone; + line-height: 28px; + ${from.leftCol} { line-height: 28px; - ${from.leftCol} { - line-height: 28px; - } - padding-right: ${space[1]}px; - padding-top: ${space[1]}px; - padding-bottom: ${space[3]}px; - `; -}; + } + padding-right: ${space[1]}px; + padding-top: ${space[1]}px; + padding-bottom: ${space[3]}px; +`; const fontStyles = (format: ArticleFormat) => { switch (format.design) { @@ -184,26 +178,15 @@ const breakWord = css` word-break: break-word; `; -const sectionPadding = (design: ArticleDesign) => { - if (design === ArticleDesign.Gallery) { - return css` - padding: 0 ${space[2]}px 0 ${space[3]}px; - - ${between.mobileLandscape.and.tablet} { - padding-left: ${space[5]}px; - } - `; +const sectionPadding = css` + padding-left: 10px; + ${from.mobileLandscape} { + padding-left: 18px; } - return css` - padding-left: 10px; - ${from.mobileLandscape} { - padding-left: 18px; - } - ${from.tablet} { - padding-left: ${space[1]}px; - } - `; -}; + ${from.tablet} { + padding-left: ${space[1]}px; + } +`; export const SeriesSectionLink = ({ format, @@ -358,9 +341,9 @@ export const SeriesSectionLink = ({ css={[ sectionLabelLink, fontStyles(format), - invertedStyle(format.design), + invertedStyle, breakWord, - sectionPadding(format.design), + sectionPadding, css` color: ${titleColour}; background-color: ${themePalette( @@ -369,7 +352,6 @@ export const SeriesSectionLink = ({ `, format.design === ArticleDesign.Gallery && css` - display: inline-block; position: relative; `, format.display === ArticleDisplay.Immersive &&