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 %}