diff --git a/CHANGELOG.md b/CHANGELOG.md index 03184b4e..b1446960 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Initial concept of text detail elements - Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]` - Allow links to have no visited state with `tna-link--no-visited-state` - Card supertitles can be made "plain" with no contrasting colour @@ -22,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile` - Mixin `colour.invert` changed to `colour.contrast` - Background colour classes changed to BEM (`tna-background--accent` -> `tna-background-accent`) +- Text balance on headings removed but left on headings with links +- `background-tint` colour changed for better accessibility/contrast ### Deprecated ### Removed @@ -31,6 +32,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Cookie banner URL is now correctly used +- Spacing above picture elements fixed +- Image widths fixed (not stretched) ### Security diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index 9bddba43..0d0adcff 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/src/nationalarchives/components/picture/picture.scss @@ -4,10 +4,11 @@ @use "../button"; .tna-picture { - margin: 0; - padding: 0; - @include spacing.space-above; + margin-right: 0; + margin-bottom: 0; + margin-left: 0; + padding: 0; &__image-wrapper { position: relative; diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js index 3eb562c9..9394f4da 100644 --- a/src/nationalarchives/stories/utilities/typography/typography.stories.js +++ b/src/nationalarchives/stories/utilities/typography/typography.stories.js @@ -57,11 +57,11 @@ SceneSetterSmall.args = { text: `We are the official archive of England and Wales. Discover 1,000 years of history through fascinating stories from the past or start your own research and search our catalogue of 32 million records. Plan a visit to access original historic documents from our collections then enjoy the grounds, café, and free exhibitions.`, }; -const TextDetailsTemplate = () => - `

- Typed slip with photographs - 'The Italian Steamer Aida Lauro which ran on the rocks near Cape Cornwall a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the Aida Lauro broken in two by a severe buffeting from the seas near Cape Cornwall. -

`; -export const TextDetails = TextDetailsTemplate.bind({}); +// const TextDetailsTemplate = () => +// `

+// Typed slip with photographs - 'The Italian Steamer Aida Lauro which ran on the rocks near Cape Cornwall a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the Aida Lauro broken in two by a severe buffeting from the seas near Cape Cornwall. +//

`; +// export const TextDetails = TextDetailsTemplate.bind({}); const BlockquoteTemplate = ({ html, diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss index 5074d66c..54e68b21 100644 --- a/src/nationalarchives/utilities/_global.scss +++ b/src/nationalarchives/utilities/_global.scss @@ -42,6 +42,7 @@ picture, video, canvas { max-width: 100%; + height: auto; display: block; } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 89b258f5..23fef058 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -135,46 +135,46 @@ small { ); } -.tna-detail[title][data-type] { - padding: 0 0.375rem; +// .tna-detail[title][data-type] { +// padding: 0 0.375rem; - display: inline-flex; - flex-flow: row nowrap; - align-items: baseline; - gap: 0.5rem; +// display: inline-flex; +// flex-flow: row nowrap; +// align-items: baseline; +// gap: 0.5rem; - vertical-align: baseline; +// vertical-align: baseline; - background-color: #ccc; +// background-color: #ccc; - &::after { - @include colour.colour-font("font-base"); - @include typography.detail-font-small; - vertical-align: baseline; +// &::after { +// @include colour.colour-font("font-base"); +// @include typography.detail-font-small; +// vertical-align: baseline; - content: attr(data-type) / ""; - } +// content: attr(data-type) / ""; +// } - &[data-type="misc"] { - background-color: #f28482; - } +// &[data-type="misc"] { +// background-color: #f28482; +// } - &[data-type="loc"] { - background-color: #edae49; - } +// &[data-type="loc"] { +// background-color: #edae49; +// } - &[data-type="per"] { - background-color: #b5e2fa; - } +// &[data-type="per"] { +// background-color: #b5e2fa; +// } - @at-root #{selector.unify("a", &)} { - @include colour.colour-font("font-base"); +// @at-root #{selector.unify("a", &)} { +// @include colour.colour-font("font-base"); - &::after { - text-decoration: none; - } - } -} +// &::after { +// text-decoration: none; +// } +// } +// } .tna-chip-list { @include spacing.space-above; @@ -245,12 +245,11 @@ small { %heading { @include colour.colour-font("font-dark"); - text-wrap: balance; - &:not(.tna-heading--no-link-arrow) { a { display: inline-block; + text-wrap: balance; // text-decoration-thickness: .1em; &::after { diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index 40792609..50ef5656 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT) */ $colour-palette-default: ( "page-background": #f4f4f4, - "background-tint": #d8d8d8, + "background-tint": #e2e2e2, "font-base": $base-font, "font-dark": brand-colour("black"), "font-light": hex-to-rgb($base-font, 0.7),