From ac13f6c54d67add5c7d8b2f2cb058dc0536f1056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 14:52:06 +0000 Subject: [PATCH 01/21] top stories showing on page --- .../ScrollablePromo/Promo/index.jsx | 67 +++++++++++++------ .../ScrollablePromo/PromoList/index.jsx | 5 +- .../components/ScrollablePromo/index.jsx | 32 +++++++-- src/app/pages/ArticlePage/ArticlePage.tsx | 21 +++++- 4 files changed, 93 insertions(+), 32 deletions(-) diff --git a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx index a2a71a52e7b..cf9b77188b4 100644 --- a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx @@ -81,26 +81,52 @@ const TimeStamp = styled(PromoTimestamp)` color: ${({ theme }) => theme.isDarkUi && theme.palette.GREY_6}; `; -const Promo = ({ block, onClick }) => { +const Promo = ({ block, variant, onClick }) => { const { script, service, serviceDatetimeLocale } = useContext(ServiceContext); - const textBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'text', - ); - const aresLinkBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'aresLink', - ); - const href = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], - textBlock, - ); - const title = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], - textBlock, - ); + let title; + let href; + let textBlock; + let aresLinkBlock; + console.log('block in Promo:', block, 'variant', variant); + if (variant === 'none') { + textBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), + 'text', + ); + aresLinkBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), + 'aresLink', + ); + } + if (variant === 'A') { + title = pathOr( + '', + [ + 'headlines', + 'promoHeadline', + 'blocks', + '0', + 'model', + 'blocks', + '0', + 'model', + 'text', + ], + block, + ); + href = pathOr('', ['locators', 'canonicalUrl'], block); + } else { + href = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], + textBlock, + ); + title = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], + textBlock, + ); + } const timestamp = path( ['model', 'blocks', '0', 'model', 'timestamp'], aresLinkBlock, @@ -109,7 +135,6 @@ const Promo = ({ block, onClick }) => { const isOperaMini = useOperaMiniDetection(); const WrapperPromoBox = isOperaMini ? OperaPromoBox : PromoBox; - return ( { > {title} - {timestamp && ( + {timestamp && variant === 'none' && ( {timestamp} diff --git a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx index d633622259d..45248ce9299 100644 --- a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx @@ -79,7 +79,8 @@ const OperaStyledList = styled.li` margin-${dir === 'ltr' ? `left` : `right`}: 0;}`} `; -const PromoList = ({ blocks, viewTracker, onClick }) => { +const PromoList = ({ blocks, variant, viewTracker, onClick }) => { + console.log('in promo list', blocks, variant); const { dir } = useContext(ServiceContext); const isOperaMini = useOperaMiniDetection(); const listBlocks = blocks.slice(0, 3); @@ -97,7 +98,7 @@ const PromoList = ({ blocks, viewTracker, onClick }) => { return ( // eslint-disable-next-line react/no-array-index-key - + ); })} diff --git a/src/app/legacy/components/ScrollablePromo/index.jsx b/src/app/legacy/components/ScrollablePromo/index.jsx index 31bf3d4a399..c4cb99ed396 100644 --- a/src/app/legacy/components/ScrollablePromo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.jsx @@ -57,9 +57,13 @@ const LabelComponent = styled.strong` `} `; -const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { +const ScrollablePromo = ({ + blocks, + blockGroupIndex = null, + variant = 'none', +}) => { const { script, service, dir, translations } = useContext(ServiceContext); - + console.log('Blocks in scrollable promo:', blocks, blocks.type); const eventTrackingData = { componentName: `edoj${blockGroupIndex}`, format: 'CHD=edoj', @@ -72,13 +76,18 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { return null; } - const title = + let title = blocks[0].type === 'title' && path( ['0', 'model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], blocks, ); - + if (variant === 'A') { + title = 'Top Stories'; + } + if (variant === 'B') { + title = 'Most Read'; + } const blocksWithoutTitle = blocks[0].type === 'title' ? tail(blocks) : blocks; const isSingleItem = blocksWithoutTitle.length === 1; @@ -98,7 +107,7 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { ), }), }; - + console.log('title in scrollable promo', title, blocks, variant); return ( {title && ( @@ -112,11 +121,20 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { {title} )} - {isSingleItem ? ( + {variant === 'A' && ( + + )} + {variant === 'none' && isSingleItem && ( - ) : ( + )} + {variant === 'none' && !isSingleItem && ( { const formats = pageData?.metadata?.passport?.predicates?.formats ?? []; const recommendationsData = pageData?.recommendations ?? []; - + const topStoriesContent = pageData?.secondaryColumn?.topStories; const isPGL = pageData?.metadata?.type === PHOTO_GALLERY_PAGE; const isSTY = pageData?.metadata?.type === STORY_PAGE; const isCPS = isPGL || isSTY; @@ -184,7 +185,11 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { embedImages: EmbedImages, embedUploader: Uploader, group: gist, - links: (props: ComponentToRenderProps) => , + links: (props: ComponentToRenderProps) => { + console.log('props', props); + + return ; + }, mpu: (props: ComponentToRenderProps) => allowAdvertising ? : null, wsoj: (props: ComponentToRenderProps) => ( @@ -228,6 +233,17 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { showRelatedTopics && topics.length > 0 && !isTransliterated, ); + const variantValue = 'A'; // I don't know how changing this works in real experiments + // so just manually switch the hardcoded variant for now while getting this working + const variant = ['A', 'B'].includes(variantValue) ? variantValue : 'none'; + const dataForOJExperiment = + variant === 'A' ? topStoriesContent : mostReadInitialData; + console.log('data before newProps', dataForOJExperiment); + const newProps = { + blocks: dataForOJExperiment, + variant, + }; + return (
@@ -272,6 +288,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { {allowAdvertising && ( )} +
From 184d4e83ba7226df9204c3839ee1c67351b4b1b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 15:19:20 +0000 Subject: [PATCH 02/21] most read data in component and OJ is complementary aside --- .../ScrollablePromo/Promo/index.jsx | 5 ++++ .../ScrollablePromo/PromoList/index.jsx | 2 +- .../components/ScrollablePromo/index.jsx | 2 +- src/app/pages/ArticlePage/ArticlePage.tsx | 24 ++++++++++++++----- 4 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx index cf9b77188b4..184e52d4cb8 100644 --- a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx @@ -115,6 +115,10 @@ const Promo = ({ block, variant, onClick }) => { block, ); href = pathOr('', ['locators', 'canonicalUrl'], block); + } else if (variant === 'B') { + console.log('B block', block); + title = block.title; + href = block.href; } else { href = pathOr( '', @@ -127,6 +131,7 @@ const Promo = ({ block, variant, onClick }) => { textBlock, ); } + console.log('title', title, 'href', href); const timestamp = path( ['model', 'blocks', '0', 'model', 'timestamp'], aresLinkBlock, diff --git a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx index 45248ce9299..4b5f20fcfea 100644 --- a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx @@ -83,7 +83,7 @@ const PromoList = ({ blocks, variant, viewTracker, onClick }) => { console.log('in promo list', blocks, variant); const { dir } = useContext(ServiceContext); const isOperaMini = useOperaMiniDetection(); - const listBlocks = blocks.slice(0, 3); + const listBlocks = variant === 'B' ? blocks.slice(0, 5) : blocks.slice(0, 3); const ScrollPromo = isOperaMini ? OperaScrollPromo : StandardScrollPromo; const List = isOperaMini ? OperaStyledList : StyledList; diff --git a/src/app/legacy/components/ScrollablePromo/index.jsx b/src/app/legacy/components/ScrollablePromo/index.jsx index c4cb99ed396..cfd9bf87c1f 100644 --- a/src/app/legacy/components/ScrollablePromo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.jsx @@ -121,7 +121,7 @@ const ScrollablePromo = ({ {title} )} - {variant === 'A' && ( + {variant !== 'none' && ( { showRelatedTopics && topics.length > 0 && !isTransliterated, ); - const variantValue = 'A'; // I don't know how changing this works in real experiments + const variantValue = 'B'; // I don't know how changing this works in real experiments // so just manually switch the hardcoded variant for now while getting this working - const variant = ['A', 'B'].includes(variantValue) ? variantValue : 'none'; - const dataForOJExperiment = - variant === 'A' ? topStoriesContent : mostReadInitialData; - console.log('data before newProps', dataForOJExperiment); + const variant: 'A' | 'B' | 'none' = ['A', 'B'].includes(variantValue) + ? (variantValue as 'A' | 'B') + : 'none'; + let dataForOJExperiment; + if (variant === 'A') { + dataForOJExperiment = topStoriesContent; + } else if (variant === 'B') { + dataForOJExperiment = mostReadInitialData.items; + } else { + dataForOJExperiment = []; + } + console.log('most read', dataForOJExperiment); const newProps = { blocks: dataForOJExperiment, variant, @@ -288,7 +296,11 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { {allowAdvertising && ( )} - + {variant !== 'none' && ( + + )}
From 63035bcc6e4751304c084a633702058722647594 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 15:55:57 +0000 Subject: [PATCH 03/21] fix broken other scrollable promo --- src/app/legacy/components/ScrollablePromo/Promo/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx index 184e52d4cb8..34152ecb7bd 100644 --- a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx @@ -88,7 +88,7 @@ const Promo = ({ block, variant, onClick }) => { let textBlock; let aresLinkBlock; console.log('block in Promo:', block, 'variant', variant); - if (variant === 'none') { + if (variant !== 'A' && variant !== 'B') { textBlock = filterForBlockType( pathOr({}, ['model', 'blocks'], block), 'text', From f6ae1e377bbe173dcc1ca3c32345bb2ac4c87c4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 15:59:42 +0000 Subject: [PATCH 04/21] use switch case --- .../ScrollablePromo/Promo/index.jsx | 92 ++++++++++--------- 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx index 34152ecb7bd..158eb6ca660 100644 --- a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx @@ -87,55 +87,57 @@ const Promo = ({ block, variant, onClick }) => { let href; let textBlock; let aresLinkBlock; + let timestamp; console.log('block in Promo:', block, 'variant', variant); - if (variant !== 'A' && variant !== 'B') { - textBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'text', - ); - aresLinkBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'aresLink', - ); - } - if (variant === 'A') { - title = pathOr( - '', - [ - 'headlines', - 'promoHeadline', - 'blocks', - '0', - 'model', - 'blocks', - '0', - 'model', + switch (variant) { + case 'A': + title = pathOr( + '', + [ + 'headlines', + 'promoHeadline', + 'blocks', + '0', + 'model', + 'blocks', + '0', + 'model', + 'text', + ], + block, + ); + href = pathOr('', ['locators', 'canonicalUrl'], block); + break; + case 'B': + title = block.title; + href = block.href; + break; + default: + textBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), 'text', - ], - block, - ); - href = pathOr('', ['locators', 'canonicalUrl'], block); - } else if (variant === 'B') { - console.log('B block', block); - title = block.title; - href = block.href; - } else { - href = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], - textBlock, - ); - title = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], - textBlock, - ); + ); + aresLinkBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), + 'aresLink', + ); + timestamp = path( + ['model', 'blocks', '0', 'model', 'timestamp'], + aresLinkBlock, + ); + href = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], + textBlock, + ); + title = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], + textBlock, + ); + break; } console.log('title', title, 'href', href); - const timestamp = path( - ['model', 'blocks', '0', 'model', 'timestamp'], - aresLinkBlock, - ); const isOperaMini = useOperaMiniDetection(); From 212bb018ce426772ef6bf25887a6849ef36edf6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 16:08:22 +0000 Subject: [PATCH 05/21] do not show on PGLs or TC2s --- src/app/pages/ArticlePage/ArticlePage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index d9f82f34d2f..f15deaaff4c 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -15,7 +15,6 @@ import Timestamp from '#containers/ArticleTimestamp'; import ComscoreAnalytics from '#containers/ComscoreAnalytics'; import SocialEmbedContainer from '#containers/SocialEmbed'; import MediaLoader from '#app/components/MediaLoader'; -import pathOr from 'ramda/src/pathOr'; import { ARTICLE_PAGE, PHOTO_GALLERY_PAGE, @@ -296,7 +295,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { {allowAdvertising && ( )} - {variant !== 'none' && ( + {!isPGL && !isTC2Asset && variant !== 'none' && ( From 6a1fcd5bb070ca065a6ec3b856996b6337717623 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Sat, 28 Dec 2024 16:22:45 +0000 Subject: [PATCH 06/21] do not show component over 1007px --- src/app/pages/ArticlePage/ArticlePage.styles.ts | 8 ++++++++ src/app/pages/ArticlePage/ArticlePage.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts index be89a1f5402..3ba306630a6 100644 --- a/src/app/pages/ArticlePage/ArticlePage.styles.ts +++ b/src/app/pages/ArticlePage/ArticlePage.styles.ts @@ -41,6 +41,14 @@ export default { gridColumn: '1 / span 12', paddingBottom: '2rem', }), + aside: ({ mq }: Theme) => + css({ + display: 'none', + + [mq.GROUP_3_MAX_WIDTH]: { + display: 'block', + }, + }), mainContent: ({ spacings }: Theme) => css({ paddingBottom: `${spacings.TRIPLE}rem`, diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index f15deaaff4c..2e61acbaf1e 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -296,7 +296,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { )} {!isPGL && !isTC2Asset && variant !== 'none' && ( - +

@@ -853,11 +1258,11 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

A paragraph in Pidgin. @@ -868,27 +1273,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

@@ -899,43 +1304,43 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

  1. 1
    Teams wey qualify for Afcon 2023 and how things stand for each group
  2. 2
    'We dey hear gospel songs den screaming' - Woman tok of Uganda school attack
  3. 3
    Super Eagles qualify for Nations Cup afta beating Sierra Leone for Monrovia
  4. 4
    Forbes top ten list of highest paid athletes for 2023 and wetin dem earn
  5. 5
    Tins to sabi about 2023 Sierra Leone general election
    `; -exports[`Article Page should render a news article correctly 1`] = ` -.emotion-0 { - background-color: #F6F6F6; +exports[`Article Page should render a news article correctly 1`] = ` +.emotion-0 { + background-color: #F6F6F6; +} + +.emotion-1 { + display: none; +} + +@media (max-width: 62.9375rem) { + .emotion-1 { + display: block; + } +} + +@media (max-width: 14.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-2 { + margin-left: 20%; + } +} + +@media (min-width: 80rem) { + .emotion-2 { + margin-left: 40%; + } +} + +@supports (display: grid) { + .emotion-2 { + display: block; + width: initial; + margin: 0; + } + + @media (max-width: 14.9375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-2 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 1; + } + } + + @media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-2 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 2; + } + } + + @media (min-width: 80rem) { + .emotion-2 { + grid-template-columns: repeat(10, 1fr); + grid-column-end: span 10; + grid-column-start: 5; + } + } +} + +.emotion-4 { + display: block; + font-size: 1.125rem; + line-height: 1.375rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + margin-bottom: 1rem; + color: #3F3F42; } -.emotion-1 { +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-4 { + font-size: 1.25rem; + line-height: 1.5rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + font-size: 1.5rem; + line-height: 1.75rem; + } +} + +@media (min-width: 0rem) { + .emotion-4 { + margin-left: 0.5rem; + } +} + +@media (min-width: 25rem) { + .emotion-4 { + margin-left: 1rem; + } +} + +@media (min-width: 63rem) { + .emotion-4 { + margin-left: 0; + } +} + +.emotion-6 { + list-style: none; + padding-left: 0; + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + overflow-x: scroll; + scroll-behavior: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.emotion-6::-webkit-scrollbar { + display: none; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +@media (min-width: 0rem) { + .emotion-8 { + margin-left: 0.5rem; + } + + .emotion-8:first-child { + margin-left: 0.5rem; + } + + .emotion-8:last-child { + margin-right: 0.5rem; + } +} + +@media (min-width: 25rem) { + .emotion-8 { + margin-left: 1rem; + } + + .emotion-8:first-child { + margin-left: 1rem; + } +} + +@media (min-width: 63rem) { + .emotion-8 { + margin-left: 1rem; + } + + .emotion-8:first-child { + margin-left: 0; + } +} + +.emotion-10 { + position: relative; + background-color: #FFFFFF; + padding: 1rem; + margin-bottom: 1.5rem; +} + +@media (min-width: 0rem) { + .emotion-10 { + width: 14.8125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-10 { + width: 11.125rem; + } +} + +@media (min-width: 63rem) { + .emotion-10 { + width: 12.6875rem; + } +} + +.emotion-12 { + position: static; + color: #222222; + -webkit-text-decoration: none; + text-decoration: none; + overflow-wrap: break-word; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSerif,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + width: 100%; + overflow-wrap: break-word; + text-overflow: ellipsis; + -webkit-text-decoration: none; + text-decoration: none; + overflow-x: hidden; + overflow-y: hidden; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + color: #202224; +} + +.emotion-12:before { + bottom: 0; + content: ''; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + white-space: nowrap; + z-index: 1; +} + +.emotion-12:hover, +.emotion-12:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-12:visited { + color: #6E6E73; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-12 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +.emotion-12:hover, +.emotion-12:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-12:visited { + color: #545658; +} + +.emotion-38 { max-width: 63rem; margin: 0 auto; display: grid; @@ -1127,77 +1836,77 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) { - .emotion-1 { + .emotion-38 { padding: 0 1rem; -webkit-column-gap: 1rem; column-gap: 1rem; } } -.emotion-2 { +.emotion-39 { grid-column: 1/span 12; padding-bottom: 2rem; } @media (min-width: 63rem) { - .emotion-2 { + .emotion-39 { grid-column: 1/span 8; } } -.emotion-3 { +.emotion-40 { padding-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-41 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-41 { margin-left: 16.666666666666668%; } } @media (min-width: 80rem) { - .emotion-4 { + .emotion-41 { margin-left: 33.333333333333336%; } } @supports (display: grid) { - .emotion-4 { + .emotion-41 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1206,7 +1915,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1215,7 +1924,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -1224,7 +1933,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -1233,7 +1942,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-start: 2; @@ -1241,7 +1950,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 80rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(12, 1fr); grid-column-end: span 12; grid-column-start: 5; @@ -1249,7 +1958,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } } -.emotion-6 { +.emotion-43 { font-size: 1.75rem; line-height: 2rem; font-family: ReithSerif,Helvetica,Arial,sans-serif; @@ -1263,78 +1972,78 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-43 { font-size: 2rem; line-height: 2.25rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-43 { font-size: 2.75rem; line-height: 3rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-43 { padding: 2.5rem 0; } } -.emotion-6:focus { +.emotion-43:focus { outline: none; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-45 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-45 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-8 { + .emotion-45 { margin-left: 40%; } } @supports (display: grid) { - .emotion-8 { + .emotion-45 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1343,7 +2052,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1352,7 +2061,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -1361,7 +2070,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -1370,7 +2079,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -1378,7 +2087,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 80rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -1386,7 +2095,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } } -.emotion-10 { +.emotion-47 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1398,26 +2107,26 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-47 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-47 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 63rem) { - .emotion-10 { + .emotion-47 { padding-right: 2.5rem; } } -.emotion-12 { +.emotion-49 { max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; @@ -1425,26 +2134,26 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) { - .emotion-12 { + .emotion-49 { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 63rem) { - .emotion-12 { + .emotion-49 { padding-left: 0; padding-right: 0; } } -.emotion-13 { +.emotion-50 { margin: 0; padding-bottom: 1.5rem; width: 100%; } -.emotion-14 { +.emotion-51 { position: relative; height: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); @@ -1457,27 +2166,27 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) { - .emotion-14 { + .emotion-51 { -webkit-background-size: 77px 22px; background-size: 77px 22px; } } @media (min-width: 63rem) { - .emotion-14 { + .emotion-51 { -webkit-background-size: 93px 27px; background-size: 93px 27px; } } -.emotion-15 { +.emotion-52 { width: 100%; object-fit: cover; height: auto; } @media (max-width: 24.9375rem) { - .emotion-16 { + .emotion-53 { margin: 0 0.5rem; padding-bottom: 1.5rem; } @@ -1485,7 +2194,7 @@ exports[`Article Page should render a news article correctly 1`] = ` @media (min-width: 25rem) { @media (max-width: 62.9375rem) { - .emotion-16 { + .emotion-53 { margin: 0 1rem; padding-bottom: 2rem; } @@ -1493,21 +2202,21 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-16 { + .emotion-53 { margin: 0 1rem; padding-bottom: 2.5rem; } } @media (min-width: 80rem) { - .emotion-16 { + .emotion-53 { margin: 0 auto; padding: 0 1rem 1.5rem; max-width: 80rem; } } -.emotion-17 { +.emotion-54 { position: relative; z-index: 0; color: #141414; @@ -1515,36 +2224,36 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) { - .emotion-17 { + .emotion-54 { margin-top: 1.5rem; } } @media (min-width: 63rem) { - .emotion-17 { + .emotion-54 { margin-bottom: 1.5rem; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-17 { + .emotion-54 { margin-bottom: 1rem; } } -.emotion-19 { +.emotion-56 { margin: 0; padding: 0; scroll-margin-top: 1rem; } -.emotion-19:focus-visible { +.emotion-56:focus-visible { outline: 0.1875rem solid #000000; box-shadow: 0 0 0 0.1875rem #FFFFFF; outline-offset: 0.1875rem; } -.emotion-21 { +.emotion-58 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1554,7 +2263,7 @@ exports[`Article Page should render a news article correctly 1`] = ` flex-direction: column; } -.emotion-23 { +.emotion-60 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1574,7 +2283,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-60 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1582,7 +2291,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } } -.emotion-25 { +.emotion-62 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1602,32 +2311,32 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-25 { + .emotion-62 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-25 { + .emotion-62 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-25 { + .emotion-62 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-25 { + .emotion-62 { padding-right: 1rem; } } -.emotion-27 { +.emotion-64 { list-style-type: none; margin: 0; padding: 0; @@ -1636,7 +2345,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @supports (display: grid) { - .emotion-27 { + .emotion-64 { display: grid; position: initial; width: initial; @@ -1644,7 +2353,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (max-width: 14.9375rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -1652,7 +2361,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -1660,7 +2369,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -1668,7 +2377,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 1rem; @@ -1676,7 +2385,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(8, 1fr); grid-column-end: span 8; grid-column-gap: 1rem; @@ -1684,7 +2393,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 80rem) { - .emotion-27 { + .emotion-64 { grid-template-columns: repeat(20, 1fr); grid-column-end: span 20; grid-column-gap: 1rem; @@ -1693,24 +2402,24 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 80rem) { - .emotion-27 { + .emotion-64 { grid-auto-flow: row; } } @media (min-width: 37.5rem) { - .emotion-27 { + .emotion-64 { grid-template-rows: repeat(5, auto); } } -.emotion-29 { +.emotion-66 { position: relative; padding-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-29 { + .emotion-66 { width: calc(100%); display: inline-block; vertical-align: top; @@ -1718,7 +2427,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-29 { + .emotion-66 { width: calc(100%); display: inline-block; vertical-align: top; @@ -1726,7 +2435,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-66 { width: calc(100%); display: inline-block; vertical-align: top; @@ -1734,7 +2443,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-29 { + .emotion-66 { width: calc(50%); display: inline-block; vertical-align: top; @@ -1742,7 +2451,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-29 { + .emotion-66 { width: calc(50%); display: inline-block; vertical-align: top; @@ -1750,7 +2459,7 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 80rem) { - .emotion-29 { + .emotion-66 { width: calc(20%); display: inline-block; vertical-align: top; @@ -1758,56 +2467,56 @@ exports[`Article Page should render a news article correctly 1`] = ` } @supports (display: grid) { - .emotion-29 { + .emotion-66 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(3, 1fr); grid-column-end: span 3; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } @media (min-width: 80rem) { - .emotion-29 { + .emotion-66 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } } -.emotion-31 { +.emotion-68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1820,50 +2529,50 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (max-width: 14.9375rem) { - .emotion-32 { + .emotion-69 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-32 { + .emotion-69 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-32 { + .emotion-69 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-32 { + .emotion-69 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-32 { + .emotion-69 { min-width: 2rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-32 { + .emotion-69 { min-width: 2rem; } } } @media (min-width: 80rem) { - .emotion-32 { + .emotion-69 { min-width: 2rem; } } -.emotion-33 { +.emotion-70 { font-family: ReithSerif,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 300; @@ -1876,32 +2585,32 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-33 { + .emotion-70 { font-size: 2.5rem; line-height: 2.75rem; } } @media (min-width: 37.5rem) { - .emotion-33 { + .emotion-70 { font-size: 3.5rem; line-height: 3.75rem; } } -.emotion-34 { +.emotion-71 { padding-top: 0.375rem; padding-left: 1rem; padding-right: 1rem; } @supports (grid-template-columns: fit-content(200px)) { - .emotion-34 { + .emotion-71 { padding-right: 0; } } -.emotion-35 { +.emotion-72 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSerif,Helvetica,Arial,sans-serif; @@ -1915,26 +2624,26 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-35 { + .emotion-72 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-35 { + .emotion-72 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-35:hover, -.emotion-35:focus { +.emotion-72:hover, +.emotion-72:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-35:before { +.emotion-72:before { bottom: 0; content: ''; left: 0; @@ -1947,31 +2656,31 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 25rem) { - .emotion-35 { + .emotion-72 { font-size: 1.125rem; line-height: 1.375rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-35 { + .emotion-72 { font-size: 1.125rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-35 { + .emotion-72 { font-size: 1.25rem; line-height: 1.5rem; } } } -.emotion-36 { +.emotion-73 { padding-top: 0.5rem; } -.emotion-37 { +.emotion-74 { font-size: 0.875rem; line-height: 1.125rem; color: #545658; @@ -1982,235 +2691,235 @@ exports[`Article Page should render a news article correctly 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-37 { + .emotion-74 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-37 { + .emotion-74 { font-size: 0.8125rem; line-height: 1rem; } } @media (max-width: 14.9375rem) { - .emotion-42 { + .emotion-79 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-42 { + .emotion-79 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-42 { + .emotion-79 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-42 { + .emotion-79 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-42 { + .emotion-79 { min-width: 4rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-42 { + .emotion-79 { min-width: 2rem; } } } @media (min-width: 80rem) { - .emotion-42 { + .emotion-79 { min-width: 2rem; } } @media (max-width: 14.9375rem) { - .emotion-72 { + .emotion-109 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-72 { + .emotion-109 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-72 { + .emotion-109 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-72 { + .emotion-109 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-72 { + .emotion-109 { min-width: 2rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-72 { + .emotion-109 { min-width: 2rem; } } } @media (min-width: 80rem) { - .emotion-72 { + .emotion-109 { min-width: 4rem; } } @media (max-width: 14.9375rem) { - .emotion-82 { + .emotion-119 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-82 { + .emotion-119 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-82 { + .emotion-119 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-82 { + .emotion-119 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-82 { + .emotion-119 { min-width: 4rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-82 { + .emotion-119 { min-width: 4rem; } } } @media (min-width: 80rem) { - .emotion-82 { + .emotion-119 { min-width: 2rem; } } @media (max-width: 14.9375rem) { - .emotion-92 { + .emotion-129 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-92 { + .emotion-129 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-92 { + .emotion-129 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-92 { + .emotion-129 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-92 { + .emotion-129 { min-width: 2rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-92 { + .emotion-129 { min-width: 4rem; } } } @media (min-width: 80rem) { - .emotion-92 { + .emotion-129 { min-width: 2rem; } } @media (max-width: 14.9375rem) { - .emotion-122 { + .emotion-159 { min-width: 2.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-122 { + .emotion-159 { min-width: 2.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-122 { + .emotion-159 { min-width: 3rem; } } @media (min-width: 37.5rem) { - .emotion-122 { + .emotion-159 { min-width: 4rem; } } @media (min-width: 37.5rem) { - .emotion-122 { + .emotion-159 { min-width: 4rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-122 { + .emotion-159 { min-width: 4rem; } } } @media (min-width: 80rem) { - .emotion-122 { + .emotion-159 { min-width: 4rem; } } @@ -2223,22 +2932,123 @@ exports[`Article Page should render a news article correctly 1`] = `
    chartbeat
    +

    @@ -2246,18 +3056,18 @@ exports[`Article Page should render a news article correctly 1`] = `

    A paragraph.

    Shiroo buddeen waliin

    @@ -2336,43 +3146,43 @@ exports[`Article Page should render a news article correctly 1`] = `

    1. 1
      Why the oxygen timeline on sub may not be so fixed
    2. 2
      MasterChef contestant jailed for child abuse images
    3. 3
      Musk and Zuckerberg agree to hold cage fight
    4. 4
      Cindy Beale returns to EastEnders after 25 years
    5. 5
      Mosquito-borne diseases risk increasing in Europe
    6. 6
      Teenager guilty of murdering boy at train station
    7. 7
      At least 30 migrants feared dead off Canary Islands
    8. 8
      Bank boss warns interest rate hike hard for many
    9. 9
      Ukraine strikes bridge to Crimea, says Russia
    10. 10
      The woman who wants to end abortion in America