From 3fc6947e32c9e27883052c4c961b8e79e881c341 Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 16:58:22 +0100 Subject: [PATCH 1/8] Adjust puzzle archive headings on tablet and up Apply headlineBold28 styling to puzzle archive headings at the tablet breakpoint and above. --- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index 0f36f5e3f21..0e022861099 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import { from, + headlineBold28, headlineBold34, palette, space, @@ -92,6 +93,9 @@ const headingStyles = css` margin: 0; padding-top: ${space[2]}px; overflow-wrap: anywhere; + ${from.tablet} { + ${headlineBold28}; + } } p { ${textEgyptian17}; From 26ed5810dd23865f9091692af1be5753078bd26d Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:05:38 +0100 Subject: [PATCH 2/8] Update puzzle archive heading style to use headlineBold24 --- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index 0e022861099..4eaf76142d0 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/react'; import { from, + headlineBold24, headlineBold28, - headlineBold34, palette, space, textEgyptian17, @@ -88,7 +88,7 @@ const archiveGridStyles = css` const headingStyles = css` ${archiveGridStyles}; h1 { - ${headlineBold34}; + ${headlineBold24}; color: var(--puzzles-headline-colour); margin: 0; padding-top: ${space[2]}px; From ff90aa442a6c833b75723c85344de4e1d2de9715 Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:08:21 +0100 Subject: [PATCH 3/8] Update puzzle archive title styles to use headlineMedium variants --- .../src/components/PuzzlesArchiveCalendar.island.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx index e53fb489756..60160bf70c8 100644 --- a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx +++ b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import { from, headlineBold20, - headlineBold34, + headlineMedium28, + headlineMedium34, palette, space, textSans14, @@ -181,10 +182,12 @@ const tabsStyles = css` `; const titleStyles = css` - ${headlineBold34}; + ${headlineMedium28}; margin: ${space[3]}px 0 ${space[3]}px; color: var(--puzzles-headline-colour, ${palette.neutral[7]}); - line-height: 1.05; + ${from.tablet} { + ${headlineMedium34}; + } `; const recentStyles = css` From f6b7dea883d5ad7be17ec15fcddcc6bcb3fb31f6 Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:23:44 +0100 Subject: [PATCH 4/8] Adjust puzzles archive supporting text colour Add a supporting text theme variable and use it for the archive introduction, giving it a lighter colour in light mode while preserving its dark-mode colour. --- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 2 +- dotcom-rendering/src/lib/puzzlesTheme.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index 4eaf76142d0..52d6cc03085 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -101,7 +101,7 @@ const headingStyles = css` ${textEgyptian17}; max-width: 620px; margin: 0 0 ${space[6]}px; - color: var(--puzzles-text-colour); + color: var(--puzzles-supporting-text-colour); } ${from.leftCol} { h1 { diff --git a/dotcom-rendering/src/lib/puzzlesTheme.ts b/dotcom-rendering/src/lib/puzzlesTheme.ts index 86ae3b51326..83236b7df40 100644 --- a/dotcom-rendering/src/lib/puzzlesTheme.ts +++ b/dotcom-rendering/src/lib/puzzlesTheme.ts @@ -13,6 +13,7 @@ export const puzzlesPageTheme = ( --puzzles-header-background: ${palette.opinion[800]}; --puzzles-headline-colour: ${palette.neutral[7]}; --puzzles-text-colour: ${palette.neutral[7]}; + --puzzles-supporting-text-colour: ${palette.neutral[46]}; --puzzles-border-colour: ${palette.neutral[86]}; background: var(--puzzles-page-background); @@ -30,6 +31,7 @@ export const puzzlesPageTheme = ( --puzzles-card-text-colour: ${palette.neutral[86]}; --puzzles-headline-colour: ${palette.neutral[97]}; --puzzles-text-colour: ${palette.neutral[86]}; + --puzzles-supporting-text-colour: ${palette.neutral[86]}; --puzzles-border-colour: ${palette.neutral[46]}; } } From c52428e1be3a5a5f18b30c0b54253aed55ea758f Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:28:16 +0100 Subject: [PATCH 5/8] Adjust puzzles archive supporting text font size for better readability --- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index 52d6cc03085..a096656b346 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -5,6 +5,7 @@ import { headlineBold28, palette, space, + textEgyptian15, textEgyptian17, } from '@guardian/source/foundations'; import { AdSlot } from '../components/AdSlot.web'; @@ -98,10 +99,13 @@ const headingStyles = css` } } p { - ${textEgyptian17}; + ${textEgyptian15}; max-width: 620px; margin: 0 0 ${space[6]}px; color: var(--puzzles-supporting-text-colour); + ${from.tablet} { + ${textEgyptian17}; + } } ${from.leftCol} { h1 { From 75f2c906d8da71fffb7a0885f85a48ac47e20c1b Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:36:37 +0100 Subject: [PATCH 6/8] Refactor puzzles archive layout and styles for improved clarity --- .../src/components/PuzzlesArchiveCalendar.island.tsx | 4 ++++ dotcom-rendering/src/layouts/PuzzlesArchiveLayout.test.tsx | 2 +- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx index 60160bf70c8..15da29f4346 100644 --- a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx +++ b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx @@ -364,6 +364,7 @@ const calendarStyles = css` ); } .setter-name { + display: none; position: absolute; top: 50%; left: 2px; @@ -409,6 +410,9 @@ const calendarStyles = css` .day-number { font-size: 12px; } + .setter-name { + display: block; + } } ${from.desktop} { grid-template-columns: repeat(7, 78px); diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.test.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.test.tsx index 9228014bd24..d6985473f8b 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.test.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.test.tsx @@ -65,7 +65,7 @@ describe('PuzzlesArchiveLayout', () => { expect( screen.getByRole('heading', { level: 1, - name: 'Word games archive', + name: 'Word games', }), ).toBeInTheDocument(); }); diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index a096656b346..f31f8ad79dc 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -231,7 +231,7 @@ export const PuzzlesArchiveLayout = ({
-

{archive.title} archive

+

{archive.title}

Date: Fri, 23 Oct 2026 17:39:41 +0100 Subject: [PATCH 7/8] Add padding to heading styles in puzzles archive for improved spacing --- dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx index f31f8ad79dc..e56dee1815d 100644 --- a/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx +++ b/dotcom-rendering/src/layouts/PuzzlesArchiveLayout.tsx @@ -102,9 +102,11 @@ const headingStyles = css` ${textEgyptian15}; max-width: 620px; margin: 0 0 ${space[6]}px; + padding-top: 10px; color: var(--puzzles-supporting-text-colour); ${from.tablet} { ${textEgyptian17}; + padding-top: ${space[2]}px; } } ${from.leftCol} { From b5bedd862bfbf2ce6650fdbcbf82f4cc68d8e3aa Mon Sep 17 00:00:00 2001 From: andresilva-guardian Date: Fri, 23 Oct 2026 17:43:55 +0100 Subject: [PATCH 8/8] Increase height of lines in puzzles archive for improved visibility --- .../src/components/PuzzlesArchiveCalendar.island.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx index 15da29f4346..b74967faae1 100644 --- a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx +++ b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx @@ -143,14 +143,14 @@ const sectionStyles = css` `; const linesStyles = css` - height: 10px; + height: 13px; margin-bottom: ${space[4]}px; background: repeating-linear-gradient( to bottom, var(--puzzles-border-colour, ${palette.neutral[86]}) 0, var(--puzzles-border-colour, ${palette.neutral[86]}) 1px, transparent 1px, - transparent 3px + transparent 4px ); `;