UI Components Medium
Science — References + Inline Citations
A self-contained scholarly article layout with live inline citations and a full reference list. Hover or focus any bracketed marker to preview the source in a tooltip, click to smooth-scroll to its numbered entry, and switch the visible format between numeric, author-year, and superscript with one toggle. Each reference carries authors, title, venue, year, a resolvable DOI link, and per-entry Cite (copy BibTeX) and Copy buttons, plus a copy-all action. Built with semantic HTML and vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute;
left: 12px;
top: -48px;
background: var(--accent);
color: #fff;
font-family: var(--ui);
font-size: 13px;
padding: 8px 12px;
border-radius: var(--r-sm);
z-index: 50;
transition: top 0.15s;
}
.skip-link:focus { top: 12px; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
.page { max-width: 860px; margin: 0 auto; padding: 0 20px 64px; }
/* ---- masthead ---- */
.masthead {
border-bottom: 1px solid var(--line);
margin: 0 -20px 28px;
padding: 0 20px;
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(6px);
z-index: 20;
}
.masthead-inner {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.venue {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--accent-d);
margin: 0;
text-transform: uppercase;
}
.venue .vol { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.cite-style-bar { display: flex; align-items: center; gap: 10px; }
.cite-style-label {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.seg {
display: inline-flex;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 3px;
gap: 2px;
}
.seg-btn {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
background: transparent;
border: 0;
border-radius: var(--r-sm);
padding: 6px 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg-btn .seg-eg { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.seg-btn:hover { color: var(--accent-d); }
.seg-btn.is-active {
background: #fff;
color: var(--accent-d);
box-shadow: var(--shadow);
}
.seg-btn.is-active .seg-eg { color: var(--accent); }
/* ---- article ---- */
.kicker {
font-family: var(--ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 8px;
}
h1 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(26px, 4.4vw, 38px);
line-height: 1.18;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.byline { font-family: var(--ui); font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.byline .author { font-weight: 600; }
.byline sup, .affil sup { font-family: var(--mono); font-size: 0.66em; color: var(--accent); }
.affil {
font-family: var(--ui);
font-size: 12.5px;
color: var(--muted);
margin: 0 0 24px;
line-height: 1.5;
}
h2 {
font-family: var(--serif);
font-weight: 700;
font-size: 21px;
margin: 30px 0 10px;
letter-spacing: -0.005em;
}
p { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; }
p em, .eq em, td em, th em { font-style: italic; font-family: var(--serif); }
.abstract {
background: var(--bg-alt);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: 16px 20px;
margin: 22px 0 4px;
}
.abstract h2 {
margin: 0 0 8px;
font-size: 13px;
font-family: var(--ui);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent-d);
}
.abstract p { margin: 0; font-size: 15.5px; }
/* ---- inline citation refs ---- */
.cref { display: inline; }
.cref a {
font-family: var(--ui);
text-decoration: none;
color: var(--accent);
font-weight: 600;
cursor: pointer;
border-radius: 3px;
transition: background 0.12s, color 0.12s;
}
.cref a:hover, .cref a:focus-visible { background: var(--accent-50); color: var(--accent-d); }
/* numeric: [n] */
.fmt-numeric .cref a { font-size: 14px; padding: 0 1px; }
/* author-year */
.fmt-author-year .cref a { font-style: italic; font-family: var(--serif); font-weight: 400; color: var(--accent-d); }
.fmt-author-year .cref a:hover { text-decoration: underline; }
/* superscript */
.fmt-superscript .cref a {
font-size: 11px;
vertical-align: super;
line-height: 0;
padding: 0 1px;
}
.cref a.is-target { animation: flash 1.4s ease; }
/* ---- equation ---- */
.eq {
display: flex;
align-items: center;
gap: 16px;
margin: 22px 0;
padding: 14px 18px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.eq-body {
flex: 1;
text-align: center;
font-family: var(--serif);
font-size: 18px;
font-style: italic;
}
.eq-body sub, .eq-body sup { font-style: normal; }
.eq-body .op { font-family: var(--mono); font-style: normal; font-size: 0.85em; color: var(--ink-2); }
.eq-num { font-family: var(--mono); font-size: 14px; color: var(--muted); }
/* ---- figure ---- */
.fig { margin: 26px 0; }
.fig-art {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, #fff, var(--bg-alt));
overflow: hidden;
height: 200px;
}
.fig-art svg { width: 100%; height: 100%; display: block; }
figcaption {
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
margin-top: 10px;
line-height: 1.5;
}
figcaption strong { color: var(--ink); }
/* ---- table ---- */
.tbl-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-md);
margin: 18px 0;
}
table { border-collapse: collapse; width: 100%; min-width: 420px; }
caption {
caption-side: top;
text-align: left;
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
padding: 12px 14px 8px;
}
caption strong { color: var(--ink); }
th, td {
padding: 10px 14px;
text-align: left;
border-top: 1px solid var(--line);
font-size: 14px;
}
th {
font-family: var(--ui);
font-weight: 600;
color: var(--ink);
background: var(--bg-alt);
}
td { font-family: var(--mono); color: var(--ink-2); }
td:first-child { font-family: var(--ui); color: var(--ink); }
tbody tr:hover { background: var(--accent-50); }
/* ---- references ---- */
.refs {
margin-top: 40px;
border-top: 2px solid var(--line-2);
padding-top: 18px;
}
.refs-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.refs-head h2 { margin: 0; }
.btn {
font-family: var(--ui);
font-size: 12.5px;
font-weight: 600;
border-radius: var(--r-sm);
padding: 7px 12px;
cursor: pointer;
border: 1px solid var(--line-2);
background: #fff;
color: var(--accent-d);
transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.btn:hover { background: var(--accent-50); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: var(--bg-alt); }
.ref-list { list-style: none; counter-reset: ref; margin: 14px 0 0; padding: 0; }
.ref-item {
display: grid;
grid-template-columns: 34px 1fr;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: 88px;
}
.ref-item:last-child { border-bottom: 0; }
.ref-num {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: var(--accent);
background: var(--accent-50);
border-radius: var(--r-sm);
height: 28px;
width: 28px;
display: grid;
place-items: center;
}
.ref-body { min-width: 0; }
.ref-cite { font-size: 15px; color: var(--ink-2); margin: 0 0 6px; }
.ref-cite .ref-authors { color: var(--ink); }
.ref-cite .ref-title { font-style: italic; }
.ref-cite .ref-venue { font-variant: small-caps; letter-spacing: 0.02em; }
.ref-cite .ref-year { font-family: var(--mono); font-size: 13px; }
.ref-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--ui);
}
.badge {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.badge-oa { background: var(--teal-50); color: var(--teal); }
.badge-type { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.doi {
font-family: var(--mono);
font-size: 12px;
color: var(--accent);
text-decoration: none;
}
.doi:hover { text-decoration: underline; }
.ref-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.mini {
font-family: var(--ui);
font-size: 11.5px;
font-weight: 600;
border: 1px solid var(--line);
background: #fff;
color: var(--ink-2);
border-radius: var(--r-sm);
padding: 4px 9px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mini:hover { background: var(--accent-50); color: var(--accent-d); border-color: var(--accent); }
.mini:active { transform: translateY(1px); }
.ref-target { animation: flash 1.4s ease; }
/* ---- tooltip ---- */
.tip {
position: fixed;
z-index: 60;
max-width: 320px;
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 12.5px;
line-height: 1.5;
padding: 10px 12px;
border-radius: var(--r-md);
box-shadow: 0 10px 30px rgba(15, 27, 45, 0.28);
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.14s, transform 0.14s;
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip .tip-num { font-family: var(--mono); color: #8fb6e6; font-weight: 500; }
.tip .tip-title { font-style: italic; color: #e6edf6; }
.tip .tip-venue { color: #aebdd2; }
/* ---- toast ---- */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(12px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 13px;
font-weight: 500;
padding: 10px 16px;
border-radius: 999px;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 70;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.foot {
margin-top: 40px;
border-top: 1px solid var(--line);
padding-top: 16px;
font-family: var(--ui);
font-size: 12px;
color: var(--muted);
}
.foot p { font-family: var(--ui); font-size: 12px; color: var(--muted); margin: 0; }
@keyframes flash {
0%, 22% { background: var(--warn); color: #fff; }
100% { background: transparent; }
}
.ref-item.ref-target { animation: flashbg 1.4s ease; }
@keyframes flashbg {
0%, 20% { background: rgba(201, 130, 31, 0.16); }
100% { background: transparent; }
}
@media (max-width: 640px) {
.page { padding: 0 16px 48px; }
.masthead { margin: 0 -16px 22px; padding: 0 16px; }
.masthead-inner { gap: 10px; }
.cite-style-bar { width: 100%; flex-direction: column; align-items: flex-start; }
.seg { width: 100%; }
.seg-btn { flex: 1; justify-content: center; padding: 8px 6px; }
.seg-btn .seg-eg { display: none; }
.eq { flex-direction: column; gap: 8px; align-items: stretch; }
.eq-num { text-align: right; }
.ref-item { grid-template-columns: 28px 1fr; }
.ref-actions { margin-left: 0; width: 100%; }
p, .abstract p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}(function () {
"use strict";
/* ---- fictional bibliography ---- */
var REFS = [
{
id: 1,
authors: "Okonkwo, L., Vasquez-Reyes, M., & Bauer, E.",
authorsShort: "Okonkwo et al.",
title: "Radiative controls on sub-canopy temperature in remnant forests.",
venue: "J. Comput. Ecol.",
year: 2023, vol: "12(4)", pages: "601–619",
doi: "10.4821/jce.2023.0188", type: "Article", oa: true,
},
{
id: 2,
authors: "Hendricks, P., & Mwangi, R.",
authorsShort: "Hendricks & Mwangi",
title: "Thermal buffering across closed-canopy gradients: a meta-analysis.",
venue: "Global Change Biol.",
year: 2021, vol: "27(9)", pages: "1880–1897",
doi: "10.1029/gcb.2021.4477", type: "Review", oa: false,
},
{
id: 3,
authors: "Lindqvist, A., Sørensen, K., & Patel, N.",
authorsShort: "Lindqvist et al.",
title: "Microrefugia and the persistence of cold-adapted flora.",
venue: "Ecography",
year: 2022, vol: "45(2)", pages: "210–224",
doi: "10.1111/ecog.2022.0093", type: "Article", oa: true,
},
{
id: 4,
authors: "Adeyemi, T.",
authorsShort: "Adeyemi",
title: "Canopy structure as a climate-regulation service.",
venue: "Trends Ecol. Evol.",
year: 2020, vol: "35(11)", pages: "1003–1015",
doi: "10.1016/tree.2020.0551", type: "Review", oa: false,
},
{
id: 5,
authors: "Brennan, S., & Iwata, Y.",
authorsShort: "Brennan & Iwata",
title: "Edge penetration depth in fragmented temperate woodland.",
venue: "Landsc. Ecol.",
year: 2019, vol: "34(6)", pages: "1411–1428",
doi: "10.1007/lae.2019.3320", type: "Article", oa: true,
},
{
id: 6,
authors: "Castellanos, D., & Whitfield, J.",
authorsShort: "Castellanos & Whitfield",
title: "Thermal safety margins of understorey invertebrates.",
venue: "Funct. Ecol.",
year: 2024, vol: "38(1)", pages: "44–58",
doi: "10.1111/fec.2024.0007", type: "Article", oa: false,
},
{
id: 7,
authors: "Okonkwo, L., & Bauer, E.",
authorsShort: "Okonkwo & Bauer",
title: "A radiative-transfer framing for understorey microclimate.",
venue: "Methods Ecol. Evol.",
year: 2022, vol: "13(7)", pages: "1450–1463",
doi: "10.1111/mee3.2022.0144", type: "Methods", oa: true,
},
{
id: 8,
authors: "Nakamura, H., Ostrowski, F., & Diallo, A.",
authorsShort: "Nakamura et al.",
title: "Heat exposure and demographic decline in shaded ferns.",
venue: "Oecologia",
year: 2023, vol: "201(3)", pages: "655–670",
doi: "10.1007/oec.2023.2891", type: "Article", oa: false,
},
{
id: 9,
authors: "Virtanen, P., & Halonen, M.",
authorsShort: "Virtanen & Halonen",
title: "Extinction coefficients for boreal canopy light models.",
venue: "Agric. For. Meteorol.",
year: 2018, vol: "256", pages: "112–125",
doi: "10.1016/afm.2018.0399", type: "Article", oa: true,
},
{
id: 10,
authors: "Sato, R.",
authorsShort: "Sato",
title: "Validating LAD-based attenuation against tower flux data.",
venue: "Boreal Environ. Res.",
year: 2021, vol: "26", pages: "77–94",
doi: "10.5281/ber.2021.0026", type: "Article", oa: true,
},
{
id: 11,
authors: "Greco, M., & Andersson, L.",
authorsShort: "Greco & Andersson",
title: "Eddy-covariance constraints on sub-canopy energy balance.",
venue: "J. Geophys. Res. Biogeosci.",
year: 2020, vol: "125(8)", pages: "e2020JG005",
doi: "10.1029/jgrg.2020.0058", type: "Article", oa: false,
},
{
id: 12,
authors: "Quintero, B., & Falk, H.",
authorsShort: "Quintero & Falk",
title: "Spatial decay of microclimatic edge effects in temperate fragments.",
venue: "Forest Ecol. Manag.",
year: 2022, vol: "509", pages: "120042",
doi: "10.1016/fem.2022.0042", type: "Article", oa: true,
},
];
var byId = {};
REFS.forEach(function (r) { byId[r.id] = r; });
var $ = function (s, c) { return (c || document).querySelector(s); };
var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
/* ---- toast ---- */
var toastEl = $("#toast");
var toastTimer;
function toast(msg) {
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastEl.classList.remove("show"); }, 1900);
}
/* ---- clipboard ---- */
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); resolve(); }
catch (e) { reject(e); }
finally { document.body.removeChild(ta); }
});
}
/* ---- parse "1", "2-4", "6,8", "5,12" into a sorted id array ---- */
function parseSpec(spec) {
var ids = [];
spec.split(",").forEach(function (part) {
part = part.trim();
if (part.indexOf("-") > -1) {
var bounds = part.split("-");
var lo = parseInt(bounds[0], 10);
var hi = parseInt(bounds[1], 10);
for (var i = lo; i <= hi; i++) ids.push(i);
} else if (part) {
ids.push(parseInt(part, 10));
}
});
return ids.filter(function (n, i, a) { return !isNaN(n) && a.indexOf(n) === i; });
}
/* ---- compress [2,3,4] -> "2–4" for numeric/superscript display ---- */
function compressRanges(ids) {
if (!ids.length) return "";
var sorted = ids.slice().sort(function (a, b) { return a - b; });
var out = [];
var start = sorted[0], prev = sorted[0];
for (var i = 1; i <= sorted.length; i++) {
if (sorted[i] === prev + 1) { prev = sorted[i]; continue; }
out.push(start === prev ? String(start) : start + "–" + prev);
start = sorted[i]; prev = sorted[i];
}
return out.join(",");
}
/* ---- author-year label for a set of ids ---- */
function authorYearLabel(ids) {
return ids.map(function (id) {
var r = byId[id];
return r ? r.authorsShort + ", " + r.year : id;
}).join("; ");
}
/* ---- render inline citations in the chosen style ---- */
var currentStyle = "numeric";
var crefs = $$(".cref");
function renderCitations() {
document.body.classList.remove("fmt-numeric", "fmt-author-year", "fmt-superscript");
document.body.classList.add("fmt-" + currentStyle);
crefs.forEach(function (span) {
var spec = span.getAttribute("data-cite");
var ids = parseSpec(spec);
span.innerHTML = "";
var a = document.createElement("a");
a.href = "#references";
a.setAttribute("role", "link");
a.setAttribute("tabindex", "0");
a.dataset.ids = ids.join(",");
var aria = "Citation " + ids.join(", ") + " — " +
ids.map(function (id) { return byId[id] ? byId[id].authorsShort + " " + byId[id].year : id; }).join("; ");
a.setAttribute("aria-label", aria);
if (currentStyle === "author-year") {
a.textContent = "(" + authorYearLabel(ids) + ")";
} else if (currentStyle === "superscript") {
a.textContent = compressRanges(ids);
} else {
a.textContent = "[" + compressRanges(ids) + "]";
}
span.appendChild(a);
});
}
/* ---- tooltip ---- */
var tip = $("#tip");
var tipHideTimer;
function tipHTML(ids) {
return ids.map(function (id) {
var r = byId[id];
if (!r) return "";
return '<div><span class="tip-num">[' + id + ']</span> ' +
r.authorsShort + ' (' + r.year + '). ' +
'<span class="tip-title">' + r.title + '</span> ' +
'<span class="tip-venue">' + r.venue + '</span></div>';
}).join("");
}
function showTip(target) {
var ids = (target.dataset.ids || "").split(",").map(Number);
tip.innerHTML = tipHTML(ids);
tip.setAttribute("aria-hidden", "false");
var r = target.getBoundingClientRect();
tip.classList.add("show");
// position after it has dimensions
var tw = tip.offsetWidth, th = tip.offsetHeight;
var left = r.left + r.width / 2 - tw / 2;
left = Math.max(10, Math.min(left, window.innerWidth - tw - 10));
var top = r.top - th - 10;
if (top < 10) top = r.bottom + 10;
tip.style.left = left + "px";
tip.style.top = top + "px";
}
function hideTip() {
tip.classList.remove("show");
tip.setAttribute("aria-hidden", "true");
}
document.addEventListener("mouseover", function (e) {
var a = e.target.closest && e.target.closest(".cref a");
if (a) { clearTimeout(tipHideTimer); showTip(a); }
});
document.addEventListener("mouseout", function (e) {
var a = e.target.closest && e.target.closest(".cref a");
if (a) { tipHideTimer = setTimeout(hideTip, 120); }
});
document.addEventListener("focusin", function (e) {
if (e.target.closest && e.target.closest(".cref a")) showTip(e.target);
});
document.addEventListener("focusout", function (e) {
if (e.target.closest && e.target.closest(".cref a")) hideTip();
});
window.addEventListener("scroll", hideTip, { passive: true });
/* ---- click inline cite -> smooth scroll + highlight ---- */
document.addEventListener("click", function (e) {
var a = e.target.closest && e.target.closest(".cref a");
if (!a) return;
e.preventDefault();
hideTip();
var first = (a.dataset.ids || "").split(",")[0];
var li = document.getElementById("ref-" + first);
if (li) {
li.scrollIntoView({ behavior: "smooth", block: "center" });
li.classList.remove("ref-target");
void li.offsetWidth;
li.classList.add("ref-target");
setTimeout(function () { li.classList.remove("ref-target"); }, 1500);
}
});
// keyboard activate
document.addEventListener("keydown", function (e) {
if ((e.key === "Enter" || e.key === " ") && e.target.closest && e.target.closest(".cref a")) {
e.preventDefault();
e.target.click();
}
});
/* ---- BibTeX ---- */
function bibKey(r) {
var first = r.authors.split(",")[0].replace(/[^A-Za-z]/g, "");
return first + r.year;
}
function toBibTeX(r) {
var entryType = r.type === "Methods" ? "article" : "article";
return "@" + entryType + "{" + bibKey(r) + ",\n" +
" author = {" + r.authors.replace(/&/g, "and") + "},\n" +
" title = {" + r.title.replace(/\.$/, "") + "},\n" +
" journal = {" + r.venue + "},\n" +
" year = {" + r.year + "},\n" +
" volume = {" + r.vol + "},\n" +
" pages = {" + r.pages.replace(/–/g, "--") + "},\n" +
" doi = {" + r.doi + "}\n" +
"}";
}
function plainCite(r) {
return r.authors + " (" + r.year + "). " + r.title + " " + r.venue + ", " +
r.vol + ", " + r.pages + ". https://doi.org/" + r.doi;
}
/* ---- render references list ---- */
var listEl = $("#refList");
REFS.forEach(function (r) {
var li = document.createElement("li");
li.className = "ref-item";
li.id = "ref-" + r.id;
var badges = '<span class="badge badge-type">' + r.type + "</span>";
if (r.oa) badges += '<span class="badge badge-oa">Open Access</span>';
li.innerHTML =
'<div class="ref-num">' + r.id + "</div>" +
'<div class="ref-body">' +
'<p class="ref-cite">' +
'<span class="ref-authors">' + r.authors + "</span> (" +
'<span class="ref-year">' + r.year + "</span>). " +
'<span class="ref-title">' + r.title + "</span> " +
'<span class="ref-venue">' + r.venue + "</span>, " + r.vol + ", " + r.pages + "." +
"</p>" +
'<div class="ref-meta">' +
badges +
'<a class="doi" href="https://doi.org/' + r.doi + '" target="_blank" rel="noopener">doi:' + r.doi + "</a>" +
'<span class="ref-actions">' +
'<button class="mini" type="button" data-act="cite" data-id="' + r.id + '">Cite</button>' +
'<button class="mini" type="button" data-act="copy" data-id="' + r.id + '">Copy</button>' +
"</span>" +
"</div>" +
"</div>";
listEl.appendChild(li);
});
/* ---- per-entry buttons ---- */
listEl.addEventListener("click", function (e) {
var btn = e.target.closest("button[data-act]");
if (!btn) return;
var r = byId[parseInt(btn.dataset.id, 10)];
if (!r) return;
if (btn.dataset.act === "cite") {
copyText(toBibTeX(r)).then(
function () { toast("BibTeX [" + r.id + "] copied"); },
function () { toast("Copy failed"); }
);
} else {
copyText(plainCite(r)).then(
function () { toast("Citation [" + r.id + "] copied"); },
function () { toast("Copy failed"); }
);
}
});
/* ---- copy all bibtex ---- */
$("#copyAllBib").addEventListener("click", function () {
var all = REFS.map(toBibTeX).join("\n\n");
copyText(all).then(
function () { toast("All " + REFS.length + " BibTeX entries copied"); },
function () { toast("Copy failed"); }
);
});
/* ---- style toggle ---- */
var seg = $("#styleSeg");
var segBtns = $$(".seg-btn", seg);
function setStyle(style, focusBtn) {
currentStyle = style;
segBtns.forEach(function (b) {
var on = b.dataset.style === style;
b.classList.toggle("is-active", on);
b.setAttribute("aria-checked", on ? "true" : "false");
b.tabIndex = on ? 0 : -1;
if (on && focusBtn) b.focus();
});
renderCitations();
hideTip();
}
seg.addEventListener("click", function (e) {
var b = e.target.closest(".seg-btn");
if (b) { setStyle(b.dataset.style); toast("Style: " + b.dataset.style.replace("-", "–")); }
});
seg.addEventListener("keydown", function (e) {
var idx = segBtns.indexOf(document.activeElement);
if (idx < 0) return;
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
setStyle(segBtns[(idx + 1) % segBtns.length].dataset.style, true);
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
setStyle(segBtns[(idx - 1 + segBtns.length) % segBtns.length].dataset.style, true);
}
});
segBtns.forEach(function (b) { b.tabIndex = b.classList.contains("is-active") ? 0 : -1; });
/* ---- init ---- */
renderCitations();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>References + Inline Citations</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=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#article">Skip to article</a>
<div class="page">
<header class="masthead">
<div class="masthead-inner">
<p class="venue">Journal of Computational Ecology <span class="vol">· Vol. 14 · No. 3 · pp. 218–241</span></p>
<div class="cite-style-bar" role="group" aria-label="Citation style">
<span class="cite-style-label">Citation style</span>
<div class="seg" id="styleSeg" role="radiogroup" aria-label="Inline citation format">
<button class="seg-btn is-active" role="radio" aria-checked="true" data-style="numeric">Numeric <span class="seg-eg">[1]</span></button>
<button class="seg-btn" role="radio" aria-checked="false" data-style="author-year">Author–year <span class="seg-eg">(Smith, 2024)</span></button>
<button class="seg-btn" role="radio" aria-checked="false" data-style="superscript">Superscript <span class="seg-eg">¹</span></button>
</div>
</div>
</div>
</header>
<main id="article" class="article">
<article>
<p class="kicker">Original Research · Open Access</p>
<h1>Microclimate buffering by canopy density in fragmented temperate forests</h1>
<p class="byline">
<span class="author">L. Okonkwo</span><sup>1</sup>,
<span class="author">M. Vasquez-Reyes</span><sup>1,2</sup>,
<span class="author">H. Tanaka</span><sup>3</sup> &
<span class="author">E. Bauer</span><sup>2</sup>
</p>
<p class="affil">
<sup>1</sup> Dept. of Landscape Ecology, Northfield Institute ·
<sup>2</sup> Centre for Climate Resilience, Univ. of Hallworth ·
<sup>3</sup> Forest Dynamics Lab, Kyobashi Polytechnic
</p>
<section class="abstract" aria-label="Abstract">
<h2>Abstract</h2>
<p>
Forest fragmentation alters the thermal environment experienced by understorey
organisms. We quantified how canopy leaf-area density attenuates sub-canopy
temperature extremes across 42 plots spanning an edge-to-interior gradient.
</p>
</section>
<h2>1. Introduction</h2>
<p>
Canopy structure is a primary control on the sub-canopy microclimate, mediating both
incoming shortwave radiation and turbulent heat exchange<span class="cref" data-cite="1"></span>.
Prior syntheses report buffering of daytime maxima by 2–5 °C beneath dense
canopies relative to clearings<span class="cref" data-cite="2-4"></span>, yet the
dependence of buffering strength on leaf-area density (LAD) remains poorly resolved
in fragmented landscapes. Edge effects can penetrate tens of metres into remnant
stands, eroding interior conditions<span class="cref" data-cite="5"></span>, and the
thermal safety margins of cold-adapted understorey species are correspondingly
narrowed<span class="cref" data-cite="6,8"></span>.
</p>
<p>
Following the radiative-transfer framing of Okonkwo & Bauer<span class="cref" data-cite="7"></span>,
we model the sub-canopy daily maximum as a function of LAD and edge distance. The
attenuation of above-canopy forcing <em>T</em><sub>open</sub> is expressed as:
</p>
<figure class="eq" role="figure" aria-label="Equation 1">
<div class="eq-body">
Δ<em>T</em><sub>max</sub> = <em>T</em><sub>open</sub> − <em>T</em><sub>sub</sub> = <em>β</em><sub>0</sub>
<span class="op">(</span>1 − <span class="op">e</span><sup>−<em>k</em>·LAD</sup><span class="op">)</span>
+ <em>γ</em>·<span class="op">log</span>(<em>d</em><sub>edge</sub>)
</div>
<span class="eq-num">(1)</span>
</figure>
<p>
where <em>k</em> is the extinction coefficient and <em>d</em><sub>edge</sub> the distance
to the nearest forest edge. Comparable formulations have been validated in boreal
systems<span class="cref" data-cite="9,10"></span> and against eddy-covariance towers
in mixed temperate stands<span class="cref" data-cite="11"></span>.
</p>
<figure class="fig" role="figure" aria-labelledby="fig1cap">
<div class="fig-art" aria-hidden="true">
<svg viewBox="0 0 460 200" preserveAspectRatio="none">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1a4f8a" stop-opacity="0.18"/>
<stop offset="1" stop-color="#1a4f8a" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M0 170 C 70 60, 150 150, 220 90 S 360 40, 460 70 L460 200 L0 200 Z" fill="url(#g1)"/>
<path d="M0 170 C 70 60, 150 150, 220 90 S 360 40, 460 70" fill="none" stroke="#1a4f8a" stroke-width="2.5"/>
<path d="M0 184 C 90 120, 180 178, 280 140 S 400 110, 460 128" fill="none" stroke="#0f7d78" stroke-width="2.5" stroke-dasharray="6 5"/>
<line x1="0" y1="196" x2="460" y2="196" stroke="rgba(15,27,45,0.2)"/>
</svg>
</div>
<figcaption id="fig1cap"><strong>Figure 1.</strong> Modelled daytime buffering Δ<em>T</em><sub>max</sub> (solid, blue) against leaf-area density, with the measured envelope (dashed, teal). Fictional synthetic data shown for illustration.</figcaption>
</figure>
<h2>2. Results</h2>
<p>
Buffering increased monotonically with LAD, saturating near 4.8 °C above
LAD ≈ 3.2 m² m⁻³ (<em>R</em>² = 0.81, <em>n</em> = 42). Edge
plots within 20 m showed 1.9 °C weaker buffering than interior plots, consistent
with documented edge penetration depths<span class="cref" data-cite="5,12"></span>.
</p>
<div class="tbl-wrap" role="region" aria-label="Plot summary table" tabindex="0">
<table>
<caption><strong>Table 1.</strong> Mean buffering by canopy class (fictional).</caption>
<thead>
<tr><th scope="col">Canopy class</th><th scope="col">LAD (m² m⁻³)</th><th scope="col">Δ<em>T</em><sub>max</sub> (°C)</th><th scope="col"><em>n</em></th></tr>
</thead>
<tbody>
<tr><td>Open</td><td>0.4</td><td>0.6</td><td>9</td></tr>
<tr><td>Sparse</td><td>1.3</td><td>2.1</td><td>11</td></tr>
<tr><td>Moderate</td><td>2.4</td><td>3.7</td><td>13</td></tr>
<tr><td>Dense</td><td>3.6</td><td>4.8</td><td>9</td></tr>
</tbody>
</table>
</div>
</article>
<section class="refs" id="references" aria-label="References">
<div class="refs-head">
<h2>References</h2>
<button class="btn btn-ghost" id="copyAllBib" type="button">Copy all BibTeX</button>
</div>
<ol class="ref-list" id="refList"></ol>
</section>
</main>
<footer class="foot">
<p>Fictional manuscript layout · Journal of Computational Ecology (illustrative)</p>
</footer>
</div>
<div class="tip" id="tip" role="tooltip" aria-hidden="true"></div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>References + Inline Citations
A complete journal-article reading surface rendered in the institutional house style — Source Serif 4 for prose, Inter for the chrome, and JetBrains Mono for numbers, DOIs, and the display equation. Inline citations are embedded as lightweight [1], [2–4], and [6,8] markers woven through the introduction and results. Hovering or keyboard-focusing a marker raises a dark tooltip previewing each cited source; clicking it smooth-scrolls to the matching numbered entry in the reference list and flashes a highlight so the eye lands in the right place.
A segmented control in the sticky masthead switches the visible citation format across the whole document — numeric brackets, parenthetical author-year (Okonkwo et al., 2023), or compact superscripts — re-rendering every marker in place while preserving the same underlying source links. The control is a proper radiogroup, navigable with arrow keys.
Each reference entry lists authors, title, venue, volume, pages, and year, an Open Access or article-type badge, and a resolvable DOI link. Per-entry buttons copy a formatted plain-text citation or a ready-to-paste BibTeX record, and a Copy all BibTeX action exports the full bibliography at once, each confirmed by a transient toast. The layout reflows to a single column with horizontally scrolling tables down to 360px and honours reduced-motion preferences.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.