Font optimisations, block quote updates (#89)

* Switch to variable fonts from Google * Lazy load picture images * Remove hero tint * Update blockquote HTML * Update global header example links * Update CHANGELOG.md * Lint
nationalarchives · Feb 16, 2024 · 2a9ad70 · 2a9ad70
1 parent 2ef2286
commit 2a9ad70
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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
@@ -9,7 +9,7 @@
         "width": 499,
         "height": 333
       },
-      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\"></picture></div></figure>",
+      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture></div></figure>",
       "hidden": false
     },
     {
@@ -21,7 +21,7 @@
         "height": 333,
         "caption": "<p>This is a pretty image</p>"
       },
-      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\"></picture></div><figcaption class=\"tna-picture__caption\"><p>This is a pretty image</p></figcaption></figure>",
+      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture></div><figcaption class=\"tna-picture__caption\"><p>This is a pretty image</p></figcaption></figure>",
       "hidden": false
     },
     {
@@ -39,7 +39,7 @@
           }
         ]
       },
-      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\"></picture></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>",
+      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>",
       "hidden": false
     },
     {
@@ -62,7 +62,7 @@
           }
         ]
       },
-      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\"></picture></div><div class=\"tna-picture__transcript\"><div class=\"tna-tabs \" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\"><li class=\"tna-tabs__list-item\"><a href=\"#transcript\" class=\"tna-tabs__list-item-link\" id=\"transcript-tab\">Transcript</a></li><li class=\"tna-tabs__list-item\"><a href=\"#translation\" class=\"tna-tabs__list-item-link\" id=\"translation-tab\">Translation</a></li></ul><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><p>Lorem ipsum translation</p></section></div></div></div></figure>",
+      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture></div><div class=\"tna-picture__transcript\"><div class=\"tna-tabs \" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\"><li class=\"tna-tabs__list-item\"><a href=\"#transcript\" class=\"tna-tabs__list-item-link\" id=\"transcript-tab\">Transcript</a></li><li class=\"tna-tabs__list-item\"><a href=\"#translation\" class=\"tna-tabs__list-item-link\" id=\"translation-tab\">Translation</a></li></ul><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><p>Lorem ipsum translation</p></section></div></div></div></figure>",
       "hidden": false
     },
     {
@@ -82,7 +82,7 @@
           }
         ]
       },
-      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\" data-informationlabelopen=\"Show information\" data-informationlabelclose=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\"></picture></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>",
+      "html": "<figure class=\"tna-picture \" data-module=\"tna-picture\" data-informationlabelopen=\"Show information\" data-informationlabelclose=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/picture/template.njk b/src/nationalarchives/components/picture/template.njk
@@ -7,7 +7,7 @@
     {%- for source in params.sources -%}
       <source class="tna-picture__image" media="{{ source.media }}" srcset="{{ source.src }}" width="{{ source.width }}" height="{{ source.height }}">
     {%- endfor -%}
-      <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}">
+      <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}" loading="lazy">
     </picture>
   </div>
 {%- 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
@@ -343,7 +343,7 @@ const Template = ({ theme, accent }) => {
             <div class="tna-blockquote__quote">
               <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
             </div>
-            <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
+            <p class="tna-blockquote__citation">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
             <a href="#">Researching with The National Archives</a>

diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js
@@ -64,7 +64,7 @@ const BlockquoteTemplate = ({
   <div class="tna-blockquote__quote">
     ${html}
   </div>
-  <p class="tna-blockquote__author">${author}</p>
+  <p class="tna-blockquote__citation">${author}</p>
 </blockquote>`;
 export const Blockquote = BlockquoteTemplate.bind({});
 Blockquote.args = {

diff --git 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,27 +14,32 @@
   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 {
   font-family: typography.$heading-font-family;
   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
@@ -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
@@ -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/",
         },
       ],
     },