diff --git a/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx b/dotcom-rendering/src/components/PuzzlesArchiveCalendar.island.tsx index 60160bf70c8..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 ); `; @@ -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 4eaf76142d0..e56dee1815d 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,15 @@ const headingStyles = css` } } p { - ${textEgyptian17}; + ${textEgyptian15}; max-width: 620px; margin: 0 0 ${space[6]}px; - color: var(--puzzles-text-colour); + padding-top: 10px; + color: var(--puzzles-supporting-text-colour); + ${from.tablet} { + ${textEgyptian17}; + padding-top: ${space[2]}px; + } } ${from.leftCol} { h1 { @@ -227,7 +233,7 @@ export const PuzzlesArchiveLayout = ({