Skip to content

Instantly share code, notes, and snippets.

@hed0rah

hed0rah/faux_latex.html

Created April 18, 2026 20:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hed0rah/217a1e58c640b3006fe22bdff1186f43 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hed0rah/217a1e58c640b3006fe22bdff1186f43 to your computer and use it in GitHub Desktop.
Download ZIP
LaTeX whitepaper style whitepaper template
Raw
faux_latex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reliability HTML Whitepaper Template</title>
<style>
:root {
--paper: #fcfcfa;
--ink: #151515;
--muted: #64625c;
--line: #d8d5ce;
--row: rgba(0, 0, 0, 0.015);
--soft: rgba(0, 0, 0, 0.012);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
line-height: 1.45;
}
.page {
max-width: 1240px;
margin: 0 auto;
padding: 24px 16px 44px;
}
.sheet {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 26px;
align-items: start;
}
.paper {
min-width: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 20px 0 24px;
}
.eyebrow {
margin: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
h1, h2, h3 {
margin: 0;
font-weight: 600;
line-height: 1.15;
}
h1 {
font-size: clamp(1.9rem, 3vw, 2.45rem);
letter-spacing: -0.02em;
margin-bottom: 6px;
}
h2 {
font-size: 1.05rem;
margin-top: 22px;
margin-bottom: 7px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
h3 {
font-size: 0.92rem;
margin-bottom: 4px;
}
p { margin: 0 0 8px; }
.lede {
max-width: 50rem;
color: #242424;
font-size: 0.95rem;
}
.abstract {
margin: 14px 0 14px;
padding: 9px 10px 7px;
border: 1px solid var(--line);
background: var(--soft);
}
.abstract-grid {
display: grid;
grid-template-columns: 1.5fr 0.85fr;
gap: 14px;
align-items: start;
}
.kicker {
margin: 0 0 4px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.summary {
border-left: 1px solid var(--line);
padding-left: 12px;
font-size: 0.88rem;
}
.stats {
margin: 0;
font-size: 0.88rem;
color: #232323;
}
.hover-note {
color: var(--muted);
font-size: 0.76rem;
margin-top: 6px;
}
.section {
scroll-margin-top: 20px;
}
.grid {
display: grid;
gap: 12px;
}
.grid.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
padding: 10px 10px 8px;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.01);
transition: background-color 120ms ease;
}
.card:hover,
.card.is-active {
background: rgba(0, 0, 0, 0.03);
}
.card p:last-child,
.card ul:last-child,
.section p:last-child {
margin-bottom: 0;
}
ul {
margin: 8px 0 0 18px;
padding: 0;
}
li + li {
margin-top: 4px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 6px;
font-size: 0.84rem;
}
th, td {
text-align: left;
vertical-align: top;
padding: 6px 7px;
border-top: 1px solid var(--line);
}
th {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
tbody tr:nth-child(even) {
background: var(--row);
}
tbody tr {
transition: background-color 120ms ease;
}
tbody tr:hover,
tbody tr.is-active {
background: rgba(0, 0, 0, 0.038);
}
code {
font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
font-size: 0.88em;
background: rgba(217, 215, 209, 0.24);
padding: 0.04rem 0.18rem;
border-radius: 1px;
}
.chip {
display: inline-block;
margin: 0 3px 3px 0;
padding: 0 4px;
border: 1px solid var(--line);
border-radius: 2px;
background: transparent;
font-size: 0.69rem;
letter-spacing: 0.01em;
white-space: nowrap;
}
.quote {
margin-top: 6px;
padding: 10px 10px 8px;
border-left: 1px solid var(--line);
background: rgba(0, 0, 0, 0.012);
font-size: 0.93rem;
color: #252525;
}
.prompt,
.stack {
margin-top: 6px;
padding: 10px 10px 8px;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.014);
font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
font-size: 0.8rem;
line-height: 1.42;
overflow-x: auto;
white-space: pre-wrap;
}
.stack {
white-space: pre;
}
.minute {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--line);
}
.minute:first-of-type {
border-top: none;
padding-top: 0;
}
.minute-num {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.02);
font-size: 1.02rem;
}
.note {
margin-top: 10px;
padding: 9px 10px 8px;
border-left: 1px solid var(--line);
color: #3c392f;
background: rgba(0, 0, 0, 0.012);
font-size: 0.84rem;
}
.margin {
position: sticky;
top: 18px;
border-top: 1px solid var(--line);
padding-top: 10px;
font-size: 0.8rem;
color: var(--muted);
}
.margin-card {
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.012);
padding: 10px 10px 8px;
min-height: 240px;
}
.margin h3 {
font-size: 0.86rem;
margin-bottom: 5px;
}
.margin p {
margin-bottom: 7px;
}
.margin-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
margin: 8px 0 10px;
padding: 8px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: #2d2d2a;
}
.margin-meta strong {
display: block;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2px;
}
.margin-code {
display: inline-block;
margin-top: 2px;
margin-bottom: 8px;
}
.param-list {
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.param-list li {
padding: 6px 0;
border-top: 1px solid rgba(216, 213, 206, 0.7);
}
.param-list li:first-child {
border-top: none;
padding-top: 0;
}
.footer {
margin-top: 18px;
padding-top: 10px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.8rem;
}
@media (max-width: 980px) {
.sheet,
.abstract-grid,
.grid.two,
.grid.three {
grid-template-columns: 1fr;
}
.summary {
border-left: none;
border-top: 1px solid var(--line);
padding-left: 0;
padding-top: 10px;
}
.margin {
position: static;
order: -1;
}
}
@media (max-width: 860px) {
.page {
padding: 16px 12px 28px;
}
.paper {
padding: 16px 0 20px;
}
.minute {
grid-template-columns: 1fr;
}
table, thead, tbody, tr, th, td {
display: block;
}
thead { display: none; }
tr {
border-top: 1px solid var(--line);
padding: 8px 0;
}
td {
border-top: none;
padding: 4px 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="sheet">
<article class="paper">
<p class="eyebrow">Reliability HTML / Whitepaper Template</p>
<h1>Template Showcase</h1>
<p class="lede">
This file is not about any specific project data. It exists to show the house style and the full pattern library:
abstract, cards, comparison tables, quotes, prompt blocks, stack diagrams, timeline sections, and hover-driven
margin notes.
</p>
<section class="abstract note-source" id="abstract" data-note-title="Abstract Block" data-note-body="Use this for the page thesis and the compact right-side summary. It is the best replacement for heavy hero sections or dashboard cards." data-note-points="lead with one paragraph|pair with 3 to 4 quick facts|keep it flat and quiet">
<div class="abstract-grid">
<div>
<p class="kicker">Abstract</p>
<p>
The preferred style is a quiet technical paper, not a marketing page. Start with one paragraph that explains
the document in plain terms, then pair it with a small summary block that gives the reader a few quick anchors.
</p>
</div>
<div class="summary">
<p class="kicker">Summary</p>
<p class="stats"><strong>1</strong> abstract block<br><strong>3</strong> grid modes<br><strong>4+</strong> content patterns<br><strong>1</strong> hover margin system</p>
</div>
</div>
<p class="hover-note">Hover sections, cards, rows, and timeline items to see how the margin note updates.</p>
</section>
<section class="section note-source" id="cards" data-note-title="Card Grid" data-note-body="Card grids are the main replacement for decorated feature panels. Use them for short concept blocks, comparisons, or grouped claims." data-note-points="prefer 2 or 3 columns|keep each card tight|avoid stacking too much prose in one card">
<h2>Card Patterns</h2>
<div class="grid three">
<div class="card note-source" data-note-title="Short Feature Card" data-note-body="A short card works best when it says one thing well." data-note-points="one heading|one paragraph|optional chips">
<h3>Short Feature Card</h3>
<p>This is the default compact card. Good for one point, one constraint, or one feature statement.</p>
<p><span class="chip">compact</span><span class="chip">plain</span><span class="chip">scan-friendly</span></p>
</div>
<div class="card note-source" data-note-title="List Card" data-note-body="List cards work well when the content is inherently list-shaped and you want a little more structure without a full table." data-note-points="good for built vs planned|good for controls|good for requirements">
<h3>List Card</h3>
<ul>
<li>simple bullets still work</li>
<li>keep them flat</li>
<li>do not turn every idea into a taxonomy</li>
</ul>
</div>
<div class="card note-source" data-note-title="Quote-Adjacent Card" data-note-body="Use cards near a quote or note block to frame interpretation, caveats, or contrast." data-note-points="good companion to quote blocks|good for honest framing">
<h3>Quote-Adjacent Card</h3>
<p>This is useful when you want one nearby block to give the reader a little interpretation or grounding.</p>
</div>
</div>
</section>
<section class="section note-source" id="table" data-note-title="Comparison Table" data-note-body="Tables are still useful when there are true columns. The row striping should stay very light." data-note-points="use for layers, shapes, states, or contracts|avoid giant dense matrices unless necessary">
<h2>Comparison Table</h2>
<table>
<thead>
<tr>
<th>Pattern</th>
<th>Best For</th>
<th>Risk If Overused</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr class="note-source" data-note-title="Abstract Block Row" data-note-body="Abstract blocks are best for thesis and summary, not deep feature inventory." data-note-points="top of page|short and clear|avoid too many nested facts">
<td>abstract block</td>
<td>document thesis and quick anchors</td>
<td>turning it into a hero dashboard</td>
<td>keep it compact</td>
</tr>
<tr class="note-source" data-note-title="Card Row" data-note-body="Cards are strong for grouped ideas but weak for very columnar facts." data-note-points="good for grouped statements|not ideal for strict matrix data">
<td>card grid</td>
<td>grouped claims, features, and comparisons</td>
<td>too much prose in each card</td>
<td>keep each card tight</td>
</tr>
<tr class="note-source" data-note-title="Table Row" data-note-body="Tables are best when there are true columns and real comparison value." data-note-points="layer comparisons|shape comparisons|contracts and controls">
<td>table</td>
<td>side-by-side structured comparison</td>
<td>dense unreadable matrix sprawl</td>
<td>stripe lightly only</td>
</tr>
</tbody>
</table>
</section>
<section class="section note-source" id="quote" data-note-title="Quote And Note Blocks" data-note-body="Quote-style blocks work for the one line you want repeated, while note blocks work for caveats and honest framing." data-note-points="quote for the memorable line|note for the qualifier or caveat">
<h2>Quote And Note</h2>
<div class="quote">
This is the memorable line block. Use it when the page has one sentence you want someone to repeat after reading.
</div>
<div class="note">
This is the quieter note block. Use it for caveats, constraints, or honest framing that should be visible but not loud.
</div>
</section>
<section class="section note-source" id="prompt" data-note-title="Prompt And Code Blocks" data-note-body="Prompt blocks and stack diagrams use the same low-key code treatment. The difference is whether the content reads as instructions or structure." data-note-points="prompt for commands or asks|stack for architecture or flow">
<h2>Prompt And Stack</h2>
<div class="prompt">Run <code>some_tool</code> with a small safe parameter set and summarize the result in one short paragraph.</div>
<div class="stack">user
|
v
tool call
|
v
service logic
|
v
output summary</div>
</section>
<section class="section note-source" id="timeline" data-note-title="Timeline Pattern" data-note-body="The minute block is useful for demos, rollout steps, walkthroughs, or incident timelines." data-note-points="works for 3 to 7 steps|number block keeps scan rhythm|pair each step with one short paragraph">
<h2>Timeline / Flow</h2>
<div class="minute note-source" data-note-title="Step One" data-note-body="The first step usually sets the frame and defines the thing being shown." data-note-points="start with the mental model|avoid jumping into mechanics too early">
<div class="minute-num">1</div>
<div>
<h3>Frame The Topic</h3>
<p>Use the first step to explain what the reader or audience should think this thing is.</p>
</div>
</div>
<div class="minute note-source" data-note-title="Step Two" data-note-body="The second step usually proves the thing is real or configured." data-note-points="health, readiness, or setup proof">
<div class="minute-num">2</div>
<div>
<h3>Prove It Is Real</h3>
<p>Then show one concrete proof point before moving into feature examples or workflows.</p>
</div>
</div>
<div class="minute note-source" data-note-title="Step Three" data-note-body="The final step usually lands the value and closes honestly." data-note-points="immediate value|broader value|no overclaiming">
<div class="minute-num">3</div>
<div>
<h3>Land The Point</h3>
<p>Close with the smallest honest statement that explains why the thing matters.</p>
</div>
</div>
</section>
<section class="section note-source" id="mixed" data-note-title="Mixed Layout" data-note-body="Most real pages mix several of these patterns. The main rule is to stay restrained and let the content hierarchy do the work." data-note-points="abstract + cards + table is common|timeline is optional|margin notes are additive, not mandatory">
<h2>Mixed Layout Example</h2>
<div class="grid two">
<div class="card note-source" data-note-title="Left Mixed Card" data-note-body="This shows how cards can sit beside a prompt or quote without needing heavy design separation." data-note-points="simple border|simple spacing|no big shadows">
<h3>Left Card</h3>
<p>Use cards beside other block types when you want a little contrast without turning the page into a product landing page.</p>
</div>
<div>
<div class="prompt">Run the shortest possible safe example that proves the capability.</div>
<div class="quote">Keep the visual language quiet enough that the document still feels like a technical note.</div>
</div>
</div>
</section>
<div class="footer">
Template guidance: start with the abstract, choose only the section patterns you need, keep the typography quiet,
and use the margin note system only when it genuinely adds reader value.
</div>
</article>
<aside class="margin">
<div class="margin-card">
<p class="kicker">Template Notes</p>
<h3 id="margin-title">Pattern Note</h3>
<code class="margin-code" id="margin-code">hover a block</code>
<p id="margin-body">This right margin is the optional annotation channel. It lets the main page stay stripped down while still carrying extra guidance.</p>
<div class="margin-meta">
<div><strong>Mode</strong><span>whitepaper</span></div>
<div><strong>Tone</strong><span>quiet, technical</span></div>
<div><strong>Use</strong><span>local notes or technical docs</span></div>
<div><strong>Rule</strong><span>style should never overpower structure</span></div>
</div>
<ul class="param-list" id="margin-points">
<li>Hover any section, card, row, or timeline item to preview how the marginalia system works.</li>
</ul>
</div>
</aside>
</div>
</div>
<script>
(() => {
const sources = Array.from(document.querySelectorAll(".note-source"));
const panel = {
title: document.getElementById("margin-title"),
code: document.getElementById("margin-code"),
body: document.getElementById("margin-body"),
points: document.getElementById("margin-points"),
};
let active = null;
const render = (node) => {
if (!node) return;
const title = node.dataset.noteTitle || "Pattern Note";
const body = node.dataset.noteBody || "";
const points = (node.dataset.notePoints || "")
.split("|")
.map((item) => item.trim())
.filter(Boolean);
if (active) active.classList.remove("is-active");
active = (node.classList.contains("card") || node.classList.contains("minute") || node.tagName === "TR") ? node : null;
if (active) active.classList.add("is-active");
panel.title.textContent = title;
panel.code.textContent = node.id ? `#${node.id}` : node.tagName.toLowerCase();
panel.body.textContent = body;
panel.points.innerHTML = points.length
? points.map((item) => `<li>${item}</li>`).join("")
: "<li>No additional note.</li>";
};
sources.forEach((node) => {
node.addEventListener("mouseenter", () => render(node));
node.addEventListener("focusin", () => render(node));
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment