diff --git a/CHANGELOG.md b/CHANGELOG.md index 0625e3ce..cdc45a6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,13 +10,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Automated AXE checks now include WCAG 2.2 +- Lazy loading for images in picture component ### Changed - Changed spacing between navigation items in header +- `tna-blockquote__author` changed to `tna-blockquote__citation` ### Deprecated ### Removed + +- Ability to tint hero images + ### Fixed - Stopped logo from shrinking with longer straplines in headers diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index d3ebdb9f..c97ed9da 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -69,8 +69,7 @@ &__title-description { padding-bottom: 0.25rem; - @include typography.detail-font; - @include typography.detail-font-weight-bold; + @include typography.detail-font(true); } &__date-label { diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index 748e2c35..57df514b 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/src/nationalarchives/components/hero/hero.scss @@ -161,37 +161,6 @@ &__body { } - &--tint .tna-hero__figure { - &::before, - &::after { - position: absolute; - inset: 0; - - content: ""; - } - - &::before { - z-index: 2; - - background-color: colour.brand-colour("maroon"); - @include colour.colour-background("accent-background"); - - mix-blend-mode: screen; - } - - &::after { - z-index: 3; - - background-color: colour.brand-colour("cream"); - - mix-blend-mode: multiply; - } - - .tna-hero__image { - filter: grayscale(1) contrast(1.75) brightness(1.2); - } - } - @include media.on-mobile { &__figure { min-height: auto; diff --git a/src/nationalarchives/components/picture/fixtures.json b/src/nationalarchives/components/picture/fixtures.json index fd432449..3ecfd42a 100644 --- a/src/nationalarchives/components/picture/fixtures.json +++ b/src/nationalarchives/components/picture/fixtures.json @@ -9,7 +9,7 @@ "width": 499, "height": 333 }, - "html": "
\"The
", + "html": "
\"The
", "hidden": false }, { @@ -21,7 +21,7 @@ "height": 333, "caption": "

This is a pretty image

" }, - "html": "
\"The

This is a pretty image

", + "html": "
\"The

This is a pretty image

", "hidden": false }, { @@ -39,7 +39,7 @@ } ] }, - "html": "
\"The

Lorem ipsum transcript

", + "html": "
\"The

Lorem ipsum transcript

", "hidden": false }, { @@ -62,7 +62,7 @@ } ] }, - "html": "
\"The

Lorem ipsum transcript

Lorem ipsum translation

", + "html": "
\"The

Lorem ipsum transcript

Lorem ipsum translation

", "hidden": false }, { @@ -82,7 +82,7 @@ } ] }, - "html": "
\"The

Lorem ipsum transcript

", + "html": "
\"The

Lorem ipsum transcript

", "hidden": false } ] diff --git a/src/nationalarchives/components/picture/template.njk b/src/nationalarchives/components/picture/template.njk index 7b7405a9..cd188908 100644 --- a/src/nationalarchives/components/picture/template.njk +++ b/src/nationalarchives/components/picture/template.njk @@ -7,7 +7,7 @@ {%- for source in params.sources -%} {%- endfor -%} - {{ params.alt }} + {{ params.alt }} {%- if params.information -%} diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js index 56151a09..30e7cee8 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -343,7 +343,7 @@ const Template = ({ theme, accent }) => {

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.

-

Douglas Adams, Mostly Harmless

+

Douglas Adams, Mostly Harmless

Researching with The National Archives diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js index 1e2345fa..a44df119 100644 --- a/src/nationalarchives/stories/utilities/typography/typography.stories.js +++ b/src/nationalarchives/stories/utilities/typography/typography.stories.js @@ -64,7 +64,7 @@ const BlockquoteTemplate = ({
${html}
-

${author}

+

${author}

`; export const Blockquote = BlockquoteTemplate.bind({}); Blockquote.args = { diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss index 34b0f76b..4a17ab60 100644 --- a/src/nationalarchives/tools/_typography.scss +++ b/src/nationalarchives/tools/_typography.scss @@ -6,11 +6,6 @@ font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem; } -@mixin interacted-text-decoration { - text-decoration: underline; - text-decoration-thickness: typography.$interactive-text-decoration-thickness; -} - @mixin main-font-weight { font-weight: typography.$main-font-weight; } @@ -19,9 +14,16 @@ font-weight: typography.$main-font-weight-bold; } -@mixin main-font { +@mixin main-font($bold: false) { font-family: typography.$main-font-family; - @include main-font-weight; + @if $bold { + @include main-font-weight-bold; + } @else { + @include main-font-weight; + } + font-optical-sizing: auto; + font-style: normal; + font-variation-settings: "wdth" 100; } @mixin heading-font { @@ -29,17 +31,15 @@ font-weight: typography.$heading-font-weight; } -@mixin detail-font-weight { - font-weight: typography.$detail-font-weight; -} - -@mixin detail-font-weight-bold { - font-weight: typography.$detail-font-weight-bold; -} - -@mixin detail-font { +@mixin detail-font($bold: false) { font-family: typography.$detail-font-family; - @include detail-font-weight; + @if $bold { + font-weight: typography.$detail-font-weight-bold; + } @else { + font-weight: typography.$detail-font-weight; + } + font-optical-sizing: auto; + font-style: normal; } @mixin detail-font-small { @@ -48,3 +48,8 @@ text-transform: uppercase; line-height: #{math.div(typography.$relative-1rem-px, 14)}; } + +@mixin interacted-text-decoration { + text-decoration: underline; + text-decoration-thickness: typography.$interactive-text-decoration-thickness; +} diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index c02071d6..26db9086 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -17,14 +17,6 @@ // font-display: swap; } - // @font-face { - // font-family: "Open Sans"; - // src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf"); - // font-weight: typographyVars.$main-font-weight; - // font-style: italic; - // // font-display: swap; - // } - @font-face { font-family: "Open Sans"; src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf"); @@ -49,7 +41,7 @@ // font-display: swap; } } @else { - @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */ + @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */ } .tna-template { @@ -394,7 +386,7 @@ small { font-weight: 700; } - &__author { + &__citation { @include typography.relative-font-size(16); .tna-blockquote & { diff --git a/tasks/global-header/generate-global-header-assets.js b/tasks/global-header/generate-global-header-assets.js index 7c72df72..07c6ade7 100644 --- a/tasks/global-header/generate-global-header-assets.js +++ b/tasks/global-header/generate-global-header-assets.js @@ -47,15 +47,15 @@ const globalHeaderHTML = nunjucks }, { text: "Using the archives", - href: "#/using-the-archives", + href: "https://www.nationalarchives.gov.uk/help-with-your-research/", }, { text: "Learn", - href: "#/learn", + href: "https://www.nationalarchives.gov.uk/education/", }, { text: "Professional guidance & services", - href: "#/professional-guidance-and-services", + href: "https://www.nationalarchives.gov.uk/information-management/", }, ], },