Skip to content

Commit a331af8

Browse files
mhw-at-ygmhw-at-yg
committed
Restore faux rendered docs preview
Render the markdown-only homepage sample as a faux mdo output window over the desktop image using Markdown content and CSS selectors, preserving the no raw HTML/no iframe dogfood constraint. _codex-unknown-model- on behalf of Matt Wilkie_
1 parent bfea3fe commit a331af8

3 files changed

Lines changed: 376 additions & 2 deletions

File tree

‎docs/assets/site.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1219,6 +1219,21 @@ body:has(> footer.mdo-generated) > main img {
12191219
box-shadow: 0 18px 50px rgba(28, 36, 40, 0.12);
12201220
}
12211221

1222+
body:has(> footer.mdo-generated)
1223+
> main
1224+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"]) {
1225+
position: relative;
1226+
margin: 32px 0 0;
1227+
}
1228+
1229+
body:has(> footer.mdo-generated)
1230+
> main
1231+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1232+
img {
1233+
min-height: 440px;
1234+
object-position: center top;
1235+
}
1236+
12221237
body:has(> footer.mdo-generated) > main > blockquote {
12231238
margin: 24px 0 0;
12241239
border-color: var(--accent);
@@ -1227,6 +1242,140 @@ body:has(> footer.mdo-generated) > main > blockquote {
12271242
color: var(--text);
12281243
}
12291244

1245+
body:has(> footer.mdo-generated)
1246+
> main
1247+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1248+
+ blockquote {
1249+
position: relative;
1250+
z-index: 1;
1251+
width: min(430px, 52%);
1252+
min-height: 360px;
1253+
max-height: 390px;
1254+
margin: -460px 0 88px clamp(24px, 36%, 430px);
1255+
padding: 0 1.25rem 1.25rem;
1256+
overflow: hidden;
1257+
border: 1px solid rgba(213, 225, 232, 0.92);
1258+
border-radius: 8px;
1259+
background: #fff;
1260+
box-shadow: 0 16px 36px rgba(7, 18, 24, 0.3);
1261+
color: #161d22;
1262+
font-style: normal;
1263+
}
1264+
1265+
body:has(> footer.mdo-generated)
1266+
> main
1267+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1268+
+ blockquote::after {
1269+
content: "";
1270+
position: absolute;
1271+
top: 74px;
1272+
right: 6px;
1273+
width: 4px;
1274+
height: 132px;
1275+
border-radius: 999px;
1276+
background: rgba(37, 48, 55, 0.38);
1277+
}
1278+
1279+
body:has(> footer.mdo-generated)
1280+
> main
1281+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1282+
+ blockquote
1283+
> p:first-child {
1284+
position: relative;
1285+
display: flex;
1286+
min-height: 48px;
1287+
align-items: center;
1288+
margin: 0 -1.25rem 1.35rem;
1289+
padding: 0 7.8rem 0 1.1rem;
1290+
border-bottom: 1px solid #d9dde0;
1291+
background: #edf1f3;
1292+
color: #5c666b;
1293+
font-size: 0.92rem;
1294+
line-height: 1.2;
1295+
}
1296+
1297+
body:has(> footer.mdo-generated)
1298+
> main
1299+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1300+
+ blockquote
1301+
> p:first-child::after {
1302+
content: "− □ ×";
1303+
position: absolute;
1304+
top: 0;
1305+
right: 0;
1306+
display: grid;
1307+
width: 8rem;
1308+
height: 100%;
1309+
place-items: center;
1310+
border-left: 1px solid rgba(139, 154, 162, 0.22);
1311+
color: #66757d;
1312+
font-size: 1.25rem;
1313+
letter-spacing: 0.42rem;
1314+
white-space: pre;
1315+
}
1316+
1317+
body:has(> footer.mdo-generated)
1318+
> main
1319+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1320+
+ blockquote
1321+
> :not(p:first-child) {
1322+
max-width: none;
1323+
}
1324+
1325+
body:has(> footer.mdo-generated)
1326+
> main
1327+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1328+
+ blockquote
1329+
h1 {
1330+
margin: 0 0 1.2rem;
1331+
color: #101820;
1332+
font-size: clamp(2rem, 5vw, 3rem);
1333+
line-height: 1.12;
1334+
}
1335+
1336+
body:has(> footer.mdo-generated)
1337+
> main
1338+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1339+
+ blockquote
1340+
h2 {
1341+
margin: 2rem 0 1rem;
1342+
color: #101820;
1343+
font-size: clamp(1.5rem, 3.5vw, 2.1rem);
1344+
}
1345+
1346+
body:has(> footer.mdo-generated)
1347+
> main
1348+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1349+
+ blockquote
1350+
p,
1351+
body:has(> footer.mdo-generated)
1352+
> main
1353+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1354+
+ blockquote
1355+
li {
1356+
color: #101820;
1357+
font-size: 0.98rem;
1358+
line-height: 1.45;
1359+
}
1360+
1361+
body:has(> footer.mdo-generated)
1362+
> main
1363+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1364+
+ blockquote
1365+
table {
1366+
width: 100%;
1367+
font-size: 0.82rem;
1368+
}
1369+
1370+
body:has(> footer.mdo-generated)
1371+
> main
1372+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1373+
+ blockquote
1374+
> p:last-child {
1375+
margin-top: 1rem;
1376+
font-size: 0.88rem;
1377+
}
1378+
12301379
body:has(> footer.mdo-generated) > main > h2 {
12311380
margin-top: 3rem;
12321381
padding-top: 2.4rem;
@@ -1258,3 +1407,22 @@ body:has(> footer.mdo-generated) > main :not(pre) > code {
12581407
padding: 0.12em 0.36em;
12591408
font-size: 0.95em;
12601409
}
1410+
1411+
@media (max-width: 760px) {
1412+
body:has(> footer.mdo-generated)
1413+
> main
1414+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1415+
img {
1416+
min-height: 390px;
1417+
}
1418+
1419+
body:has(> footer.mdo-generated)
1420+
> main
1421+
> p:has(> img[src$="mammoth-bluefinhero-1024x695.jpg"])
1422+
+ blockquote {
1423+
width: calc(100% - 28px);
1424+
min-height: 300px;
1425+
max-height: 320px;
1426+
margin: -360px 14px 72px;
1427+
}
1428+
}

0 commit comments

Comments
 (0)