tinqs/animation
5
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity Issues

docs(humans): ship the MD explainer as a PDF with the images baked in

Browse Source 
The HTML references screenshots relatively, so it only renders inside a
checkout -- mailing the file on its own gives broken images. The PDF is one
self-contained file, which is what actually gets sent to Ozlem.

- tools/humans_to_pdf.py: renders .humans/*.html via headless Chrome (or
  Edge), so the output is what the browser shows. HTML stays the source.
- @media print block on the page: the wide tables and the pipeline diagram
  scroll on screen but would be cut off at the paper edge; this reflows
  them and keeps figures, callouts and table rows off page breaks.
  Verified at A4 content width -- 6 pages, both screenshots embedded.
- *.pdf -> LFS. Each regeneration is a whole new ~2 MB blob, and unlike
  png/jpg there are no PDFs tracked raw yet, so there is no history to
  rewrite by adding it now.

Also corrects working-files.md: it claimed .gitattributes does not LFS-track
.blend, which was true when written and is no longer -- .blend/.zprj/.obj/
.npy/.npz have since been added. The note now covers what is actually still
excluded (png/jpg, deliberately) and why that makes QA renders scratch.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Jeremy
2026-08-07 09:31:37 -07:00
parent 3ba86b2ea8
commit 4bbd1a1732
6 changed files with 157 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.humans/marvelous-designer.html
+30
View File
@@ -114,6 +114,36 @@
.callout p:last-child { margin-bottom: 0; }
.meta { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1.2rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 0; }
/* PDF export — `python tools/humans_to_pdf.py` drives headless Chrome.
Screen rules scroll wide content; on paper it would simply be cut off. */
@media print {
@page { size: A4; margin: 12mm; }
html, body {
background: #0b1113 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body { padding: 0; font-size: 10pt; line-height: 1.5; }
h1 { font-size: 26pt; margin-bottom: .6rem; }
h2 { font-size: 13pt; margin: 20pt 0 6pt; }
h3 { font-size: 10.5pt; margin: 12pt 0 4pt; }
p, li { max-width: none; }
a { text-decoration: none; }
/* Wide content is scrollable on screen; on paper it must reflow. */
.wrap { overflow: visible; }
table { min-width: 0; font-size: 8.5pt; }
th, td { padding: .5rem .7rem; }
.flow { padding: .8rem 1rem; overflow: visible; }
.flow pre { font-size: 7pt; line-height: 1.5; }
/* Never split a figure, table row, callout or diagram across a page. */
figure, .callout, .flow, .wrap, tr { break-inside: avoid; page-break-inside: avoid; }
h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
figure img { max-height: 16cm; width: auto; margin: 0 auto; }
figcaption { font-size: 8.5pt; }
.shots { display: block; }
.meta { margin-top: 20pt; font-size: 8pt; }
}
</style>
</head>
<body>
Before
After