UI 元件 簡單
News — Obituary / In Memoriam
A print-style obituary and In Memoriam component rendered as a bordered editorial card with a duotone portrait gradient, full name, life years, a serif tribute headline, dateline, and a drop-cap remembrance passage. Includes a survived-by and service details meta block, an interactive light-a-candle condolence counter, a share toast, and a compact column of secondary notices — all set on warm newsprint with hairline rules, justified columns, and a single restrained editorial red.
在 Lab 開啟
MCP
html css vanilla-js
目標: JS HTML
程式碼
:root {
--cream: #f4efe4;
--paper: #faf7f0;
--white: #ffffff;
--newsprint: #efe9da;
--ink: #16130f;
--ink-2: #2b2620;
--ink-3: #4a443b;
--muted: #7a7164;
--red: #b4291f;
--red-d: #8f1f17;
--red-50: #f3dcd9;
--rule: rgba(22, 19, 15, 0.16);
--rule-2: rgba(22, 19, 15, 0.3);
--rule-hair: rgba(22, 19, 15, 0.1);
--ok: #2f7d4f;
--warn: #b67a18;
--danger: #b4291f;
--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;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
padding: clamp(16px, 4vw, 48px);
}
.sheet {
max-width: 1080px;
margin: 0 auto;
background: var(--paper);
border: 1px solid var(--rule-2);
padding: clamp(20px, 4vw, 56px);
box-shadow: 0 1px 0 rgba(22, 19, 15, 0.04);
}
/* ---------- Rules ---------- */
.masthead__rule {
height: 1px;
background: var(--ink);
margin: 14px 0;
}
.masthead__rule--double {
position: relative;
height: 3px;
background: var(--ink);
margin-top: 10px;
}
.masthead__rule--double::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 1px;
background: var(--ink);
}
/* ---------- Masthead ---------- */
.masthead {
text-align: center;
}
.masthead__kicker {
margin: 0;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.masthead__title {
margin: 6px 0 6px;
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.6rem, 8vw, 4.4rem);
letter-spacing: -0.01em;
line-height: 0.95;
color: var(--ink);
}
.masthead__sub {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.masthead__sub span,
.masthead__sub time {
white-space: nowrap;
}
/* ---------- Layout ---------- */
.layout {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 48px);
margin-top: 28px;
}
/* ---------- Kickers ---------- */
.kicker {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
}
.kicker--red {
color: var(--red);
}
/* ---------- Primary obituary ---------- */
.obit {
border: 1px solid var(--rule-2);
padding: clamp(18px, 3vw, 34px);
background: linear-gradient(180deg, var(--white), var(--paper));
}
.obit__head {
display: grid;
grid-template-columns: 132px 1fr;
gap: 20px;
align-items: end;
padding-bottom: 16px;
border-bottom: 1px solid var(--ink);
}
.obit__head .kicker--red {
grid-column: 1 / -1;
margin-bottom: 4px;
}
.portrait {
grid-column: 1;
margin: 0;
}
.portrait__img {
aspect-ratio: 3 / 4;
border: 1px solid var(--rule-2);
filter: contrast(1.04) saturate(0.9);
}
.portrait__img--primary {
background:
radial-gradient(120% 80% at 50% 18%, rgba(244, 239, 228, 0.55), transparent 60%),
radial-gradient(70% 55% at 38% 34%, rgba(43, 38, 32, 0.18), transparent 70%),
linear-gradient(180deg, #6d6357 0%, #4a443b 42%, #2b2620 100%);
position: relative;
}
.portrait__img--primary::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(38% 30% at 50% 40%, rgba(244, 239, 228, 0.42), transparent 70%),
linear-gradient(120deg, transparent 40%, rgba(180, 41, 31, 0.14) 100%);
mix-blend-mode: screen;
}
.portrait__cap {
margin-top: 10px;
display: flex;
flex-direction: column;
text-align: left;
}
.portrait__name {
font-family: var(--serif);
font-weight: 700;
font-size: 1.02rem;
line-height: 1.15;
color: var(--ink);
}
.portrait__years {
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--muted);
font-style: italic;
}
.obit__headline {
grid-column: 2;
align-self: end;
margin: 0;
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.5rem, 3.4vw, 2.25rem);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--ink);
}
.dateline {
margin: 18px 0 4px;
font-size: 0.98rem;
color: var(--ink-2);
}
.dateline__place {
font-weight: 700;
letter-spacing: 0.08em;
font-size: 0.82rem;
color: var(--ink);
}
/* ---------- Body columns ---------- */
.obit__body {
margin-top: 12px;
columns: 2;
column-gap: 30px;
column-rule: 1px solid var(--rule-hair);
}
.obit__body p {
margin: 0 0 1em;
font-size: 0.96rem;
line-height: 1.62;
text-align: justify;
hyphens: auto;
color: var(--ink-2);
}
.obit__body .lead {
column-span: all;
font-size: 1.04rem;
text-align: left;
}
.lead::first-letter {
font-family: var(--serif);
font-weight: 800;
float: left;
font-size: 3.4em;
line-height: 0.78;
padding: 6px 10px 0 0;
color: var(--red);
}
/* ---------- Pull quote ---------- */
.pull {
break-inside: avoid;
margin: 4px 0 1.2em;
padding: 16px 0;
border-top: 3px solid var(--ink);
border-bottom: 1px solid var(--rule);
}
.pull__quote {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 1.28rem;
line-height: 1.28;
color: var(--ink);
text-align: left;
}
.pull__cite {
margin-top: 10px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
}
/* ---------- Meta block ---------- */
.metablock {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--ink);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.metablock__label {
margin: 0 0 6px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
}
.metablock__text {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-2);
}
.metablock__text strong {
color: var(--ink);
}
/* ---------- Condolence ---------- */
.condolence {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
}
.candle {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-weight: 600;
font-size: 0.86rem;
letter-spacing: 0.02em;
color: var(--white);
background: var(--red);
border: 1px solid var(--red-d);
border-radius: var(--r-sm);
padding: 9px 16px;
cursor: pointer;
transition: background 0.15s ease, transform 0.08s ease;
}
.candle:hover {
background: var(--red-d);
}
.candle:active {
transform: translateY(1px);
}
.candle:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.candle__flame {
width: 9px;
height: 13px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: linear-gradient(180deg, #ffe7a3, #ffb347 55%, #ff7a18);
box-shadow: 0 0 8px rgba(255, 179, 71, 0.85);
display: inline-block;
transform-origin: bottom center;
animation: flicker 1.6s ease-in-out infinite;
}
.candle.is-lit {
background: var(--ink);
border-color: var(--ink);
}
.candle.is-lit:hover {
background: var(--ink-2);
}
@keyframes flicker {
0%, 100% { transform: scale(1) rotate(-1deg); opacity: 1; }
50% { transform: scale(0.92, 1.06) rotate(1.5deg); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
.candle__flame { animation: none; }
}
.condolence__count {
margin: 0;
font-size: 0.84rem;
color: var(--ink-3);
}
.condolence__count strong {
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.share {
margin-left: auto;
font-family: var(--sans);
font-weight: 600;
font-size: 0.8rem;
color: var(--ink);
background: transparent;
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
padding: 8px 14px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.share:hover {
border-color: var(--ink);
color: var(--red);
}
.share:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* ---------- Rail ---------- */
.rail__title {
margin: 0 0 4px;
font-family: var(--serif);
font-weight: 800;
font-size: 1.2rem;
padding-bottom: 8px;
border-bottom: 3px solid var(--ink);
position: relative;
}
.rail__title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 1px;
background: var(--ink);
}
.obitlist {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
.obititem {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--rule-hair);
}
.obititem:first-child {
padding-top: 0;
}
.obititem__img {
width: 56px;
height: 70px;
border: 1px solid var(--rule-2);
filter: contrast(1.03) saturate(0.85);
}
.obititem:nth-child(1) .obititem__img {
background: linear-gradient(160deg, #5b6b6e, #2f3b3d 70%, #1c2425);
}
.obititem:nth-child(2) .obititem__img {
background: linear-gradient(160deg, #7a6a55, #4a3d2e 70%, #2b2218);
}
.obititem:nth-child(3) .obititem__img {
background: linear-gradient(160deg, #6f5560, #4a3540 70%, #2a1d24);
}
.obititem:nth-child(4) .obititem__img {
background: linear-gradient(160deg, #5a5f6e, #3a3e4a 70%, #22252e);
}
.obititem__name {
margin: 0;
font-family: var(--serif);
font-weight: 700;
font-size: 1.02rem;
line-height: 1.1;
color: var(--ink);
}
.obititem__years {
margin: 3px 0 6px;
font-size: 0.74rem;
font-style: italic;
color: var(--muted);
}
.obititem__line {
margin: 0 0 8px;
font-size: 0.84rem;
line-height: 1.45;
color: var(--ink-2);
}
.ministem {
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--red);
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
border-bottom: 1px solid var(--red-50);
}
.ministem:hover {
border-bottom-color: var(--red);
}
.ministem:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.ministem.is-lit {
color: var(--muted);
cursor: default;
border-bottom-color: transparent;
}
.rail__note {
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid var(--rule);
font-size: 0.76rem;
font-style: italic;
line-height: 1.5;
color: var(--muted);
}
/* ---------- Colophon ---------- */
.colophon {
margin-top: 36px;
text-align: center;
}
.colophon p {
margin: 0;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 20px);
background: var(--ink);
color: var(--paper);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 11px 18px;
border-radius: var(--r-sm);
border: 1px solid var(--ink-2);
box-shadow: 0 6px 22px rgba(22, 19, 15, 0.28);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 50;
max-width: min(90vw, 360px);
text-align: center;
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.layout {
grid-template-columns: 1fr;
}
.rail {
border-top: 3px solid var(--ink);
padding-top: 22px;
}
}
@media (max-width: 720px) {
.obit__body {
columns: 1;
}
.metablock {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width: 480px) {
.obit__head {
grid-template-columns: 100px 1fr;
gap: 14px;
}
.obit__headline {
font-size: 1.4rem;
}
.share {
margin-left: 0;
}
}(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-visible");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
function formatCount(n) {
return n.toLocaleString("en-US");
}
/* ---------- Primary "light a candle" counter ---------- */
var candleBtn = document.getElementById("candleBtn");
var candleCount = document.getElementById("candleCount");
var count = 1284;
var lit = false;
if (candleBtn && candleCount) {
candleBtn.addEventListener("click", function () {
if (!lit) {
count += 1;
lit = true;
candleBtn.classList.add("is-lit");
candleBtn.querySelector(".candle__label").textContent = "Candle lit";
candleBtn.setAttribute("aria-pressed", "true");
candleCount.textContent = formatCount(count);
toast("Your candle now burns for Eleanor. Thank you.");
} else {
count -= 1;
lit = false;
candleBtn.classList.remove("is-lit");
candleBtn.querySelector(".candle__label").textContent = "Light a candle";
candleBtn.setAttribute("aria-pressed", "false");
candleCount.textContent = formatCount(count);
toast("Candle dimmed.");
}
});
}
/* ---------- Compact list mini candle buttons ---------- */
var miniBtns = document.querySelectorAll(".ministem");
Array.prototype.forEach.call(miniBtns, function (btn) {
btn.addEventListener("click", function () {
if (btn.classList.contains("is-lit")) return;
btn.classList.add("is-lit");
btn.textContent = "Candle lit ✓";
btn.setAttribute("aria-pressed", "true");
var name = btn.getAttribute("data-name") || "this neighbour";
toast("A candle was lit for " + name + ".");
});
});
/* ---------- Share ---------- */
var shareBtn = document.getElementById("shareBtn");
if (shareBtn) {
shareBtn.addEventListener("click", function () {
var shareData = {
title: "In Memoriam — Eleanor M. Whitcombe",
text: "Remembering Eleanor M. Whitcombe (1940–2026), beloved teacher of Meridian Falls.",
url: window.location.href
};
if (navigator.share) {
navigator
.share(shareData)
.then(function () {
toast("Thank you for sharing this remembrance.");
})
.catch(function () {
/* user cancelled — stay quiet */
});
return;
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard
.writeText(shareData.text + " " + shareData.url)
.then(function () {
toast("Remembrance link copied to clipboard.");
})
.catch(function () {
toast("Could not copy — please copy the page link manually.");
});
return;
}
toast("Sharing is not available in this preview.");
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>In Memoriam — The Meridian Ledger</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>
<main class="sheet">
<!-- Masthead -->
<header class="masthead">
<div class="masthead__rule" aria-hidden="true"></div>
<p class="masthead__kicker">The Meridian Ledger · Established 1887</p>
<h1 class="masthead__title">In Memoriam</h1>
<p class="masthead__sub">
Obituaries & Remembrances · <span>Section E</span> ·
<time datetime="2026-06-08">Monday, June 8, 2026</time>
</p>
<div class="masthead__rule masthead__rule--double" aria-hidden="true"></div>
</header>
<div class="layout">
<!-- Primary obituary card -->
<article class="obit" aria-labelledby="obit-name">
<header class="obit__head">
<p class="kicker kicker--red">In Loving Memory</p>
<figure class="portrait">
<div class="portrait__img portrait__img--primary" role="img"
aria-label="Portrait of Eleanor M. Whitcombe"></div>
<figcaption class="portrait__cap">
<span class="portrait__name" id="obit-name">Eleanor M. Whitcombe</span>
<span class="portrait__years">1940 – 2026</span>
</figcaption>
</figure>
</header>
<h2 class="obit__headline">
A Teacher Who Gave the Whole Town Its Voice
</h2>
<p class="dateline">
<span class="dateline__place">MERIDIAN FALLS</span> — Eleanor Margaret
Whitcombe, beloved schoolteacher, choir director, and keeper of the
county’s oldest reading circle, died peacefully at home on Thursday
surrounded by family. She was 86.
</p>
<div class="obit__body">
<p class="lead">
For forty-one years she stood at the front of a classroom on Cedar
Street and taught three generations of Meridian Falls how to read a
sentence aloud as though it mattered. She believed it always did. Her
students remember the chalk dust, the worn green reader, and the way she
would pause — just slightly — before the last line of any poem,
giving the words room to land.
</p>
<p>
Born in 1940 above her parents’ hardware store, Eleanor was the first
in her family to finish college, returning home with a teaching
certificate and a stubborn conviction that no child was beyond reach. She
founded the town’s after-school choir in 1968 with nine voices and a
borrowed piano; by the time she retired it filled the Methodist hall every
spring.
</p>
<figure class="pull">
<blockquote class="pull__quote">
“She taught us that to read out loud was an act of courage. We are
still finding our voices because of her.”
</blockquote>
<figcaption class="pull__cite">— Former student, Class of 1979</figcaption>
</figure>
<p>
Neighbors knew her porch light as a fixed point. It burned every evening
until the last walker had passed, and on summer nights she could be found
there with a book in her lap and a thermos of strong tea, ready to talk
about anything but herself.
</p>
</div>
<!-- Meta block: survived by + service -->
<div class="metablock" aria-label="Family and service details">
<div class="metablock__col">
<h3 class="metablock__label">Survived By</h3>
<p class="metablock__text">
Her daughter, Ruth Whitcombe-Aldous; two grandchildren, Marcus and
Iris; her sister, Frances Doyle; and what she called “a town full of
former students.” She was preceded in death by her husband, Thomas,
in 2009.
</p>
</div>
<div class="metablock__col">
<h3 class="metablock__label">Service</h3>
<p class="metablock__text">
A memorial service will be held <strong>Saturday, June 13 at
11:00 a.m.</strong> at First Methodist Church, Cedar Street.
In lieu of flowers, the family asks that donations be made to the
Meridian Falls Library reading fund.
</p>
</div>
</div>
<!-- Condolence action -->
<div class="condolence">
<button class="candle" id="candleBtn" type="button"
aria-label="Light a candle in remembrance">
<span class="candle__flame" aria-hidden="true"></span>
<span class="candle__label">Light a candle</span>
</button>
<p class="condolence__count" aria-live="polite">
<strong id="candleCount">1,284</strong> candles lit in remembrance
</p>
<button class="share" id="shareBtn" type="button">
<span aria-hidden="true">↗</span> Share remembrance
</button>
</div>
</article>
<!-- Sidebar: compact obituary list -->
<aside class="rail" aria-label="More remembrances">
<h2 class="rail__title">
<span>More Remembrances</span>
</h2>
<ul class="obitlist">
<li class="obititem">
<div class="obititem__img" role="img" aria-label="Portrait of Harold J. Pruitt"></div>
<div class="obititem__body">
<p class="obititem__name">Harold J. Pruitt</p>
<p class="obititem__years">1933 – 2026 · aged 92</p>
<p class="obititem__line">Lifelong ferry captain on the Meridian crossing for over fifty winters.</p>
<button class="ministem" type="button" data-name="Harold J. Pruitt">Light a candle</button>
</div>
</li>
<li class="obititem">
<div class="obititem__img" role="img" aria-label="Portrait of Yusuf A. Demir"></div>
<div class="obititem__body">
<p class="obititem__name">Yusuf A. Demir</p>
<p class="obititem__years">1951 – 2026 · aged 74</p>
<p class="obititem__line">Tailor on Market Row whose shop dressed three mayors and countless brides.</p>
<button class="ministem" type="button" data-name="Yusuf A. Demir">Light a candle</button>
</div>
</li>
<li class="obititem">
<div class="obititem__img" role="img" aria-label="Portrait of Ana-Lucía Reyes"></div>
<div class="obititem__body">
<p class="obititem__name">Ana-Lucía Reyes</p>
<p class="obititem__years">1947 – 2026 · aged 78</p>
<p class="obititem__line">Founder of the Saturday market garden and a fierce defender of the river path.</p>
<button class="ministem" type="button" data-name="Ana-Lucía Reyes">Light a candle</button>
</div>
</li>
<li class="obititem">
<div class="obititem__img" role="img" aria-label="Portrait of Dr. Iris N. Holloway"></div>
<div class="obititem__body">
<p class="obititem__name">Dr. Iris N. Holloway</p>
<p class="obititem__years">1938 – 2026 · aged 88</p>
<p class="obititem__line">Country physician who delivered a generation and never once turned a patient away.</p>
<button class="ministem" type="button" data-name="Dr. Iris N. Holloway">Light a candle</button>
</div>
</li>
</ul>
<p class="rail__note">
To submit a notice, contact the Ledger newsroom before 4 p.m. on the day
prior to publication.
</p>
</aside>
</div>
<footer class="colophon">
<div class="masthead__rule" aria-hidden="true"></div>
<p>The Meridian Ledger · In Memoriam · Page E1 · All notices fictional.</p>
</footer>
</main>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Obituary / In Memoriam
A self-contained obituary module styled like a real broadsheet memorial page. The primary notice is a bordered card carrying a duotone-ink portrait gradient, the deceased’s full name and life years, a serif tribute headline, a place-stamped dateline, and a two-column remembrance passage that opens with a red drop cap and a pull quote. Beneath the prose sits a structured meta block for “survived by” lineage and the funeral service details, followed by the condolence controls.
The interactions are quiet and respectful. A “Light a candle” button toggles a flickering flame and increments a live, comma-formatted candle tally (click again to dim), each change announced through an aria-live region. A share button uses the Web Share API when present and falls back to copying the remembrance to the clipboard, with a small toast confirming the action. A right-hand rail lists compact secondary notices, each with its own one-tap candle.
Everything is vanilla HTML, CSS, and JavaScript: Playfair Display for the display serif, Inter for meta and UI, hairline rules instead of shadows, justified hyphenated columns, and a single accent red used only for kickers, the drop cap, and links. The layout collapses from two columns to one below 720px and stays readable down to 360px.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.