PR Summary: Consistent Layout and Tutorial Enhancements

[AH-Avalanche]

Overview

This PR implements a new grid-based layout system for documentation content that provides better control over content width and image placement. The system uses CSS Grid to create three distinct layout zones: content, breakout, and full-width.

Changes

• Added a new grid layout system in src/css/custom.css that defines three layout zones:
  • Content zone (680px max-width)
  • Breakout zone (extends beyond content width)
  • Full-width zone (spans entire viewport)

Key Features

1. Responsive Grid Structure

   • Content is centered with a max-width of 680px
   • Breakout areas extend up to 1200px
   • Full-width sections span the entire viewport
   • Maintains consistent padding on both sides

2. Layout Zones

   • .theme-doc-markdown: Main container with grid definition
   • .breakout: For content that needs to extend beyond the main content width
   • .full-width: For elements that should span the entire viewport width

3. Image Handling

   • Images within paragraphs automatically use the breakout zone
   • Full-width images can span the entire viewport with img.full-width class
   • Images maintain aspect ratio with object-fit: cover

Implementation Details

.theme-doc-markdown {
  --padding-inline: 1rem;
  --content-max-width: 680px;
  --breakout-max-width: 1200px;
  /* ... grid definition ... */
}

Testing

Please verify:

1. Content is properly centered with max-width of 680px
2. Images in paragraphs extend into the breakout zone
3. Full-width elements span the entire viewport
4. Layout remains responsive on different screen sizes

Screenshots

[Add screenshots showing the different layout zones in action]

[netlify]

✅ Deploy Preview for snowplow-docs ready!

Name	Link
🔨 Latest commit	ca37b42
🔍 Latest deploy log	https://app.netlify.com/sites/snowplow-docs/deploys/6819fc1aa466b70008f9d528
😎 Deploy Preview	https://deploy-preview-1225--snowplow-docs.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.

[mscwilson]

It's gone all thin!