Misc website updates

[jasongao97]

• Add chapter opening figure with quote, resolve Incorporate Chapter Openings #940
• Keep the lighter theme color for decoration purpose, e.g. border / icon
• Add anchor links for thumbnails and titles on the examples page
• Add meta description for search engine optimization, which also improves the appearance when shared on social media, Social Sharing Preview Image + Title #938

[netlify]

✅ Deploy Preview for nature-of-code-2nd-edition ready!

Name	Link
🔨 Latest commit	e32bb47
🔍 Latest deploy log	https://app.netlify.com/sites/nature-of-code-2nd-edition/deploys/662819cbe7dead000854988b
😎 Deploy Preview	https://deploy-preview-941--nature-of-code-2nd-edition.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for nature-of-code-pdf ready!

Name	Link
🔨 Latest commit	e32bb47
🔍 Latest deploy log	https://app.netlify.com/sites/nature-of-code-pdf/deploys/662819cba4ccf500080f200d
😎 Deploy Preview	https://deploy-preview-941--nature-of-code-pdf.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shiffman]

This is looking great! For the chapter openings, I would suggest the following:

• smaller font for the title/caption, also tighter fit right below the image
• paragraph should also be smaller, maybe italicized?

Overall, I would like these openings to feel like they are something different, rather than the start of the written text of the chapter. The image can be emphasized but the caption and description should be minimized.

@tuantinghuang feel free to offer any thoughts!

[jasongao97]

Chapter opening styles update!

[tuantinghuang]

This looks good! I was just comparing this to our Figma file, and some things that I notice -

• chapter title: is it currently heavy or black? Maybe we can make it one font weight lighter? are we also using period instead of colon? eg. "Chapter 6: Physics Libraries" or "Chapter 6. Physics Libraries"
• quote: font size can be as small as the image caption title, and smaller line spacing
• image caption title: maybe also one font weight lighter?
• image caption: I might also want to make the line spacing of the caption tiny bit smaller, but looks great as is right now too!

Attaching images to compare

Figma

Website

@jasongao97 I can also help editing the css code, let me know if you would prefer that! Thank you!

[jasongao97]

chapter title: is it currently heavy or black? Maybe we can make it one font weight lighter? are we also using period instead of colon? eg. "Chapter 6: Physics Libraries" or "Chapter 6. Physics Libraries"

The font weight was 800, and I've adjusted it to 700. I also replaced the period with a colon.

quote: font size can be as small as the image caption title, and smaller line spacing

I've reduced the font size and adjusted the line spacing. Could you assist on the CSS part? I'm unsure if the current number is appropriate, and also the spacing between the quote and the author's name?

image caption title: maybe also one font weight lighter?

Done!

image caption: I might also want to make the line spacing of the caption tiny bit smaller, but looks great as is right now too!

I've slightly reduced the line spacing.

[shiffman]

There are some small open items in the discussion above (for example, font size / spacing for quotes), but I think it makes sense to merge this so we can review the production site during our meeting and file new issues for additional work.