FR: CSS Adjustment for Superscript

ZoeBeykirch commented 6 days ago

Description

As a Mack Trucks content editor, I want the superscript horizontal and vertical positioning formatting on the website to be enhanced for consistency across all pages, so that our registered trademarks or anything that uses superscript adheres closely to our brand guidelines.

Acceptance Criteria

User AC:

[ ] As a user, when I view the Mack Trucks website and see a registered trade mark, the size and vertical and horizontal positioning is always consistent no matter what text formatting is used or which block the superscript is in.

User AC:

[ ] As an editor, I can use the superscript and expect it to display the same result across the website.

Non-functional AC:

[ ] A potential fix is to change line 681 of style.css from:

main sup {

font-size: clamp(var(--body-font-size-s), 12px, 1em);

padding-left: 3px;

}

Change to:

main sup {

font-size: clamp(8px, .337em, 24px);

padding-left: 1px;

position: relative;

top: -.75em;

vertical-align: top;

}

See more details to the above suggestion: https://main--vg-macktrucks-com--hlxsites.hlx.page/drafts/wendy.kruger/bugs#superscript

Attachment / link to Figma

See examples of how the superscript should look: https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?node-id=2220-92911&t=yj3X4LfrAhIT8SLs-1

BeckyMedlin commented 4 days ago

@ZoeBeykirch Please flesh out this user story today. Thank you!

ZoeBeykirch commented 22 hours ago

Add two URLs that show inconsistent and where is it is correct. show examples in the main nav.

hlxsites / vg-macktrucks-com