← back to Paul Conrad Cartoons Rebrand
public/index.html
119 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inkwell — Editorial Cartoon Archive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="topnav" id="topnav">
<div class="topnav-row1">
<button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">☰</button>
<a class="wordmark" href="#" id="wordmark" data-section="all">
Inkwell <span>Editorial Cartoon Archive</span>
</a>
<div class="topnav-search">
<input id="search" type="search" placeholder="Search title, subject, date…">
</div>
</div>
<div class="topnav-row2" id="topnav-row2">
<div class="section-links" id="section-links">
<a class="nav-anchor" href="#p24">P24 Art</a>
<button type="button" data-section="all" class="active">Research records</button>
<button type="button" data-section="pulitzers">Pulitzers</button>
<button type="button" data-section="loc">Library of Congress</button>
<button type="button" data-section="archives">Archives</button>
<button type="button" data-section="bio">Bio</button>
</div>
<div class="decade-jump" id="decade-jump">
<span class="decade-label">Jump to decade:</span>
<button type="button" data-decade="1950">50s</button>
<button type="button" data-decade="1960">60s</button>
<button type="button" data-decade="1970">70s</button>
<button type="button" data-decade="1980">80s</button>
<button type="button" data-decade="1990">90s</button>
<button type="button" data-decade="2000">00s</button>
</div>
</div>
<div class="topic-row" id="topic-row"></div>
</nav>
<div class="masthead-sub">Private archive · editorial-cartoon research records · local reference tool, not published</div>
<section class="p24" id="p24" aria-labelledby="p24-heading">
<div class="p24-head">
<h2 id="p24-heading">P24 Art <span>original photos & cartoons</span></h2>
</div>
<div class="controls p24-controls">
<div class="p24-filter" id="p24-filter" role="group" aria-label="Filter by type">
<button type="button" data-type="all">All</button>
<button type="button" data-type="photo">Photos</button>
<button type="button" data-type="cartoon">Cartoons</button>
</div>
<div>
<label for="p24-sort">Sort</label>
<select id="p24-sort">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="title-az">Title A→Z</option>
<option value="type">Type</option>
</select>
</div>
<div class="density-wrap">
<label for="p24-density">Density</label>
<input type="range" id="p24-density" min="140" max="440" step="10">
</div>
<div class="result-count" id="p24-count"></div>
</div>
<div class="grid-wrap">
<div class="grid p24-grid" id="p24-grid"></div>
</div>
</section>
<h2 class="section-heading">Research records <span>text-only; images never displayed</span></h2>
<div class="layout">
<aside class="filters">
<details class="filter-group" id="facet-award" open></details>
<details class="filter-group" id="facet-recordtype" open></details>
<details class="filter-group" id="facet-publication"></details>
<details class="filter-group" id="facet-year"></details>
<details class="filter-group" id="facet-subject"></details>
<button class="clear-filters" id="clear-filters">Clear all filters</button>
</aside>
<main>
<div class="controls">
<div>
<label for="sort">Sort</label>
<select id="sort">
<option value="year-asc">Year ↑ (oldest first)</option>
<option value="year-desc">Year ↓ (newest first)</option>
<option value="title-az">Title A→Z</option>
<option value="topic-az">Topic A→Z</option>
<option value="award-first">Award winners first</option>
<option value="newest">Dataset order</option>
</select>
</div>
<div class="density-wrap">
<label for="density">Density</label>
<input type="range" id="density" min="150" max="340" step="10">
</div>
<div class="result-count" id="result-count"></div>
</div>
<div class="grid-wrap">
<div class="grid" id="grid"></div>
</div>
</main>
</div>
<div class="modal-backdrop" id="modal-backdrop">
<div class="modal" id="modal-body"></div>
</div>
<script src="app.js"></script>
<script src="p24.js"></script>
</body>
</html>