← back to Crazy News Channel Shadowman
cartoons/reference/index.html
60 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style Reference: Classic Editorial Ink — P24 Political Cartoon Desk</title>
<meta name="description" content="The style reference the P24 Political Cartoon Desk draws on: the classic high-contrast, single-panel brush-and-ink editorial-cartoon tradition. Devices, creed, and craft notes — no named individual, no reproduced works." />
<link rel="stylesheet" href="../../assets/style.css" />
</head>
<body data-mood="all" class="cartoon-page-reference">
<header class="ref-chrome">
<span class="logo-badge" aria-hidden="true">P24</span>
<h1>Style Reference: Classic Editorial Ink</h1>
<a class="home" href="../index.html">← Cartoon Desk</a>
</header>
<main>
<p class="lede" id="who"></p>
<p class="creed" id="creed"></p>
<section aria-labelledby="style-h">
<h2 id="style-h">The classic editorial-ink manner — how the Desk draws in this style</h2>
<dl class="style-grid" id="styleGrid"></dl>
</section>
<section aria-labelledby="devices-h">
<h2 id="devices-h">Device toolbox</h2>
<ul class="devices" id="devices"></ul>
</section>
<section aria-labelledby="brief-h">
<h2 id="brief-h">Drawing brief — applying it to a P24 story</h2>
<ol class="brief" id="brief"></ol>
</section>
</main>
<footer>Reference for the P24 Political Cartoon Desk. All P24 strips are original invented satire drawn in the classic editorial-ink manner — not reproductions of any real artist's work. Part of PANDEMONIUM-24.</footer>
<script src="editorial-ink-reference.js"></script>
<script>
(function(){
const R = window.P24_EDITORIAL_INK_REFERENCE;
if (!R) { document.getElementById('who').textContent = 'Reference data failed to load.'; return; }
const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
document.getElementById('who').innerHTML =
'<strong>' + esc(R.tradition.name) + '</strong> (' + esc(R.tradition.era) + '). ' + esc(R.tradition.who);
document.getElementById('creed').textContent = '“' + R.tradition.creed + '”';
const sg = document.getElementById('styleGrid');
const styleOrder = [['line','Line'],['composition','Composition'],['caricature','Caricature'],['caption','Caption'],['palette','Palette in P24'],['device','Core device']];
sg.innerHTML = styleOrder.map(([k,label]) => R.style[k] ? '<dt>' + esc(label) + '</dt><dd>' + esc(R.style[k]) + '</dd>' : '').join('');
document.getElementById('devices').innerHTML = R.devices.map(d =>
'<li><span class="dev-name">' + esc(d.name) + '</span> — ' + esc(d.gist) + '</li>').join('');
document.getElementById('brief').innerHTML = R.brief.map(b => '<li>' + esc(b) + '</li>').join('');
})();
</script>
</body>
</html>