search

cncf / cncf.io

☁️♮🏛🚧 The CNCF.io WordPress website
https://cncf.io
MIT License
84 stars 38 forks source link

Theme.json improvements #626

Closed thetwopct closed 1 year ago

thetwopct commented 1 year ago

This PR utilises more of theme.json and "full site editing" capabilities introduced in WP 6.1, and most importantly resolves #619

https://pr-626-cncfci.pantheonsite.io/

The CSS changes that happened the most included heading color, button gaps, column gaps - I think I caught all the updates required, but please do look out for any issues compared with the current production site.

In the future, I would like to move more styles to block stylesheets, reducing the size of the overall stylesheet, but thats a task for another day.

cjyabraham commented 1 year ago

Small changes compared with live:

  1. The "Join" button in the topnav has less padding and is in a slightly different position
  2. The "About CNCF" button in the homepage hero is lower down
  3. Project stat numbers on homepage are closer together (I don't see this as a problem though)
  4. OUR CHARTER quote on Who We Are page has a thick left border. This shows on other quote blocks as well.
  5. Column spacing on Who We Are page for the OUR CHARTER and USEFUL LINKS section is narrower. This column spacing issue shows up in other parts of the site.
  6. The HR is thicker under the Ambassadors filters (under "Found 129 Ambassadors"). There are other instances of this issue on the site.
  7. The VISIT PROJECT WEBSITE button on a project page has less padding
  8. The "Recent containerd news" heading is no longer aligned with SEE ALL NEWS on the project page
  9. The Silver Member Pricing Scale popup has a table that doesn't go full-width anymore (not sure if that's a problem)
cjyabraham commented 1 year ago

Mobile issues compared with live:

  1. Homepage scrolls left/right since it's too wide
  2. H2 "CNCF projects are the..." and others are too large
  3. Topnav doesn't stay sticky at top of screen on homepage (it's fine on other pages). It disappears and reappears with scroll.
  4. "Join Now" button in footer doesn't span full width on homepage (fine on other pages)
  5. On Who We Are page, READ THE CNCF CHARTER button doesn't wrap text
  6. Who We Are page: metrics count-up numbers are too large
  7. Topnav menu has more left and right padding (though not sure if it's a problem)
  8. H3 on Join page is larger
  9. "Amplify your brand & people..." text on Join page is larger
thetwopct commented 1 year ago

Great, thanks for that.

  1. Updated. The button has 2px more height now, think it looks better than the longer style.
  2. Realigned.
  3. Fixed.
  4. Fixed. Do you know an example of where we use the "Small Quote" style? I need to check that style is working properly
  5. Fixed. But let me know if find outliers.
  6. Fixed.
  7. Seems to be fixed?
  8. Seems to be fixed?
  9. Fixed.
  10. Fixed. related to 11.
  11. Fixed.
  12. Seems to be fixed?
  13. Fixed.
  14. Fixed.
  15. Fixed. Related to 11.
  16. Fixed / Think it might have been a deliberate fix.
  17. I think fixed. Related to 11.
  18. I have changed mobile sizing of "Larger" font size as it was 16px, which didn't differentiate it enough from "Large" font size, also 16px. Now on mobile - Large = 16px, Larger 18px.

The reason for all of these required changes is that the default complete Gutenberg stylesheet does not load on every page anymore, instead when the block is detected on the page (i.e. Columns) the relevant CSS is loaded (i.e. Columns.css). So where we used block markup in our theme code, the relevant block styles were not being detected and enqueued. TLDR: When we use block markup in the theme code, the core blocks code may now need to be enqueued. Something like:

wp_enqueue_style( 'wp-block-columns' );

cjyabraham commented 1 year ago

All seem good except for the following notes:

  1. To your question, small quote style is seen at bottom of CNF page. It looks like the captions are slightly larger, however, it doesn't look bad.
  2. This issue wasn't caused by this PR but might be convenient to address here: I wasn't able to restrict the width of the text in the callout group at the top of the Ambassadors page. Do you need to do something to get that style to have an effect within a group? If you want I can open a separate issue for this.
  3. mobile: the line height of "Transforming leading organizations..." on the homepage is smaller
thetwopct commented 1 year ago

OK great.

  1. I think it looks virtually the same, so that seems to be working. I've moved the styling for the blockquote to theme.json so wanted to make sure the styles were still working.
  2. I've sent you a message about that. With the recent gutenberg changes, I think our previous method of using styles and max-widths is wrong, and we should move away from that to use groups with restricted inner widths.
  3. Made consistent