6650 - MozFest Dark Quote

[chris-lawton]

Description

• Changes the mozfest-base template to have one column
• Adds the mozfest_dark_quote.html template
• BE work to integrate this is to come

Desktop/Tablet/Mobile screens

Details

Link to sample test page:
Related PRs/issues: #

Checklist

Tests

• Is the code I'm adding covered by tests?

Changes in Models:

• Did I update or add new fake data?
• Did I squash my migration?
• Are my changes backward-compatible. If not, did I schedule a deploy with the rest of the team?

Documentation:

• Is my code documented?
• Did I update the READMEs or wagtail documentation?

Merge Method
💡❗Remember to use squash merge when merging non-feature branches into main

[tbrlpld]

@chris-lawton Can you add some context about the reuse of existing code and new code? It looks like we are using one existing CSS class but none of the markup. I am also a bit concerned about the mix of Tailwind and component CSS classes. This feels like it will be complex to maintain. Is there anything we can do to make the two components more alike / consistent to maintain?

[tbrlpld]

Can you add some context why this is building a totally new block template over reusing the existing quote block that is mentioned on the ticket? It looks like we are reusing the CSS but not the HTML. Could this be handled as a variant in mostly CSS?

[chris-lawton]

We've held some conversations since the ticket was created and it was decided that the dark background was enough to warrant it being a new block - i'll update the ticket to make this clearer.

The dark quote block is heavily based of the existing single_quote_block.html template (https://github.com/MozillaFoundation/foundation.mozilla.org/blob/main/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/single_quote_block.html) which also contains a mix of tailwind and css classes. Unfortunately we can't use this template directly as it extends
"./base_streamfield_block.html" which wraps everything in a container (https://github.com/MozillaFoundation/foundation.mozilla.org/blob/main/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/base_streamfield_block.html#L5) meaning we couldn't achieve the full width black background seen in the design.

The main difference between the dark quote block in the design and the existing one is the font size of the quote so i'll check in standup which one we should be following.

[chris-lawton]

Discussed in standup and we're going to follow the styles of the current quote block. Updated here: ad110bc

[tbrlpld]

Now I feel like I talked you into less semantic HTML 😭

[tbrlpld]

Now I feel like I talked you into less semantic HTML 😭