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": "
This is a pretty image
" }, - "html": "This is a pretty image
This is a pretty image
Lorem ipsum transcript
Lorem ipsum transcript
Lorem ipsum transcript
Lorem ipsum translation
Lorem ipsum transcript
Lorem ipsum translation
Lorem ipsum transcript
Lorem ipsum transcript
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
${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/", }, ], },