diff --git a/CHANGELOG.md b/CHANGELOG.md index 26230dbe..8971d810 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed + +- Updated header and global header HTML to allow adornable logos +- Reduced specicifity of some CSS selectors for card elements + ### Deprecated ### Removed ### Fixed diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 3d694ac4..35d8e773 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -201,11 +201,11 @@ @include media.on-larger-than-mobile { @include horizontal-card-layout("--horizontal", 2); - &--horizontal#{&}--horizontal-small-image { + &--horizontal-small-image { grid-template-columns: max(10rem, 25%) 1fr; } - &--horizontal#{&}--horizontal-small-image#{&}--flipped { + &--horizontal-small-image#{&}--flipped { grid-template-columns: 1fr max(10rem, 25%); } } @@ -213,11 +213,11 @@ @include media.on-small { @include horizontal-card-layout("--horizontal-on-small", 1); - &--horizontal-on-small#{&}--horizontal-small-image { + &--horizontal-small-image { grid-template-columns: max(10rem, 25%) 1fr; } - &--horizontal-on-small#{&}--horizontal-small-image#{&}--flipped { + &--horizontal-small-image#{&}--flipped { grid-template-columns: 1fr max(10rem, 25%); } } diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index 8ee6a7c1..ac126f31 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -34,7 +34,7 @@ } ] }, - "html": "
" + "html": "
" }, { "name": "with no logo link", @@ -65,7 +65,7 @@ } ] }, - "html": "
" + "html": "
" }, { "name": "with no top navigation", @@ -88,7 +88,7 @@ } ] }, - "html": "
" + "html": "
" }, { "name": "with navigationId", @@ -124,7 +124,7 @@ ], "navigationId": "test-navigation-id" }, - "html": "
" + "html": "
" }, { "name": "with topNavigationId", @@ -160,7 +160,7 @@ ], "topNavigationId": "test-top-navigation-id" }, - "html": "
" + "html": "
" }, { "name": "with classes", @@ -196,7 +196,7 @@ ], "classes": "card__test-class" }, - "html": "
" + "html": "
" }, { "name": "with attributes", @@ -234,7 +234,7 @@ "data-testattribute": "foobar" } }, - "html": "
" + "html": "
" } ] } diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index e69c0efa..de9fc5b9 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -61,13 +61,6 @@ } } - .tna-logo { - width: 6.75rem; - height: 6.75rem; - - flex-shrink: 0; - } - &__logo-strapline { padding-right: spacing.space(0.625); @@ -249,6 +242,18 @@ } } + .tna-logo { + width: 6.75rem; + height: 6.75rem; + + flex-shrink: 0; + + svg { + width: 100%; + height: 100%; + } + } + @include media.on-medium { &__navigation { column-gap: spacing.space(1); diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index d0fc5dc6..f55f92ab 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -12,13 +12,15 @@ {%- else %}