From e01f23977ef353b08f9a0061572a5bdfda7afa41 Mon Sep 17 00:00:00 2001 From: Shayne Marc Enzo Ahchoon Date: Thu, 16 Jan 2025 16:32:02 +0000 Subject: [PATCH 1/5] WSTEAM1-1567: Change padding for large breakpoint --- src/app/components/MaskedImage/index.tsx | 3 +++ src/app/components/MaskedImage/styles.tsx | 7 ++++++- .../[service]/live/[id]/Header/index.tsx | 4 +++- .../[service]/live/[id]/Header/styles.tsx | 21 ++++++++++++------- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/app/components/MaskedImage/index.tsx b/src/app/components/MaskedImage/index.tsx index 0a184a153b8..65dc7b170ca 100644 --- a/src/app/components/MaskedImage/index.tsx +++ b/src/app/components/MaskedImage/index.tsx @@ -15,12 +15,14 @@ const MaskedImage = ({ imageWidth, altText = '', showPlaceholder = true, + hideImage = false, }: { imageUrl: string; imageUrlTemplate: string; imageWidth: number; altText?: string; showPlaceholder?: boolean; + hideImage?: boolean; }) => { const { dir } = useContext(ServiceContext); const { isAmp } = useContext(RequestContext); @@ -44,6 +46,7 @@ const MaskedImage = ({ css={[ styles.maskedImageWrapper, isRtl ? styles.linearGradientRtl : styles.linearGradientLtr, + hideImage && styles.hideImage, ]} > + css({ + [mq.GROUP_4_MIN_WIDTH]: { + opacity: 0, + }, + }), linearGradientLtr: ({ mq }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index 034c3901443..e9df786b3c4 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -53,13 +53,13 @@ const Header = ({ imageUrl={imageUrl} imageUrlTemplate={imageUrlTemplate} imageWidth={imageWidth} + hideImage={isMediaOpen} /> ) : null}
)} +
+
{mediaCollections && ( + liveMediaClose: ({ mq, spacings }: Theme) => + css({ + padding: `${spacings.FULL}rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`, + [mq.GROUP_2_MIN_WIDTH]: { + padding: `${spacings.FULL}rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, + }, + [mq.GROUP_4_MIN_WIDTH]: { + padding: `0 ${spacings.DOUBLE}rem ${spacings.TRIPLE}rem`, + maxWidth: '50%', // determines width of text overlay. + }, + }), + liveMediaOpen: ({ mq }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { maxWidth: '100%', @@ -57,7 +68,6 @@ export default { [mq.GROUP_2_MIN_WIDTH]: { padding: `${spacings.DOUBLE}rem`, }, - [mq.GROUP_4_MIN_WIDTH]: { paddingTop: `${spacings.TRIPLE}rem`, paddingBottom: `${spacings.QUADRUPLE}rem`, @@ -71,12 +81,7 @@ export default { padding: `${spacings.FULL}rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { - padding: `${spacings.DOUBLE}rem`, - minHeight: `${pixelsToRem(440)}rem`, // calculation includes padding - height: '100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', + padding: `${pixelsToRem(40)}rem ${spacings.DOUBLE}rem 0`, maxWidth: '50%', // determines width of text overlay. }, }), From aa7d159c7886587d12e88ea217aad38c868934b3 Mon Sep 17 00:00:00 2001 From: Shayne Marc Enzo Ahchoon Date: Fri, 17 Jan 2025 14:43:21 +0000 Subject: [PATCH 2/5] WSTEAM1-1567: Add styles --- .../LiveHeaderMedia/index.styles.tsx | 4 ++-- .../[service]/live/[id]/Header/index.tsx | 24 ++++++++++++------- .../[service]/live/[id]/Header/styles.tsx | 21 ++++++++++++---- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/app/components/LiveHeaderMedia/index.styles.tsx b/src/app/components/LiveHeaderMedia/index.styles.tsx index f64034ef1d5..562aed5d542 100644 --- a/src/app/components/LiveHeaderMedia/index.styles.tsx +++ b/src/app/components/LiveHeaderMedia/index.styles.tsx @@ -3,10 +3,9 @@ import pixelsToRem from '#app/utilities/pixelsToRem'; import { css, Theme } from '@emotion/react'; export default { - componentContainer: ({ spacings }: Theme) => + componentContainer: () => css({ width: '100%', - marginTop: `${spacings.DOUBLE}rem`, [`.${NO_JS_CLASSNAME} &`]: { display: 'none', }, @@ -30,6 +29,7 @@ export default { }), mediaButton: () => css({ + width: '100%', position: 'relative', padding: 0, }), diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index e9df786b3c4..241c900419e 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -29,6 +29,7 @@ const Header = ({ }) => { const [isMediaOpen, setLiveMediaOpen] = useState(false); const isHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth; + const isWithImageLayout = isHeaderImage || !!mediaCollections; const watchVideoClickHandler = () => { setLiveMediaOpen(!isMediaOpen); @@ -36,7 +37,7 @@ const Header = ({ const Title = ( {title} @@ -58,8 +59,11 @@ const Header = ({ ) : null}
{showLiveLabel ? ( - + {Title} ) : ( @@ -83,7 +87,7 @@ const Header = ({ css={[ styles.description, showLiveLabel && - !isHeaderImage && + !isWithImageLayout && styles.layoutWithLiveLabelNoImage, ]} > @@ -91,14 +95,16 @@ const Header = ({ )}
-
- {mediaCollections && ( + {mediaCollections && ( +
- )} -
+
+ )}
); diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx index ef0c795ea12..2141140991c 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx @@ -44,12 +44,12 @@ export default { }), liveMediaClose: ({ mq, spacings }: Theme) => css({ - padding: `${spacings.FULL}rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`, + padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`, [mq.GROUP_2_MIN_WIDTH]: { - padding: `${spacings.FULL}rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, + padding: `0rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { - padding: `0 ${spacings.DOUBLE}rem ${spacings.TRIPLE}rem`, + padding: `${spacings.DOUBLE}rem ${spacings.DOUBLE}rem ${pixelsToRem(40)}rem`, maxWidth: '50%', // determines width of text overlay. }, }), @@ -59,6 +59,14 @@ export default { maxWidth: '100%', }, }), + fixedHeight: ({ mq, spacings }: Theme) => + css({ + [mq.GROUP_4_MIN_WIDTH]: { + minHeight: '0', + padding: `${pixelsToRem(40)}rem ${spacings.DOUBLE}rem 0`, + maxWidth: '50%', // determines width of text overlay. + }, + }), textContainerWithoutImage: ({ mq, gridWidths, spacings }: Theme) => css({ position: 'relative', @@ -81,7 +89,12 @@ export default { padding: `${spacings.FULL}rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`, }, [mq.GROUP_4_MIN_WIDTH]: { - padding: `${pixelsToRem(40)}rem ${spacings.DOUBLE}rem 0`, + padding: `${spacings.DOUBLE}rem`, + minHeight: `${pixelsToRem(440)}rem`, // calculation includes padding + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', maxWidth: '50%', // determines width of text overlay. }, }), From b760cb0ec21e56d765c8b2db843ed316a84dbbe1 Mon Sep 17 00:00:00 2001 From: Shayne Marc Enzo Ahchoon Date: Fri, 17 Jan 2025 15:34:03 +0000 Subject: [PATCH 3/5] WSTEAM1-1567: Add 16px spacing --- .../live/[id]/Header/LiveLabelHeader/index.styles.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts index 81d8f948fce..f620f8ff0f1 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts @@ -25,7 +25,13 @@ const styles = { color: 'canvasText', }, }), - liveLabelTextWithImage: ({ palette, fontSizes, fontVariants, mq }: Theme) => + liveLabelTextWithImage: ({ + palette, + spacings, + fontSizes, + fontVariants, + mq, + }: Theme) => css({ 'span:first-of-type': { color: palette.LIVE_LIGHT, @@ -36,6 +42,9 @@ const styles = { ...fontSizes.paragon, }, }, + 'span:nth-of-type(3)': { + marginTop: `${spacings.DOUBLE}rem`, + }, }), liveLabelTextWithoutImage: ({ mq, From 718f836bba5e2cba6ba5e30c39560cf9a8e52c56 Mon Sep 17 00:00:00 2001 From: Shayne Marc Enzo Ahchoon Date: Mon, 20 Jan 2025 11:15:41 +0000 Subject: [PATCH 4/5] WSTEAM1-1567: Update --- src/app/components/MaskedImage/index.tsx | 3 --- src/app/components/MaskedImage/styles.tsx | 7 ----- .../[service]/live/[id]/Header/index.tsx | 26 ++++++++++--------- .../[service]/live/[id]/Header/styles.tsx | 8 +++++- 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/app/components/MaskedImage/index.tsx b/src/app/components/MaskedImage/index.tsx index 65dc7b170ca..0a184a153b8 100644 --- a/src/app/components/MaskedImage/index.tsx +++ b/src/app/components/MaskedImage/index.tsx @@ -15,14 +15,12 @@ const MaskedImage = ({ imageWidth, altText = '', showPlaceholder = true, - hideImage = false, }: { imageUrl: string; imageUrlTemplate: string; imageWidth: number; altText?: string; showPlaceholder?: boolean; - hideImage?: boolean; }) => { const { dir } = useContext(ServiceContext); const { isAmp } = useContext(RequestContext); @@ -46,7 +44,6 @@ const MaskedImage = ({ css={[ styles.maskedImageWrapper, isRtl ? styles.linearGradientRtl : styles.linearGradientLtr, - hideImage && styles.hideImage, ]} > - css({ - [mq.GROUP_4_MIN_WIDTH]: { - opacity: 0, - }, - }), linearGradientLtr: ({ mq }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { @@ -145,7 +139,6 @@ export default { 270deg, ${extraWideMask})`, // 270deg for LTR }, }), - linearGradientRtl: ({ mq }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index 241c900419e..5732cd9d0d5 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -49,20 +49,19 @@ const Header = ({
- {isHeaderImage ? ( - - ) : null} +
+ {isHeaderImage ? ( + + ) : null} +
@@ -97,7 +96,10 @@ const Header = ({
{mediaCollections && (
+ css({ + [mq.GROUP_4_MIN_WIDTH]: { + opacity: 0, + }, + }), backgroundContainer: () => css({ position: 'absolute', @@ -42,7 +48,7 @@ export default { width: '100%', }, }), - liveMediaClose: ({ mq, spacings }: Theme) => + LiveMediaBaseStyling: ({ mq, spacings }: Theme) => css({ padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`, [mq.GROUP_2_MIN_WIDTH]: { From 270ffbdb96f4df62414313572c3b9816ed87d052 Mon Sep 17 00:00:00 2001 From: Shayne Marc Enzo Ahchoon Date: Mon, 20 Jan 2025 13:00:38 +0000 Subject: [PATCH 5/5] WSTEAM1-1567: Update --- .../[service]/live/[id]/Header/index.tsx | 7 +- .../[service]/live/[id]/Header/styles.tsx | 2 +- .../[id]/__snapshots__/live.test.tsx.snap | 483 +++++++++--------- 3 files changed, 245 insertions(+), 247 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index 5732cd9d0d5..7eec08f4af7 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -95,12 +95,7 @@ const Header = ({ )}
{mediaCollections && ( -
+
+ liveMedia: ({ mq, spacings }: Theme) => css({ padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`, [mq.GROUP_2_MIN_WIDTH]: { diff --git a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap index 2a1d91d41bb..3d5020bd544 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap @@ -43,7 +43,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-4 { +.emotion-5 { position: relative; padding: 1rem 0.5rem; max-width: 80rem; @@ -51,19 +51,19 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) { - .emotion-4 { + .emotion-5 { padding: 1rem; } } @media (min-width: 63rem) { - .emotion-4 { + .emotion-5 { padding-top: 1.5rem; padding-bottom: 2rem; } } -.emotion-5 { +.emotion-6 { color: #141414; font-size: 1.25rem; line-height: 1.5rem; @@ -74,37 +74,37 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-5 { + .emotion-6 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-5 { + .emotion-6 { font-size: 2rem; line-height: 2.25rem; } } -.emotion-5:focus { +.emotion-6:focus { outline: none; } -.emotion-6 { +.emotion-7 { display: block; color: #FEFEFE; margin-top: 1rem; } @media (max-width: 14.9375rem) { - .emotion-6 { + .emotion-7 { margin-top: 0.5rem; } } @media (min-width: 63rem) { - .emotion-6 { + .emotion-7 { width: calc(100% / 3 * 2); display: -webkit-inline-box; display: -webkit-inline-flex; @@ -115,7 +115,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 80rem) { - .emotion-6 { + .emotion-7 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -124,7 +124,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-7 { +.emotion-8 { color: #141414; font-size: 0.9375rem; line-height: 1.25rem; @@ -137,20 +137,20 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-7 { + .emotion-8 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-7 { + .emotion-8 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-8 { +.emotion-9 { max-width: 80rem; margin: 0 auto; display: grid; @@ -159,13 +159,13 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) { - .emotion-8 { + .emotion-9 { padding: 1rem; } } @media (min-width: 63rem) { - .emotion-8 { + .emotion-9 { -webkit-padding-start: 1rem; padding-inline-start: 1rem; -webkit-padding-end: 1rem; @@ -177,23 +177,23 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-9 { +.emotion-10 { grid-column: 1/13; } @media (min-width: 63rem) { - .emotion-9 { + .emotion-10 { grid-column: 1/5; } } @media (min-width: 80rem) { - .emotion-9 { + .emotion-10 { grid-column: 1/4; } } -.emotion-10 { +.emotion-11 { color: #141414; font-size: 1.25rem; line-height: 1.5rem; @@ -205,40 +205,40 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 2rem; line-height: 2.25rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { padding-top: 0; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 1.125rem; line-height: 1.375rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 1.5rem; line-height: 1.75rem; } @@ -246,12 +246,12 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 63rem) { - .emotion-10 { + .emotion-11 { padding-top: 1rem; } } -.emotion-11 { +.emotion-12 { color: #141414; background-color: #F6F6F6; border: solid 0.1875rem transparent; @@ -259,37 +259,37 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) { - .emotion-11 { + .emotion-12 { padding: 1rem 0 1rem; } } @media (min-width: 63rem) { - .emotion-11 { + .emotion-12 { padding: 1rem 1rem 1rem; } } -.emotion-11 li { +.emotion-12 li { -webkit-padding-start: 0.1875rem; padding-inline-start: 0.1875rem; } -.emotion-11 li:last-child { +.emotion-12 li:last-child { margin-bottom: 0; } -.emotion-11 ul { +.emotion-12 ul { -webkit-padding-start: 1rem; padding-inline-start: 1rem; margin-bottom: 0; } -.emotion-11 p { +.emotion-12 p { padding-bottom: 0; } -.emotion-11 a { +.emotion-12 a { color: #141414; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; font-style: normal; @@ -297,63 +297,63 @@ exports[`Live Page creates snapshot of the live page 1`] = ` border-bottom: 0.0625rem solid #141414; } -.emotion-11 a:visited { +.emotion-12 a:visited { color: #545658; } -.emotion-13 { +.emotion-14 { margin-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-13 { + .emotion-14 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-13 { + .emotion-14 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-13 { + .emotion-14 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-13 { + .emotion-14 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-13 { + .emotion-14 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-13 { + .emotion-14 { margin-left: 40%; } } @supports (display: grid) { - .emotion-13 { + .emotion-14 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -362,7 +362,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -371,7 +371,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -380,7 +380,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -389,7 +389,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -397,7 +397,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 80rem) { - .emotion-13 { + .emotion-14 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -405,7 +405,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-15 { +.emotion-16 { margin-top: 0; list-style-type: none; font-size: 0.9375rem; @@ -416,25 +416,25 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-15 { + .emotion-16 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-15 { + .emotion-16 { font-size: 1rem; line-height: 1.375rem; } } -.emotion-15>li { +.emotion-16>li { position: relative; color: inherit; } -.emotion-15>li::before { +.emotion-16>li::before { top: 0.5rem; content: ""; position: absolute; @@ -442,51 +442,51 @@ exports[`Live Page creates snapshot of the live page 1`] = ` inset-inline-start: -1rem; } -.emotion-15>li::before { +.emotion-16>li::before { border: 0.1875rem solid #141414; background-color: #141414; border-radius: 0; } -.emotion-16 { +.emotion-17 { margin-bottom: 1rem; } -.emotion-19 { +.emotion-20 { color: #222222; border-bottom: 1px solid #B80000; -webkit-text-decoration: none; text-decoration: none; } -.emotion-19:visited { +.emotion-20:visited { color: #6E6E73; border-bottom: 1px solid #6E6E73; } -.emotion-19:focus, -.emotion-19:hover { +.emotion-20:focus, +.emotion-20:hover { border-bottom: 2px solid #B80000; color: #B80000; } -.emotion-21 { +.emotion-22 { grid-column: 1/13; } @media (min-width: 63rem) { - .emotion-21 { + .emotion-22 { grid-column: 5/13; } } @media (min-width: 80rem) { - .emotion-21 { + .emotion-22 { grid-column: 4/10; } } -.emotion-22 { +.emotion-23 { color: #141414; font-size: 1.25rem; line-height: 1.5rem; @@ -498,35 +498,35 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-22 { + .emotion-23 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-22 { + .emotion-23 { font-size: 2rem; line-height: 2.25rem; } } @media (min-width: 37.5rem) { - .emotion-22 { + .emotion-23 { font-size: 1.125rem; line-height: 1.375rem; padding-top: 1.5rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-22 { + .emotion-23 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-22 { + .emotion-23 { font-size: 1.5rem; line-height: 1.75rem; } @@ -534,12 +534,12 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 63rem) { - .emotion-22 { + .emotion-23 { padding-top: 1rem; } } -.emotion-23 { +.emotion-24 { color: #141414; font-size: 0.9375rem; line-height: 1.25rem; @@ -551,59 +551,59 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-23 { + .emotion-24 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-24 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-24 { padding-bottom: 1.5rem; } } -.emotion-24 { +.emotion-25 { margin-block: 0; padding-inline: 0; } -.emotion-25 { +.emotion-26 { list-style-type: none; } -.emotion-26 { +.emotion-27 { background-color: #F6F6F6; margin: 0 0 1rem; } @media (min-width: 25rem) { - .emotion-26 { + .emotion-27 { margin: 0 0 1.5rem; } } @media (min-width: 63rem) { - .emotion-26 { + .emotion-27 { margin: 0 0 1rem; } } @media screen and (forced-colors: active) { - .emotion-26 { + .emotion-27 { border: solid 0.1875rem transparent; border-top: solid 0.0625rem transparent; } } -.emotion-27 { +.emotion-28 { color: #141414; font-size: 1.125rem; line-height: 1.375rem; @@ -614,26 +614,26 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-27 { + .emotion-28 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-27 { + .emotion-28 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 15rem) { - .emotion-27 { + .emotion-28 { line-height: 0; } } -.emotion-28 { +.emotion-29 { border-top: solid 0.125rem #B80000; display: inline-block; width: 100%; @@ -641,12 +641,12 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media screen and (forced-colors: active) { - .emotion-28 { + .emotion-29 { border-bottom: solid 0.1875rem transparent; } } -.emotion-29 { +.emotion-30 { font-size: 0.875rem; line-height: 1.125rem; color: #545658; @@ -666,34 +666,34 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-30 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-29 { + .emotion-30 { font-size: 0.8125rem; line-height: 1rem; } } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-30 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-29 { + .emotion-30 { font-size: 0.8125rem; line-height: 1rem; } } -.emotion-31 { +.emotion-32 { color: #141414; font-size: 0.875rem; line-height: 1.125rem; @@ -707,20 +707,20 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-31 { + .emotion-32 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-32 { font-size: 0.8125rem; line-height: 1rem; } } -.emotion-32 { +.emotion-33 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -731,7 +731,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` margin: 0; } -.emotion-33 { +.emotion-34 { color: #141414; font-size: 1.125rem; line-height: 1.375rem; @@ -746,84 +746,84 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-33 { + .emotion-34 { font-size: 1.125rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-33 { + .emotion-34 { font-size: 1.25rem; line-height: 1.5rem; } } -.emotion-34 { +.emotion-35 { padding: 1rem 0.5rem 0.5rem; } @media (min-width: 25rem) { - .emotion-34 { + .emotion-35 { padding: 1rem 0 0.5rem 0; } } @media (min-width: 63rem) { - .emotion-34 { + .emotion-35 { padding: 1rem 1rem 0.5rem; } } @media (max-width: 14.9375rem) { - .emotion-35 { + .emotion-36 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-35 { + .emotion-36 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-35 { + .emotion-36 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-35 { + .emotion-36 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-35 { + .emotion-36 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-35 { + .emotion-36 { margin-left: 40%; } } @supports (display: grid) { - .emotion-35 { + .emotion-36 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -832,7 +832,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -841,7 +841,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -850,7 +850,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -859,7 +859,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -867,7 +867,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 80rem) { - .emotion-35 { + .emotion-36 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -875,7 +875,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-37 { +.emotion-38 { font-size: 0.9375rem; line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -890,58 +890,58 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-37 { + .emotion-38 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-37 { + .emotion-38 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 63rem) { - .emotion-37 { + .emotion-38 { padding-right: 2.5rem; } } -.emotion-37 ul { +.emotion-38 ul { padding-bottom: 1rem; -webkit-padding-start: 1.5rem; padding-inline-start: 1.5rem; } @media (min-width: 63rem) { - .emotion-37 ul { + .emotion-38 ul { padding-bottom: 0; } } -.emotion-37 li { +.emotion-38 li { margin-bottom: 0.5rem; } -.emotion-37 li:last-child { +.emotion-38 li:last-child { margin-bottom: 0; } -.emotion-42 { +.emotion-43 { border-top: solid 0.125rem #B80000; display: inline-block; width: 100%; } @media screen and (forced-colors: active) { - .emotion-42 { + .emotion-43 { border-bottom: solid 0.1875rem transparent; } } -.emotion-59 { +.emotion-60 { color: #141414; font-size: 0.875rem; line-height: 1.125rem; @@ -956,41 +956,41 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-59 { + .emotion-60 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-59 { + .emotion-60 { font-size: 0.8125rem; line-height: 1rem; } } @media (min-width: 37.5rem) { - .emotion-59 { + .emotion-60 { font-size: 0.9375rem; line-height: 1.125rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-59 { + .emotion-60 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-59 { + .emotion-60 { font-size: 0.875rem; line-height: 1.125rem; } } } -.emotion-65 { +.emotion-66 { font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: italic; @@ -998,7 +998,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` font-weight: inherit; } -.emotion-68 { +.emotion-69 { margin-bottom: 1.5rem; color: #000000; margin: 0; @@ -1006,54 +1006,54 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (max-width: 14.9375rem) { - .emotion-68 { + .emotion-69 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-68 { + .emotion-69 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-68 { + .emotion-69 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-68 { + .emotion-69 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-68 { + .emotion-69 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-68 { + .emotion-69 { margin-left: 40%; } } @supports (display: grid) { - .emotion-68 { + .emotion-69 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1062,7 +1062,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -1071,7 +1071,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -1080,7 +1080,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -1089,7 +1089,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -1097,7 +1097,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 80rem) { - .emotion-68 { + .emotion-69 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -1105,27 +1105,27 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } } -.emotion-68 ul { +.emotion-69 ul { padding-bottom: 1rem; -webkit-padding-start: 1.5rem; padding-inline-start: 1.5rem; } @media (min-width: 63rem) { - .emotion-68 ul { + .emotion-69 ul { padding-bottom: 0; } } -.emotion-68 li { +.emotion-69 li { margin-bottom: 0.5rem; } -.emotion-68 li:last-child { +.emotion-69 li:last-child { margin-bottom: 0; } -.emotion-70 { +.emotion-71 { margin-top: 0; list-style-type: none; font-size: 0.9375rem; @@ -1136,25 +1136,25 @@ exports[`Live Page creates snapshot of the live page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-70 { + .emotion-71 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-70 { + .emotion-71 { font-size: 1rem; line-height: 1.375rem; } } -.emotion-70>li { +.emotion-71>li { position: relative; color: inherit; } -.emotion-70>li::before { +.emotion-71>li::before { top: 0.5rem; content: ""; position: absolute; @@ -1162,7 +1162,7 @@ exports[`Live Page creates snapshot of the live page 1`] = ` inset-inline-start: -1rem; } -.emotion-70>li::before { +.emotion-71>li::before { border: 0.1875rem solid #3F3F42; background-color: #3F3F42; border-radius: 50%; @@ -1186,20 +1186,23 @@ exports[`Live Page creates snapshot of the live page 1`] = ` >
+

Israeli tanks shell Jabalia camp as heavy fighting continues in north Gaza

The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering

@@ -1207,10 +1210,10 @@ exports[`Live Page creates snapshot of the live page 1`] = `

Summary

Live Coverage

Not a random dude

  1. @@ -1296,42 +1299,42 @@ exports[`Live Page creates snapshot of the live page 1`] = ` role="text" > Breaking , Breaking news

    Breaking news @@ -1341,13 +1344,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `

  2. @@ -1355,31 +1358,31 @@ exports[`Live Page creates snapshot of the live page 1`] = ` role="text" > Published 6.07pm Tues 9th

    Timestamp test @@ -1389,13 +1392,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `

  4. @@ -1583,41 +1586,41 @@ exports[`Live Page creates snapshot of the live page 1`] = ` role="text" > Post headline , Post sub headline

    Some short form text