FR: Magazine Article layout

[ZoeBeykirch]

Context/Description

As a Mack Trucks content author, I want to adjust the Magazine template spacing. Since the site is responsive it will adjust dynamically with the viewport size. In this ticket we will focus on content max-width and address vertical spacing in another ticket.

Acceptance Criteria

User AC:

• As a website user, when I read a Bulldog Magazine article on my desktop computer, I see the body of text has more white space on the left and right.

Non-functional AC:

• The spacing change will be done in the Template: Bulldog Magazine Article #88
• All blocks will have a max width of 1040px
• Article text and pull quote of 690px
• Subhead, Attribution, Social block of 864px

Attachment / link to Figma

Desktop: https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=14119-2389

Mobile: https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=2222-52896

[BeckyMedlin]

Removed from sprint since this item must be completed after template is created. Once the template is working, the text content should get the styling. @mollyaljenkins I'm updating https://github.com/hlxsites/vg-macktrucks-com/issues/603 to reflect this dependency.

[amglebihan]

@ZoeBeykirch When reviewing the designs, it appears that the extra left/right space is only present around the V2 Pull Quote block. Should I adjust it specifically for this block? Additionally, we should modify the block's wrapper max-width rather than the left/right padding, as no padding is set—only a max-width, and the block is horizontally centred. Based on the designs, the max-width should be 689px instead of 1040px on desktop.

[ZoeBeykirch]

@WendyKruger

[WendyKruger]

@ZoeBeykirch When reviewing the designs, it appears that the extra left/right space is only present around the V2 Pull Quote block. Should I adjust it specifically for this block? Additionally, we should modify the block's wrapper max-width rather than the left/right padding, as no padding is set—only a max-width, and the block is horizontally centred. Based on the designs, the max-width should be 689px instead of 1040px on desktop.

per the Figma design there should be 288 px on the left and right of the subhead, attribution, and social parts and 375 px of padding on the left and right of the article text (including pull quote). The standard 200 px padding applies to the non-article blocks (related stories, etc.)

[amglebihan]

@ZoeBeykirch @WendyKruger
Since the site is responsive, we shouldn't refer to padding, as it will adjust dynamically with the viewport size. Instead, we should focus on content max-width.

I'll keep the max-width at 1040px for all blocks, except for the following:

• Article text and pull quote: 690px
• Subhead, Attribution and social, video: Currently, there isn't a subhead block, nor do I see any variant or styles that would display the attribution and social block inline. However, I'll look into it and check with the team, and also see if I can define a max-width of 864px for these elements, as well as for the video block.

[ZoeBeykirch]

@WendyKruger Hi. Alan is finalizing the styling for the Bulldog magazine article template and have a few remaining questions about the article's headline. The original AC stated that it should be an H1, but:

• If the Magazine Hero has a title defined, that title is set as an H1. Since there shouldn't be two H1 elements on the same page, the article's headline should then be an H2.
• If the Magazine Hero does not have a title defined, the article's headline can be set as an H1.
  We need clarification on how the article's headline should be styled when it is an H1 or H2. While the project has globally defined styles for each type of headline, the design in Figma uses the styling of an H3 for the article's headline. Should I apply the default styles for H1 and H2 instead? If I follow the default styles, the title will appear larger than it does in the current designs. How should I proceed?

[silviulungu]

Testing completed. Everything works accordingly.