Strony Średni
News — Literary Journal / Review Landing
A quiet, text-first landing page for The Marginalia Review, a fictional quarterly of letters, built in a bone-and-ink palette with a muted teal accent and book-serif display type. A restrained masthead gives way to a lead essay with a drop cap, a justified two-column body that expands and collapses on a smooth height transition, and a pull quote between the columns. A genre-filtered contents list, a contributor spotlight, and a dark subscribe-and-submit colophon round it out, all in vanilla JS.
Otwórz w Lab
MCP
html css vanilla-js
Targety: JS HTML
Kod
:root {
/* Literary Journal palette override */
--bone: #efe7d6;
--paper: #f7f2e6;
--white: #ffffff;
--ink: #1a1714;
--ink-2: #2c2823;
--ink-3: #4c463d;
--muted: #7c7466;
--teal: #2f6f6a;
--teal-d: #245854;
--teal-50: #d9e6e4;
--rule: rgba(26, 23, 20, 0.18);
--rule-2: rgba(26, 23, 20, 0.32);
--rule-hair: rgba(26, 23, 20, 0.10);
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--maxw: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bone);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 56px);
}
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-d); }
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--ink);
color: var(--paper);
padding: 10px 16px;
z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
/* ============ MASTHEAD ============ */
.masthead {
background: var(--paper);
border-bottom: 3px double var(--rule-2);
padding-top: clamp(28px, 5vw, 52px);
}
.masthead__inner { text-align: center; }
.masthead__kicker {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.34em;
font-size: 0.66rem;
font-weight: 600;
color: var(--muted);
margin: 0 0 14px;
}
.masthead__name {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(2.6rem, 8vw, 5.2rem);
line-height: 0.96;
letter-spacing: -0.01em;
margin: 0;
}
.masthead__tag {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1rem, 2.6vw, 1.35rem);
color: var(--ink-3);
margin: 14px 0 0;
}
.masthead__meta {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5em;
align-items: baseline;
margin: 22px 0 26px;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 500;
}
.dot { color: var(--muted); }
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(18px, 5vw, 48px);
border-top: 1px solid var(--rule);
padding-block: 14px;
}
.topnav a {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 600;
color: var(--ink-2);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--teal-d); border-bottom-color: var(--teal); }
/* ============ KICKERS / SECTION HEADS ============ */
.kicker {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.68rem;
font-weight: 700;
color: var(--muted);
margin: 0 0 18px;
}
.kicker--accent { color: var(--teal-d); }
.sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-bottom: 2px solid var(--ink);
padding-bottom: 10px;
margin-bottom: 4px;
}
.sec-head__title {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 2.4rem);
margin: 0;
}
.sec-head__note {
font-style: italic;
color: var(--ink-3);
margin: 0;
font-size: 0.95rem;
}
/* ============ FEATURED ESSAY ============ */
.featured { padding-block: clamp(40px, 7vw, 72px) clamp(34px, 6vw, 60px); }
.essay__head { max-width: 64ch; }
.essay__title {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.1rem, 6vw, 3.8rem);
line-height: 1.02;
letter-spacing: -0.015em;
margin: 0;
}
.essay__sub {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.1rem, 2.6vw, 1.5rem);
color: var(--ink-3);
margin: 14px 0 16px;
}
.essay__byline {
font-size: 0.86rem;
color: var(--ink-3);
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: baseline;
}
.essay__byline a { font-weight: 600; }
.dateline, .readtime { font-style: italic; }
.essay__fig {
margin: 30px 0;
}
.press {
width: 100%;
border-radius: var(--r-sm);
border: 1px solid var(--rule);
}
.press--duo {
aspect-ratio: 21 / 9;
background:
radial-gradient(120% 90% at 78% 20%, rgba(47, 111, 106, 0.42), transparent 55%),
radial-gradient(70% 80% at 22% 78%, rgba(26, 23, 20, 0.55), transparent 60%),
linear-gradient(155deg, #3a4a47 0%, #243937 38%, #161d1c 100%);
}
figcaption {
font-family: var(--serif);
font-style: italic;
font-size: 0.86rem;
color: var(--ink-3);
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 0.6em;
align-items: baseline;
}
.credit {
font-family: var(--sans);
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.62rem;
color: var(--muted);
}
/* Body — column grid, justified, collapsible */
.essay__body {
position: relative;
overflow: hidden;
transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
columns: 2;
column-gap: clamp(28px, 4vw, 52px);
column-rule: 1px solid var(--rule-hair);
}
.essay__body[data-collapsed="true"] {
max-height: 340px;
}
.essay__body[data-collapsed="true"]::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 130px;
background: linear-gradient(to bottom, rgba(239, 231, 214, 0), var(--bone));
pointer-events: none;
}
.essay__body p {
margin: 0 0 1.05em;
text-align: justify;
hyphens: auto;
font-size: 1.02rem;
line-height: 1.62;
color: var(--ink-2);
}
.lead::first-letter {
font-family: var(--serif);
font-weight: 800;
float: left;
font-size: 3.9em;
line-height: 0.74;
padding: 0.06em 0.1em 0 0;
color: var(--ink);
}
.lead { text-indent: 0; }
.essay__body p + p { text-indent: 1.4em; }
.lead + p { text-indent: 0; }
.pullquote {
break-inside: avoid;
margin: 0.6em 0 1.2em;
padding: 18px 0;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.pullquote p {
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important;
line-height: 1.28 !important;
text-align: left !important;
text-indent: 0 !important;
color: var(--ink) !important;
margin: 0 !important;
}
.essay__actions {
margin-top: 22px;
display: flex;
justify-content: center;
border-top: 1px solid var(--rule);
padding-top: 22px;
}
.link-btn {
font-family: var(--sans);
background: none;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 700;
color: var(--teal-d);
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 8px 4px;
}
.link-btn:hover { color: var(--ink); }
.link-btn .chev { transition: transform 0.3s ease; }
.link-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* ============ CONTENTS ============ */
.contents { padding-block: clamp(34px, 6vw, 56px); border-top: 1px solid var(--rule); }
.filterbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 22px 0 8px;
}
.filterbar__label {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.66rem;
font-weight: 600;
color: var(--muted);
margin-right: 6px;
}
.chip {
font-family: var(--sans);
cursor: pointer;
background: transparent;
border: 1px solid var(--rule-2);
border-radius: 999px;
padding: 6px 16px;
font-size: 0.78rem;
font-weight: 500;
color: var(--ink-2);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
.toc {
list-style: none;
margin: 18px 0 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.toc__item {
display: grid;
grid-template-columns: 7.5rem 1fr auto;
align-items: baseline;
gap: 16px;
padding: 16px 4px;
border-bottom: 1px solid var(--rule-hair);
transition: background 0.2s ease;
}
.toc__item:hover { background: rgba(47, 111, 106, 0.05); }
.toc__item.is-hidden { display: none; }
.toc__genre {
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.62rem;
font-weight: 700;
color: var(--teal-d);
padding-top: 0.35em;
}
.toc__main { display: flex; flex-direction: column; gap: 3px; }
.toc__title {
font-family: var(--serif);
font-weight: 700;
font-size: 1.22rem;
color: var(--ink);
text-decoration: none;
line-height: 1.2;
}
.toc__title:hover { color: var(--teal-d); text-decoration: underline; }
.toc__author {
font-style: italic;
font-size: 0.88rem;
color: var(--ink-3);
}
.toc__page {
font-family: var(--serif);
font-size: 1.1rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.toc__empty {
font-style: italic;
color: var(--ink-3);
padding: 24px 4px;
margin: 0;
}
/* ============ CONTRIBUTOR SPOTLIGHT ============ */
.spotlight {
padding-block: clamp(40px, 7vw, 64px);
border-top: 3px double var(--rule-2);
}
.spotlight__grid {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: clamp(28px, 5vw, 56px);
align-items: start;
}
.press--port {
aspect-ratio: 3 / 4;
background:
radial-gradient(80% 60% at 50% 30%, rgba(217, 230, 228, 0.5), transparent 60%),
radial-gradient(90% 90% at 50% 120%, rgba(26, 23, 20, 0.7), transparent 65%),
linear-gradient(165deg, #41514e 0%, #2a3e3b 45%, #181f1e 100%);
}
.spotlight__name {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 2.5rem);
margin: 0;
}
.spotlight__role {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.68rem;
font-weight: 600;
color: var(--teal-d);
margin: 6px 0 18px;
}
.spotlight__body p {
margin: 0 0 1em;
color: var(--ink-2);
line-height: 1.62;
max-width: 60ch;
}
.spotlight__quote {
margin: 22px 0 0;
padding-left: 20px;
border-left: 3px solid var(--teal);
}
.spotlight__quote p {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
color: var(--ink);
margin: 0;
line-height: 1.35;
}
/* ============ COLOPHON / SUBSCRIBE ============ */
.colophon {
background: var(--ink);
color: var(--bone);
margin-top: clamp(20px, 5vw, 40px);
padding-block: clamp(40px, 7vw, 64px) 0;
}
.colophon a { color: var(--teal-50); }
.colophon a:hover { color: var(--white); }
.colophon__inner {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: clamp(28px, 5vw, 56px);
}
.colophon__title {
font-family: var(--serif);
font-weight: 700;
font-size: 1.5rem;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(239, 231, 214, 0.22);
}
.colophon__col p {
color: rgba(239, 231, 214, 0.82);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 12px;
}
.colophon__small { font-size: 0.84rem !important; color: rgba(239, 231, 214, 0.62) !important; }
.subform { margin-top: 16px; }
.subform__label {
display: block;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.62rem;
font-weight: 600;
color: rgba(239, 231, 214, 0.7);
margin-bottom: 8px;
}
.subform__row { display: flex; gap: 8px; flex-wrap: wrap; }
.subform__input {
flex: 1 1 180px;
min-width: 0;
background: rgba(239, 231, 214, 0.06);
border: 1px solid rgba(239, 231, 214, 0.28);
border-radius: var(--r-sm);
color: var(--bone);
font-family: var(--sans);
font-size: 0.95rem;
padding: 11px 13px;
}
.subform__input::placeholder { color: rgba(239, 231, 214, 0.45); }
.subform__input:focus-visible { outline-color: var(--teal-50); border-color: var(--teal-50); }
.subform__err {
color: #f0b9b3;
font-size: 0.82rem;
margin: 10px 0 0;
}
.btn {
font-family: var(--sans);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
font-weight: 700;
border-radius: var(--r-sm);
padding: 11px 20px;
border: 1px solid transparent;
text-decoration: none;
display: inline-block;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--solid { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn--solid:hover { background: var(--teal-d); color: var(--white); }
.btn--ghost {
background: transparent;
color: var(--bone);
border-color: rgba(239, 231, 214, 0.4);
margin-top: 4px;
}
.btn--ghost:hover { border-color: var(--bone); background: rgba(239, 231, 214, 0.08); color: var(--bone); }
.colophon__rule {
border-top: 1px solid rgba(239, 231, 214, 0.18);
margin-top: clamp(34px, 5vw, 52px);
padding-block: 22px 26px;
font-size: 0.74rem;
color: rgba(239, 231, 214, 0.55);
text-align: center;
}
/* ============ TOAST ============ */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 130%);
background: var(--ink);
color: var(--paper);
border: 1px solid var(--teal);
border-radius: var(--r-md);
padding: 13px 22px;
font-size: 0.9rem;
font-weight: 500;
z-index: 60;
opacity: 0;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.4s ease;
max-width: min(90vw, 420px);
text-align: center;
}
.toast.is-show { transform: translate(-50%, 0); opacity: 1; }
/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
.spotlight__grid { grid-template-columns: 0.7fr 1.5fr; }
.colophon__inner { grid-template-columns: 1fr 1fr; }
.colophon__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.essay__body { columns: 1; }
.essay__body[data-collapsed="true"] { max-height: 300px; }
.essay__body p { text-align: left; }
.spotlight__grid { grid-template-columns: 1fr; }
.spotlight__fig { max-width: 280px; }
.colophon__inner { grid-template-columns: 1fr; }
.colophon__col:first-child { grid-column: auto; }
}
@media (max-width: 460px) {
.toc__item {
grid-template-columns: 1fr auto;
grid-template-areas:
"genre page"
"main main";
gap: 6px 12px;
}
.toc__genre { grid-area: genre; padding-top: 0; }
.toc__page { grid-area: page; text-align: right; }
.toc__main { grid-area: main; }
.masthead__meta { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.001ms !important; }
}// The Marginalia Review — landing interactions (vanilla JS)
(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2800);
}
/* ---------- featured essay: expand / collapse with smooth height ---------- */
var body = document.getElementById("essay-body");
var toggle = document.getElementById("essay-toggle");
if (body && toggle) {
var setCollapsedHeight = function () {
// when collapsed the CSS max-height clamp drives the look; nothing to set
};
toggle.addEventListener("click", function () {
var collapsed = body.getAttribute("data-collapsed") === "true";
if (collapsed) {
// expand: animate from current clamp to full scroll height
var start = body.clientHeight;
body.style.maxHeight = start + "px";
body.setAttribute("data-collapsed", "false");
// force reflow then set to full height
void body.offsetHeight;
body.style.maxHeight = body.scrollHeight + "px";
var onEnd = function () {
body.style.maxHeight = "none";
body.removeEventListener("transitionend", onEnd);
};
body.addEventListener("transitionend", onEnd);
toggle.setAttribute("aria-expanded", "true");
toggle.innerHTML = 'Read less <span class="chev" aria-hidden="true">↓</span>';
} else {
// collapse: from full height back to the clamp value (340 / 300)
var full = body.scrollHeight;
body.style.maxHeight = full + "px";
void body.offsetHeight;
var clamp = window.matchMedia("(max-width: 720px)").matches ? 300 : 340;
body.style.maxHeight = clamp + "px";
var onEnd2 = function () {
body.removeAttribute("style");
body.setAttribute("data-collapsed", "true");
body.removeEventListener("transitionend", onEnd2);
};
body.addEventListener("transitionend", onEnd2);
toggle.setAttribute("aria-expanded", "false");
toggle.innerHTML = 'Continue reading <span class="chev" aria-hidden="true">↓</span>';
// keep the essay top in view when collapsing
var featured = document.getElementById("featured");
if (featured) {
var top = featured.getBoundingClientRect().top + window.scrollY - 16;
if (window.scrollY > top) window.scrollTo({ top: top, behavior: "smooth" });
}
}
});
setCollapsedHeight();
}
/* ---------- contents: genre filter ---------- */
var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
var items = Array.prototype.slice.call(document.querySelectorAll(".toc__item"));
var emptyMsg = document.getElementById("toc-empty");
function applyFilter(genre) {
var shown = 0;
items.forEach(function (item) {
var match = genre === "all" || item.getAttribute("data-genre") === genre;
item.classList.toggle("is-hidden", !match);
if (match) shown++;
});
if (emptyMsg) emptyMsg.hidden = shown !== 0;
}
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-pressed", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-pressed", "true");
var genre = chip.getAttribute("data-genre");
applyFilter(genre);
var label = chip.textContent.trim();
toast(genre === "all" ? "Showing all twelve pieces" : "Filtered to " + label.toLowerCase() + "s");
});
});
/* ---------- subscribe form ---------- */
var form = document.getElementById("subform");
var emailInput = document.getElementById("sub-email");
var err = document.getElementById("sub-err");
var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (form && emailInput) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var val = emailInput.value.trim();
if (!emailRe.test(val)) {
if (err) err.hidden = false;
emailInput.setAttribute("aria-invalid", "true");
emailInput.focus();
return;
}
if (err) err.hidden = true;
emailInput.removeAttribute("aria-invalid");
form.reset();
toast("Thank you — Issue No. 14 will be posted to you.");
});
emailInput.addEventListener("input", function () {
if (err && !err.hidden && emailRe.test(emailInput.value.trim())) {
err.hidden = true;
emailInput.removeAttribute("aria-invalid");
}
});
}
/* ---------- smooth in-page anchors ---------- */
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener("click", function (e) {
var id = link.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
var top = target.getBoundingClientRect().top + window.scrollY - 12;
window.scrollTo({ top: top, behavior: "smooth" });
if (typeof target.focus === "function") {
target.setAttribute("tabindex", "-1");
target.focus({ preventScroll: true });
}
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Marginalia Review — Issue No. 14</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#contents">Skip to contents</a>
<!-- ============ MASTHEAD ============ -->
<header class="masthead" role="banner">
<div class="wrap masthead__inner">
<p class="masthead__kicker">A Quarterly of Letters & Argument</p>
<h1 class="masthead__name">The Marginalia Review</h1>
<p class="masthead__tag"><em>Reading slowly, in a hurried age.</em></p>
<div class="masthead__meta" role="contentinfo">
<span>Issue No. 14</span>
<span class="dot" aria-hidden="true">·</span>
<span>Spring 2026</span>
<span class="dot" aria-hidden="true">·</span>
<span>Founded 2009</span>
</div>
</div>
<nav class="topnav wrap" aria-label="Sections">
<a href="#featured">Essays</a>
<a href="#contents">Contents</a>
<a href="#contributor">Contributors</a>
<a href="#subscribe">Subscribe</a>
</nav>
</header>
<main class="wrap">
<!-- ============ FEATURED ESSAY ============ -->
<section id="featured" class="featured" aria-labelledby="featured-title">
<p class="kicker kicker--accent">From the Issue · Lead Essay</p>
<article class="essay">
<header class="essay__head">
<h2 id="featured-title" class="essay__title">The Patience of the Margin</h2>
<p class="essay__sub">On annotation, doubt, and the quiet labour of reading against a text.</p>
<p class="essay__byline">
by <a href="#contributor">Helen V. Aldous</a>
<span class="dot" aria-hidden="true">·</span>
<span class="dateline">Fiction & Criticism</span>
<span class="dot" aria-hidden="true">·</span>
<span class="readtime">22 minutes</span>
</p>
</header>
<figure class="essay__fig">
<div class="press press--duo" role="img" aria-label="A dim study with an open book and lamplight, rendered as a duotone ink illustration."></div>
<figcaption><em>An evening's reading, somewhere east of the river.</em> <span class="credit">Illustration · The Marginalia Review</span></figcaption>
</figure>
<div class="essay__body" id="essay-body" data-collapsed="true">
<p class="lead">There is a kind of reader who cannot leave a page alone. She arrives at the margin the way a tide arrives at a shore — not to conquer the printed line but to converse with it, to leave a small wrack of pencil and objection where the sentence runs aground. To annotate is to refuse the book its monologue. It is to insist, gently and persistently, that meaning is a thing made in company.</p>
<p>We have inherited a suspicion of slowness. The hurried reader skims for the gist, mistakes the gist for the thing, and moves on lighter than he came. But the margin keeps its own time. It is the place where a sentence is detained for questioning, where the reader writes <em>yes</em>, or <em>surely not</em>, or simply a vertical line of approval that no one else will ever see. These marks are private weather. They record not what the author meant but what the reader, on a particular grey afternoon, was willing to be moved by.</p>
<p>To read against a text is not to read in bad faith. It is the highest courtesy one can pay a difficult book — to take it seriously enough to argue. The reader who agrees with everything has, in a sense, read nothing; agreement is a closed door. Doubt is the open one. And the margin is doubt's narrow room, where we keep the apparatus of our disbelief close at hand.</p>
<blockquote class="pullquote">
<p>The margin keeps its own time. It is the place where a sentence is detained for questioning.</p>
</blockquote>
<p>Consider the annotated copies that survive in libraries — the hand of one dead reader pressing against the page of a dead writer, the two of them in perpetual, soundless dispute. We read these marginalia now as a third party, eavesdropping on a quarrel we cannot adjudicate. There is something consoling in it. It tells us that no book is finished while a single reader remains to disagree with it.</p>
<p>What the margin teaches, finally, is humility about our own first impressions. The pencil mark made in conviction at twenty embarrasses the reader at forty, who finds in the older self a stranger of alarming certainty. To return to one's own annotations is to be confronted with the archaeology of a former mind. We do not read the same book twice; we are not the same reader who first opened it. The margin is where this difference is recorded, line by line, in a hand we recognise but no longer entirely trust.</p>
<p>And so the patient reader keeps her pencil sharp and her judgements provisional. She does not finish a book so much as suspend her quarrel with it, leaving the margin open for the next return. This is not indecision. It is the long fidelity of a mind that would rather keep reading than be done.</p>
</div>
<div class="essay__actions">
<button id="essay-toggle" class="link-btn" type="button" aria-expanded="false" aria-controls="essay-body">Continue reading <span class="chev" aria-hidden="true">↓</span></button>
</div>
</article>
</section>
<!-- ============ CONTENTS ============ -->
<section id="contents" class="contents" aria-labelledby="contents-title">
<header class="sec-head">
<h2 id="contents-title" class="sec-head__title">In This Issue</h2>
<p class="sec-head__note">Twelve pieces — essays, poems, and reviews.</p>
</header>
<div class="filterbar" role="group" aria-label="Filter contents by genre">
<span class="filterbar__label">Filter:</span>
<button class="chip is-active" data-genre="all" type="button" aria-pressed="true">All</button>
<button class="chip" data-genre="essay" type="button" aria-pressed="false">Essay</button>
<button class="chip" data-genre="poem" type="button" aria-pressed="false">Poem</button>
<button class="chip" data-genre="review" type="button" aria-pressed="false">Review</button>
<button class="chip" data-genre="fiction" type="button" aria-pressed="false">Fiction</button>
</div>
<ol class="toc" id="toc-list" aria-live="polite">
<li class="toc__item" data-genre="essay">
<span class="toc__genre">Essay</span>
<span class="toc__main"><a href="#featured" class="toc__title">The Patience of the Margin</a><span class="toc__author">Helen V. Aldous</span></span>
<span class="toc__page">3</span>
</li>
<li class="toc__item" data-genre="poem">
<span class="toc__genre">Poem</span>
<span class="toc__main"><a href="#contents" class="toc__title">Three Studies of Rain</a><span class="toc__author">Marcus Oyelaran</span></span>
<span class="toc__page">17</span>
</li>
<li class="toc__item" data-genre="review">
<span class="toc__genre">Review</span>
<span class="toc__main"><a href="#contents" class="toc__title">On Difficulty, Reviewed</a><span class="toc__author">Priya Nandakumar</span></span>
<span class="toc__page">21</span>
</li>
<li class="toc__item" data-genre="fiction">
<span class="toc__genre">Fiction</span>
<span class="toc__main"><a href="#contents" class="toc__title">The Lighthouse Keeper's Inventory</a><span class="toc__author">D. F. Halloran</span></span>
<span class="toc__page">29</span>
</li>
<li class="toc__item" data-genre="essay">
<span class="toc__genre">Essay</span>
<span class="toc__main"><a href="#contents" class="toc__title">A Defence of the Footnote</a><span class="toc__author">Etienne Roux</span></span>
<span class="toc__page">44</span>
</li>
<li class="toc__item" data-genre="poem">
<span class="toc__genre">Poem</span>
<span class="toc__main"><a href="#contents" class="toc__title">Aubade for a Closed Library</a><span class="toc__author">Sofia Berenguer</span></span>
<span class="toc__page">51</span>
</li>
<li class="toc__item" data-genre="review">
<span class="toc__genre">Review</span>
<span class="toc__main"><a href="#contents" class="toc__title">The Year in Anthologies</a><span class="toc__author">Tomas Wrede</span></span>
<span class="toc__page">55</span>
</li>
<li class="toc__item" data-genre="fiction">
<span class="toc__genre">Fiction</span>
<span class="toc__main"><a href="#contents" class="toc__title">A Short History of the Comma</a><span class="toc__author">Ines Castellano</span></span>
<span class="toc__page">63</span>
</li>
<li class="toc__item" data-genre="essay">
<span class="toc__genre">Essay</span>
<span class="toc__main"><a href="#contents" class="toc__title">Reading in Translation</a><span class="toc__author">Yuki Hasegawa</span></span>
<span class="toc__page">70</span>
</li>
<li class="toc__item" data-genre="poem">
<span class="toc__genre">Poem</span>
<span class="toc__main"><a href="#contents" class="toc__title">Elegy with Marginalia</a><span class="toc__author">Cormac Bývald</span></span>
<span class="toc__page">78</span>
</li>
<li class="toc__item" data-genre="review">
<span class="toc__genre">Review</span>
<span class="toc__main"><a href="#contents" class="toc__title">Against the Long Novel</a><span class="toc__author">Rosa Achterberg</span></span>
<span class="toc__page">82</span>
</li>
<li class="toc__item" data-genre="essay">
<span class="toc__genre">Essay</span>
<span class="toc__main"><a href="#contents" class="toc__title">The Ethics of the Re-read</a><span class="toc__author">Helen V. Aldous</span></span>
<span class="toc__page">90</span>
</li>
</ol>
<p class="toc__empty" id="toc-empty" hidden>No pieces in this genre this issue.</p>
</section>
<!-- ============ CONTRIBUTOR SPOTLIGHT ============ -->
<section id="contributor" class="spotlight" aria-labelledby="spot-title">
<p class="kicker kicker--accent">Contributor Spotlight</p>
<div class="spotlight__grid">
<figure class="spotlight__fig">
<div class="press press--port" role="img" aria-label="Portrait of the contributor, rendered as a duotone study."></div>
<figcaption><em>Helen V. Aldous</em> <span class="credit">Portrait · The Marginalia Review</span></figcaption>
</figure>
<div class="spotlight__body">
<h2 id="spot-title" class="spotlight__name">Helen V. Aldous</h2>
<p class="spotlight__role">Essayist · Issue No. 14</p>
<p>Helen V. Aldous writes on reading, memory, and the small disciplines of attention. Her essays have appeared in these pages since our third issue, and her column <em>Against the Grain</em> has become, against her own modest intentions, the part many readers turn to first.</p>
<p>She lives in a flat overlooking a disused railway line and is at work on a book about the things readers write in books. In this issue she contributes both the lead essay and a shorter meditation on the ethics of returning to a text one has outgrown.</p>
<blockquote class="spotlight__quote">
<p>“I have never trusted a clean book. The page that argues back is the one that was read.”</p>
</blockquote>
</div>
</div>
</section>
</main>
<!-- ============ SUBSCRIBE / SUBMIT ============ -->
<footer id="subscribe" class="colophon" role="contentinfo">
<div class="wrap colophon__inner">
<div class="colophon__col">
<h2 class="colophon__title">Subscribe</h2>
<p>Four issues a year, posted to your door. No advertising, no algorithm — only the work and the margin you bring to it.</p>
<form class="subform" id="subform" novalidate>
<label class="subform__label" for="sub-email">Your email</label>
<div class="subform__row">
<input class="subform__input" id="sub-email" name="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn--solid" type="submit">Subscribe</button>
</div>
<p class="subform__err" id="sub-err" hidden role="alert">Please enter a valid email address.</p>
</form>
</div>
<div class="colophon__col">
<h2 class="colophon__title">Submit</h2>
<p>We read essays, poems, fiction, and reviews year-round. Send no more than one piece at a time; expect a slow and considered reply.</p>
<p class="colophon__small">Submissions open until 30 June. Reading period three to four months. Simultaneous submissions welcome with prompt notice of acceptance elsewhere.</p>
<a class="btn btn--ghost" href="#subscribe">Submission Guidelines</a>
</div>
<div class="colophon__col">
<h2 class="colophon__title">The Review</h2>
<p class="colophon__small">The Marginalia Review is an independent quarterly of letters and argument, edited by volunteers and supported by its subscribers.</p>
<p class="colophon__small">Issue No. 14 · Spring 2026 · Printed on uncoated stock.</p>
</div>
</div>
<p class="colophon__rule wrap">© 2026 The Marginalia Review — a wholly fictional publication. Set in Playfair Display & Inter.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Literary Journal / Review Landing
A contemplative, type-led landing page for The Marginalia Review, a wholly fictional quarterly of letters and argument. The masthead is deliberately quiet — journal name in book-serif display, issue and season set in small uppercase metadata, a single italic tagline — over a bone page with ink text and a restrained muted-teal accent. Hairline and double rules separate sections; there is no photography to speak of beyond two duotone-ink illustration plates rendered entirely in CSS.
The lead essay, The Patience of the Margin, opens with a serif drop cap and runs as justified, hyphenated body text across a real two-column grid with a thin column rule and an oversized pull quote held between the columns. A Continue reading control expands the essay from a faded clamp to its full height on a smooth max-height transition, and collapses it back while keeping the essay top in view. Below, an issue contents list — essays, poems, fiction, and reviews with author, genre tag, and page number — can be filtered live by genre through a row of pill controls, with an empty state for genres with no pieces.
A contributor spotlight pairs a duotone portrait plate with a short bio and a pull quote, and a dark colophon footer carries a validated subscribe form (inline error, success toast) alongside submission notes and masthead detail. Every interaction is vanilla JavaScript with no libraries, and the layout collapses to a single column under 720px and stays readable down to 360px.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.