CHEMH-89 | @jdwjdwjdw | Style event node and teaser

[jdwjdwjdw]

READY FOR REVIEW

Summary

• See Events node page and teasers in figma
• CHEMH-89: Style event node
  • I wasn't able to match designs completely due to drupal/subtheme limitations, but got as close as I could.
• CHEMH-86: Card display in teaser
• CHEMH-87: Card display in More Events
• CHEMH-85: Card display in grid
• Fixup event cta button icon bug

Review By (Date)

• When convenient

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Add some example events
3. Confirm that the event node page matches figma (outside of limitations with field order/display)
4. Confirm that the more events cards match the designs
5. Add a basic page with events lists and teasers, and confirm that they match the designs
6. Review code 🥗

Associated Issues and/or People

• CHEMH-89: Style event node

[jenbreese]

@jdwjdwjdw I started looking at it. In the phone views, the headings and related topics seem really big.

[jenbreese]

The cards might need to be left aligned instead of spaced out. This is a set of 5 teasers.

Here is a list of events in a card grid and they have the display I was thinking of.

[jdwjdwjdw]

@jdwjdwjdw I started looking at it. In the phone views, the headings and related topics seem really big.

Thanks Jen! It looks like all of our headings have a fixed rem font-size currently (see

chem_h_subtheme/src/scss/theme/_headings.scss

Line 16 in 67c2d8c

font-size: 5rem;

), so that's why they appear really big on mobile. What do you think we should do - update those heading font-sizes to use one of the decanter type sizes, or just add some additional smaller rem font sizes for smaller breakpoints on all of the headings?

The cards might need to be left aligned instead of spaced out. This is a set of 5 teasers.

Here is a list of events in a card grid and they have the display I was thinking of.

It looks like the difference between the card gaps for lists and teasers is due to lists using CSS Grid, and teasers using Flexbox, which matches what's currently on Stanford Basic (see https://amptesting.sites.stanford.edu/sws-test-922-events-lists-teasers). I'm not sure how much work it would take to change that, but is probably something that should be done on Stanford Basic is we do decide to update that.

[jenbreese]

@jdwjdwjdw I think we update to the Decanter typography.

[jenbreese]

I tried it this morning and the fonts are much better. I agree about the card layout coming from SB instead of just fixing here.