Handle markdown images in options-grid

satya164 · satya164 · commit ea323d05b1a9 · 2026-03-17T13:09:54.000+01:00
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1198,14 +1198,19 @@ code {
   }
 
   li {
-    & > img {
+    & > img,
+    & > p:has(> img) > img {
       display: block;
       margin: 0;
       border-radius: var(--ifm-global-radius);
       width: 100%;
       height: auto;
     }
 
+    & > p {
+      margin: 0;
+    }
+
     & > .video-player {
       margin: 0;
       border-radius: var(--ifm-global-radius) !important;
@@ -1218,16 +1223,17 @@ code {
       }
     }
 
-    & > p:first-of-type {
+    & > p:not(:has(> img)):first-of-type,
+    & > p:has(> img) + p {
       font-weight: 700;
-      margin: calc(var(--ifm-spacing-vertical) / 2) 0 0;
+      margin-top: calc(var(--ifm-spacing-vertical) / 2);
     }
 
-    & > p + p {
-      margin: calc(var(--ifm-spacing-vertical) / 4) 0 0;
+    & > p:not(:has(> img)) + p:not(:has(> img)) {
+      margin-top: calc(var(--ifm-spacing-vertical) / 4);
     }
 
-    & > p:last-of-type {
+    & > p:last-of-type:not(:has(> img)) {
       margin-bottom: var(--ifm-spacing-vertical);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1198,14 +1198,19 @@ code {`
`1198`	`1198`	`}`
`1199`	`1199`
`1200`	`1200`	`li {`
`1201`		`- & > img {`
	`1201`	`+ & > img,`
	`1202`	`+ & > p:has(> img) > img {`
`1202`	`1203`	`display: block;`
`1203`	`1204`	`margin: 0;`
`1204`	`1205`	`border-radius: var(--ifm-global-radius);`
`1205`	`1206`	`width: 100%;`
`1206`	`1207`	`height: auto;`
`1207`	`1208`	`}`
`1208`	`1209`
	`1210`	`+ & > p {`
	`1211`	`+ margin: 0;`
	`1212`	`+ }`
	`1213`	`+`
`1209`	`1214`	`& > .video-player {`
`1210`	`1215`	`margin: 0;`
`1211`	`1216`	`border-radius: var(--ifm-global-radius) !important;`
`@@ -1218,16 +1223,17 @@ code {`
`1218`	`1223`	`}`
`1219`	`1224`	`}`
`1220`	`1225`
`1221`		`- & > p:first-of-type {`
	`1226`	`+ & > p:not(:has(> img)):first-of-type,`
	`1227`	`+ & > p:has(> img) + p {`
`1222`	`1228`	`font-weight: 700;`
`1223`		`- margin: calc(var(--ifm-spacing-vertical) / 2) 0 0;`
	`1229`	`+ margin-top: calc(var(--ifm-spacing-vertical) / 2);`
`1224`	`1230`	`}`
`1225`	`1231`
`1226`		`- & > p + p {`
`1227`		`- margin: calc(var(--ifm-spacing-vertical) / 4) 0 0;`
	`1232`	`+ & > p:not(:has(> img)) + p:not(:has(> img)) {`
	`1233`	`+ margin-top: calc(var(--ifm-spacing-vertical) / 4);`
`1228`	`1234`	`}`
`1229`	`1235`
`1230`		`- & > p:last-of-type {`
	`1236`	`+ & > p:last-of-type:not(:has(> img)) {`
`1231`	`1237`	`margin-bottom: var(--ifm-spacing-vertical);`
`1232`	`1238`	`}`
`1233`	`1239`	`}`