PR Summary: Consistent Layout and Tutorial Enhancements

docs/introduction.md

@@ -12,13 +12,17 @@ Welcome to Snowplow, the leader in next-generation customer data infrastructure
 
 Thousands of organizations like Burberry, Strava, and Auto Trader rely on Snowplow to collect, manage, and operationalize real-time event data from their central data platform to uncover deeper customer journey insights, predict customer behaviors, deliver differentiated customer experiences, and detect fraudulent activities.
 
-![diagram of snowplow architecture](@site/static/img/snowplow-cdi.png)
+<img 
+  src="/img/snowplow-cdi.png" 
+  alt="diagram of snowplow architecture" 
+  className="breakout"
+/>
 
 ### Why Next-Gen CDI?​
 
 Snowplow is built from the ground up to not only lay the foundation for an organization's advanced analytics use cases, but to also power machine learning and AI use cases, including those powered by generative AI.
 
-Key benefits of Snowplow’s Next-Gen CDI:
+Key benefits of Snowplow's Next-Gen CDI:
 * Data depth and quality
 * Centralized data governance
 * Real-time operationalization
@@ -27,7 +31,7 @@ Key benefits of Snowplow’s Next-Gen CDI:
 
 ### Why Snowplow?
 
-* “Glass-box” technical architecture capable of processing billions of events per day
+* "Glass-box" technical architecture capable of processing billions of events per day
 * **Over [20 SDKs](/docs/sources/trackers/index.md)** to collect data from web, mobile, server-side, and other sources
 * A unique approach based on **[schemas and validation](/docs/fundamentals/schemas/index.md)** ensures your data is as clean as possible
 * **Over [15 enrichments](/docs/pipeline/enrichments/available-enrichments/index.md)** to get the most out of your data

src/css/custom.css

@@ -589,3 +589,57 @@ Controls the display of navbar/sidebar items
   grid-gap: 20px;
   padding: 20px;
 }
+
+/*START doc markdown grid layout control */
+.theme-doc-markdown {
+  --padding-inline: 1rem;
+  --content-max-width: 680px;
+  --breakout-max-width: 1200px;
+
+  --breakout-size: calc(
+    (var(--breakout-max-width) - var(--content-max-width)) / 2
+  );
+
+  display: grid;
+  grid-template-columns:
+    [full-width-start] minmax(var(--padding-inline), 1fr)
+    [breakout-start] minmax(0, var(--breakout-size))
+    [content-start] min(
+      100% - (var(--padding-inline) * 2),
+      var(--content-max-width)
+    )
+    [content-end]
+    minmax(0, var(--breakout-size)) [breakout-end]
+    minmax(var(--padding-inline), 1fr) [full-width-end];
+}
+
+.theme-doc-markdown  > :not(.breakout, .full-width, .MuiBox-root ),
+.full-width > :not(.breakout, .full-width, .MuiBox-root) {
+  grid-column: content;
+}
+
+.theme-doc-markdown > .breakout, .theme-doc-markdown p img {
+  grid-column: breakout;
+
+
+}
+
+.theme-doc-markdown  > .full-width  {
+  grid-column: full-width;
+
+  display: grid;
+  grid-template-columns: inherit;
+}
+img.full-width {
+  width: 100%;
+  max-height: 100vh;
+  object-fit: cover;
+}
+
+/*Control rest of the elements erase after we upgrade */
+.docItemContainer_src-theme-DocItem-Layout-styles-module nav, .docItemContainer_src-theme-DocItem-Layout-styles-module article nav, .docItemContainer_src-theme-DocItem-Layout-styles-module article footer  {
+  max-width: 680px;
+  margin: 3rem auto 0 auto;
+}
+
+/* doc markdown grid layout control END*/

src/theme/DocCardList/index.js

@@ -24,7 +24,7 @@ export default function DocCardList(props) {
         // changed part:
         // * add the item class to the card
         // * propagate description for categories
-        <article key={index} className={`col col--6 margin-bottom--lg ${item.className || ''}`}>
+        <article key={index} className={`col col--6 ${item.className || ''}`}>
           <DocCard item={{...item, description: item.description || item.customProps?.description}} />
         </article>
       ))}