search

ColbyCommunications / colby-college-theme

Theme for redesigned colby.edu site
MIT License
0 stars 0 forks source link

People profiles: spacing and elements #41

Closed bwaltz closed 2 years ago

bwaltz commented 2 years ago

Looks like in the bios on the people profile pages, <h2> elements don't have spacing and lists are unstyled.

Screen Shot 2022-11-09 at 11 53 40 AM

For example, see "Areas of Expertise" on this page: https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/people/people-directory/sandy-maisel/

bwaltz commented 2 years ago

@gregoryspragginsjr noticed that links aren't formatted either. Basically we just need to support the elements that come from these buttons in our gravity form:

Screen Shot 2022-11-09 at 12 44 53 PM

gregoryspragginsjr commented 2 years ago

@bwaltz Hey Brandon, my latest commit at https://github.com/ColbyCommunications/colby-college-theme/commit/ffdc51e6a51fc7fd1b7fc1d1fa30d1f055e98830 should help remedy most of these visual anomalies. Specifically, I have expanded the wysiwyg styles to support:

  1. h2 - h6
  2. ul and ol with nested links
  3. hr

Please bare in mind, within the Gutenberg editor, specifically with your imported content, you must wrap these elements within proper semantic tags not only for the sake of styling, but also for semantic purposes regarding SEO. I'm noticing a lot of loose text (paragraphs not wrapped in a <p> tag) floating around that naturally will not inherit proper styling or spacing because there is no way for the css to identify them. For example, publication sections within these bios: https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/people/people-directory/marta-ameri/

There are <b> tags in there, but those are semantically incorrect without a corresponding <p> or <li> wrapping them. Im not sure if this is something you were intending to have your freelancers rectify, but I figured I'd bring it to your attention.

Additionally, for the sake of single People pages, I've loosened specificity to target all tags and not just direct children because you made the call a few weeks ago to change content entry within these from the Gutenberg editor to the classic editor. For our purposes here, that means that for these page types, we'll never see wysiwyg content living alongside independent components, so we can be a little more cavalier with styling elements without worrying about these styles in-advertly being applied where they don't belong.

Let me know how this works for you, and close this ticket when ready.