From 7695a884b72731d14f5c110d4907b027cd1bf20b Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 4 Oct 2023 17:35:33 +0100 Subject: [PATCH] Restyle headings --- CHANGELOG.md | 2 +- .../components/filters/filters.scss | 2 +- .../colour-schemes/colour-schemes.stories.js | 6 +++--- .../utilities/typography/headings.stories.js | 5 ++++- .../utilities/typography/typography.stories.js | 2 +- src/nationalarchives/utilities/_typography.scss | 15 ++++++++------- 6 files changed, 18 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b009f4e..144e4e50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Focus on the confirmation message of the cookie banner once accepted or rejected - `hideCookieBannerKey` property on cookie banner changed to `cookiesPreferencesSetKey` -- The heading size of "The National Archives" in the footer is reduced from `l` to `m` - When using the prototype kit, `

` tags have some alterations that remove the default GOV.UK styling - When using the system theme, JavaScript is no longer required to write specific theme classes to the `` element - all of this is done in CSS - Standalone CSS such as `components/button.css` no longer includes Font Awesome @@ -32,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - The SCSS mixin `colour-outline` now accepts optional width and style properties - In coloured blocks, the custom CSS property `--background` now gets explictly replaced with `--accent-background`, `--contrast-background` or `--accent-background-light` - `typography.$base-font-size-px` is now `typography.$relative-1rem-px` +- `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans ### Deprecated ### Removed diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss index 1657b2e0..d484de37 100644 --- a/src/nationalarchives/components/filters/filters.scss +++ b/src/nationalarchives/components/filters/filters.scss @@ -4,7 +4,7 @@ .tna-filters { display: flex; flex-wrap: wrap; - gap: 1rem; + gap: 0.75rem 1rem; @include spacing.space-below; diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js index 1bbe1bdf..cb73782b 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js @@ -168,7 +168,7 @@ const Template = ({ theme, accent }) => { })}

-
+

TNA colour theme

Heading

@@ -300,11 +300,11 @@ const Template = ({ theme, accent }) => {

Douglas Adams, Mostly Harmless

-

+

Reaerching with The National Archives

Lorem ipsum link

-
+

Supertitle

Reaerching with The National Archives diff --git a/src/nationalarchives/stories/utilities/typography/headings.stories.js b/src/nationalarchives/stories/utilities/typography/headings.stories.js index e52f87d2..096fecc8 100644 --- a/src/nationalarchives/stories/utilities/typography/headings.stories.js +++ b/src/nationalarchives/stories/utilities/typography/headings.stories.js @@ -19,7 +19,10 @@ const HeadingsTemplate = ({ text }) => `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate( { params: { text, size: "l" } }, 2, - )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}`; + )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}${HeadingTemplate( + { params: { text, size: "s" } }, + 4, + )}`; export const Headings = HeadingsTemplate.bind({}); Headings.args = { diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js index b27b8950..7f66a9de 100644 --- a/src/nationalarchives/stories/utilities/typography/typography.stories.js +++ b/src/nationalarchives/stories/utilities/typography/typography.stories.js @@ -19,7 +19,7 @@ Paragraph.args = { }; const HeadingLinkTemplate = ({ text, href }) => - `

+ `

${text}

`; export const HeadingLink = HeadingLinkTemplate.bind({}); diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 3f9c7290..f735ad1e 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -323,7 +323,6 @@ small { %heading { @include colour.colour-font("font-dark"); - @include typography.heading-font; text-wrap: balance; @@ -351,12 +350,12 @@ small { } %heading-xl { + @include typography.heading-font; @include typography.relative-font-size(64); line-height: 1.2; @include media.on-medium { - // @include typography.relative-font-size(42); - @include typography.relative-font-size(50); + @include typography.relative-font-size(42); } @include media.on-mobile { @@ -365,12 +364,12 @@ small { } %heading-l { + @include typography.heading-font; @include typography.relative-font-size(32); - line-height: 1.4; + line-height: 1.3; @include media.on-medium { - // @include typography.relative-font-size(26); - @include typography.relative-font-size(28); + @include typography.relative-font-size(26); } @include media.on-mobile { @@ -379,11 +378,13 @@ small { } %heading-m { - @include typography.relative-font-size(20); + @include typography.main-font-weight-bold; + @include typography.relative-font-size(22); line-height: 1.6; } %heading-s { + @include typography.main-font-weight-bold; @include typography.relative-font-size(18); line-height: 1.6; }