Remove italics, update heading font sizes and change padding on block…

…quotes (#83) * Remove italics, update font sizes * Switch to node20 for GitHub Actions * Switch back to composite for GitHub Actions * Update checkout and setup-node actions to use latest versions * Tweak blockquote padding on small/tiny devices
nationalarchives · Feb 6, 2024 · 6e89d39 · 6e89d39
1 parent caa8d61
commit 6e89d39
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 38 deletions.
diff --git a/.github/actions/lint/action.yml b/.github/actions/lint/action.yml
@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml
@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

diff --git a/.github/actions/test-package/action.yml b/.github/actions/test-package/action.yml
@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

diff --git a/.github/actions/tests/action.yml b/.github/actions/tests/action.yml
@@ -6,8 +6,8 @@ on:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
     - name: Install dependencies

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -9,7 +9,7 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get and validate version number
         id: get-version
         run: |
@@ -26,7 +26,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Lint
         uses: ./.github/actions/lint
 
@@ -35,7 +35,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Tests
         uses: ./.github/actions/tests
 
@@ -44,7 +44,7 @@ jobs:
     needs:
       - check
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Test build package
         uses: ./.github/actions/test-package
 
@@ -53,7 +53,7 @@ jobs:
     needs:
       - test-package
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: GOV.UK prototype kit test
         uses: ./.github/actions/prototype-kit-test
 
@@ -67,8 +67,8 @@ jobs:
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           registry-url: https://registry.npmjs.org/
@@ -101,8 +101,8 @@ jobs:
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           registry-url: https://registry.npmjs.org/
@@ -131,7 +131,7 @@ jobs:
       - publish-npm
       - publish-npm-cookie-banner
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Get release notes
         id: get-release-notes
         run: ./tasks/get-release-notes.sh "${{ needs.check.outputs.version }}" > RELEASE_NOTES.txt

diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml
@@ -32,10 +32,10 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies
@@ -52,10 +52,10 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -14,10 +14,10 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
       - name: Install dependencies

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -13,21 +13,21 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Lint
         uses: ./.github/actions/lint
 
   tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Tests
         uses: ./.github/actions/tests
 
   test-package:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Test build package
         uses: ./.github/actions/test-package
 
@@ -36,6 +36,6 @@ jobs:
     needs:
       - test-package
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: GOV.UK prototype kit test
         uses: ./.github/actions/prototype-kit-test
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Split out Font Awesome into a separate CSS file
 - Change the default `htmlLang` from `en-GB` to `en`
 - Changed the aspect ratio of the hero image to be closer to a 3:1
+- Update large heading size to not be smaller than medium headings on medium devices
+- Remove italicised text from picture element captions and blockquotes, update font sizes
+- Reduce padding between checkboxes, radios and their labels when small
+- Reduce padding on blockquotes on mobile
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -51,7 +51,6 @@
     padding: 1rem;
 
     @include typography.relative-font-size(16);
-    font-style: italic;
 
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
@@ -79,6 +78,8 @@
     &__caption {
       margin-right: 0;
       margin-left: 0;
+
+      @include typography.relative-font-size(14);
     }
 
     @if grid.$gutter-width-tiny != 1.5rem {

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -17,13 +17,13 @@
     // 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-Italic.ttf");
+  //   font-weight: typographyVars.$main-font-weight;
+  //   font-style: italic;
+  //   // font-display: swap;
+  // }
 
   @font-face {
     font-family: "Open Sans";
@@ -87,9 +87,16 @@ strong {
 p {
   @include spacing.space-above;
 
-  + p {
+  + p/*,
+  + .tna-ul,
+  + .tna-ol,
+  + .tna-blockquote*/ {
     margin-top: 1rem;
   }
+
+  // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {
+  //   margin-top: 1rem;
+  // }
 }
 
 a {
@@ -265,7 +272,7 @@ small {
   line-height: 1.3;
 
   @include media.on-medium {
-    @include typography.relative-font-size(26);
+    @include typography.relative-font-size(30);
   }
 
   @include media.on-mobile {
@@ -389,6 +396,7 @@ small {
 
   &__author {
     font-style: italic;
+    @include typography.relative-font-size(16);
 
     .tna-blockquote & {
       margin: 1rem 0 0;
@@ -398,6 +406,10 @@ small {
       content: "\2014" " ";
     }
   }
+
+  @include media.on-tiny {
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+  }
 }
 
 .tna-large-paragraph {