Added a new target for make called norm, and cleaned up backups
This commit is contained in:
@@ -1,335 +0,0 @@
|
||||
|
||||
|
||||
/* Event listener function for the COPY BUTTON */
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.querySelectorAll("pre.src").forEach(function (codeBlock) {
|
||||
const button = document.createElement("button");
|
||||
button.innerText = "Copy";
|
||||
button.className = "copy-btn";
|
||||
|
||||
// Append button inside <pre>
|
||||
codeBlock.appendChild(button);
|
||||
|
||||
button.addEventListener("click", function () {
|
||||
const text = codeBlock.innerText.replace(button.innerText, ""); // exclude button text
|
||||
navigator.clipboard.writeText(text.trim()).then(() => {
|
||||
button.innerText = "Copied!";
|
||||
setTimeout(() => (button.innerText = "Copy"), 1500);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Event listener for footnotes and sidenotes*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
|
||||
const sup = ref.closest("sup") || ref;
|
||||
// idempotent: don't insert twice
|
||||
if (sup.nextElementSibling && sup.nextElementSibling.classList?.contains("footnote-sidenote")) return;
|
||||
|
||||
const targetId = ref.getAttribute("href").replace(/^#/, ""); // works for fn.2 or fn2
|
||||
|
||||
const anchor = document.getElementById(targetId);
|
||||
if (!anchor) return;
|
||||
|
||||
const footdef = anchor.closest(".footdef") || anchor.parentElement;
|
||||
if (!footdef) return;
|
||||
|
||||
// 1) Prefer leaf paragraphs to avoid div+p duplication
|
||||
let paras = footdef.querySelectorAll("p.footpara");
|
||||
if (!paras.length) {
|
||||
// fallback: any .footpara elements that don't contain another .footpara
|
||||
paras = footdef.querySelectorAll(".footpara:not(:has(.footpara))");
|
||||
}
|
||||
|
||||
// 2) Build HTML, de-duplicating by text content
|
||||
let parts = [];
|
||||
if (paras.length) {
|
||||
const seen = new Set();
|
||||
parts = Array.from(paras).map(p => {
|
||||
const txt = p.textContent.trim().replace(/\s+/g, " ");
|
||||
if (seen.has(txt)) return "";
|
||||
seen.add(txt);
|
||||
return p.innerHTML.trim();
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
// 3) Fallback: clean full block if no paras found
|
||||
if (!parts.length) {
|
||||
const clone = footdef.cloneNode(true);
|
||||
clone.querySelectorAll("sup.footnum, a[role='doc-backlink']").forEach(n => n.remove());
|
||||
parts = [clone.innerHTML.trim()];
|
||||
}
|
||||
|
||||
// 4) Insert the sidenote
|
||||
const sn = document.createElement("span");
|
||||
sn.className = "sidenote footnote-sidenote";
|
||||
sn.setAttribute("data-fn", (ref.textContent || "").trim());
|
||||
sn.innerHTML = parts.join(" ");
|
||||
|
||||
sup.insertAdjacentElement("afterend", sn);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Function for setting the theme */
|
||||
(function(){
|
||||
const root = document.documentElement;
|
||||
const storageKey = "theme";
|
||||
const saved = localStorage.getItem(storageKey);
|
||||
if (saved === "dark" || saved === "light") {
|
||||
root.setAttribute("data-theme", saved);
|
||||
}
|
||||
const btn = document.getElementById("theme-toggle");
|
||||
if (!btn) return;
|
||||
btn.addEventListener("click", () => {
|
||||
const current = root.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
// If no current (auto), assume we’re toggling to dark first
|
||||
const target = current ? next : "dark";
|
||||
root.setAttribute("data-theme", target);
|
||||
localStorage.setItem(storageKey, target);
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
// Simple, timezone-safe if you pass UTC (…Z) in the datetime
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const els = document.querySelectorAll('time.countdown');
|
||||
if (!els.length) return;
|
||||
|
||||
const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
|
||||
|
||||
const render = (el) => {
|
||||
const raw = el.getAttribute('datetime');
|
||||
const label = el.dataset.label || '';
|
||||
const target = new Date(raw); // Prefer ISO like 2025-12-31T00:00:00Z
|
||||
if (isNaN(target)) { el.textContent = '—'; return; }
|
||||
|
||||
const now = new Date();
|
||||
let diff = target - now;
|
||||
|
||||
if (diff <= 0) {
|
||||
el.textContent = `${label ? label + ' ' : ''}today`;
|
||||
el.classList.add('expired');
|
||||
return;
|
||||
}
|
||||
|
||||
const d = Math.floor(diff / 86400000); diff -= d * 86400000;
|
||||
const h = Math.floor(diff / 3600000); diff -= h * 3600000;
|
||||
const m = Math.floor(diff / 60000); diff -= m * 60000;
|
||||
const s = Math.floor(diff / 1000);
|
||||
|
||||
const pieces = [];
|
||||
if (d) pieces.push(plural(d, 'day'));
|
||||
pieces.push(`${h}h ${m}m ${s}s`);
|
||||
|
||||
el.textContent = `${label ? label + ' in : ' : ''}${pieces.join(' ')}`;
|
||||
};
|
||||
|
||||
const tick = () => els.forEach(render);
|
||||
tick();
|
||||
setInterval(tick, 1000); // update every second
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* Event listener for scrolling and changing the active label on the TOC */
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const toc = document.querySelector("#text-table-of-contents");
|
||||
if (!toc) { console.warn("No #text-table-of-contents found"); return; }
|
||||
|
||||
const links = toc.querySelectorAll('a[href^="#"]'); // '^=' is a starts with operator.
|
||||
// <a href="#introduction">Intro</a> matches
|
||||
if (!links.length) { console.warn("No ToC links found"); return; }
|
||||
|
||||
// Map: id -> link
|
||||
const linkById = new Map();
|
||||
links.forEach(a => {
|
||||
const id = decodeURIComponent(a.getAttribute("href").slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (el) linkById.set(id, a);
|
||||
});
|
||||
if (!linkById.size) { console.warn("No matching headings with IDs"); return; }
|
||||
|
||||
// Headings to observe (h2–h4 usually)
|
||||
const headings = [...document.querySelectorAll("h2[id], h3[id], h4[id]")]
|
||||
.filter(h => linkById.has(h.id));
|
||||
|
||||
// Helper to mark active
|
||||
const setActive = (id) => {
|
||||
links.forEach(a => {
|
||||
const active = a.getAttribute("href") === `#${id}`;
|
||||
a.classList.toggle("is-active", active);
|
||||
if (active) a.setAttribute("aria-current", "true");
|
||||
else a.removeAttribute("aria-current");
|
||||
});
|
||||
};
|
||||
|
||||
// Calculate sticky header offset in px
|
||||
const headerOffsetPx = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
|
||||
// Track visible headings (id -> distance from top)
|
||||
const visible = new Map();
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
const id = entry.target.id;
|
||||
if (entry.isIntersecting) {
|
||||
// How far from the top (after header offset)
|
||||
const dist = entry.target.getBoundingClientRect().top - headerOffsetPx;
|
||||
visible.set(id, dist);
|
||||
} else {
|
||||
visible.delete(id);
|
||||
}
|
||||
});
|
||||
|
||||
if (visible.size) {
|
||||
// Choose the heading closest to the top (>= -headerOffset)
|
||||
const topMost = [...visible.entries()]
|
||||
.sort((a,b) => Math.abs(a[1]) - Math.abs(b[1]))[0][0];
|
||||
setActive(topMost);
|
||||
// console.log("Active:", topMost, visible);
|
||||
}
|
||||
}, {
|
||||
root: null, // track relative to viewport
|
||||
rootMargin: `-${headerOffsetPx}px 0px -70% 0px`,
|
||||
threshold: [0, 0.01, 0.1] // fire as soon as it enters
|
||||
});
|
||||
|
||||
headings.forEach(h => observer.observe(h));
|
||||
|
||||
// Initial highlight (in case load mid‑page)
|
||||
let bestId = null, bestDist = Infinity;
|
||||
headings.forEach(h => {
|
||||
const top = h.getBoundingClientRect().top - headerOffsetPx;
|
||||
const dist = top < 0 ? Math.abs(top) : top + 1e6;
|
||||
if (dist < bestDist) { bestDist = dist; bestId = h.id; }
|
||||
});
|
||||
if (bestId) setActive(bestId);
|
||||
|
||||
// smooth-scroll ToC clicks
|
||||
toc.addEventListener("click", (e) => {
|
||||
const a = e.target.closest('a[href^="#"]');
|
||||
if (!a) return;
|
||||
const id = decodeURIComponent(a.hash.slice(1));
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
e.preventDefault();
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
el.setAttribute("tabindex", "-1");
|
||||
el.focus({ preventScroll: true });
|
||||
history.pushState(null, "", `#${id}`);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const link = e.target.closest("a");
|
||||
if (!link) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href) return;
|
||||
|
||||
// Ignore pure fragment links (#foo)
|
||||
if (href.startsWith("#")) return;
|
||||
|
||||
// Resolve relative → absolute
|
||||
const url = new URL(href, window.location.href);
|
||||
|
||||
// Only intercept same-origin HTML pages
|
||||
if (url.origin !== window.location.origin) return;
|
||||
if (!url.pathname.endsWith(".html")) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
pushPane(url.pathname + url.hash);
|
||||
});
|
||||
|
||||
async function pushPane(urlWithHash) {
|
||||
const [url, hash] = urlWithHash.split("#");
|
||||
|
||||
const track = document.querySelector(".stack-track");
|
||||
|
||||
const existing = [...track.children].find(p => p.dataset.url === urlWithHash);
|
||||
if (existing) {
|
||||
existing.scrollIntoView({ behavior: "smooth", inline: "end" });
|
||||
return;
|
||||
}
|
||||
const res = await fetch(url);
|
||||
const html = await res.text();
|
||||
const doc = new DOMParser().parseFromString(html, "text/html");
|
||||
|
||||
const content = doc.querySelector("#content");
|
||||
if (!content) return;
|
||||
|
||||
const pane = document.createElement("article");
|
||||
pane.className = "stack-pane";
|
||||
pane.dataset.url = urlWithHash;
|
||||
|
||||
pane.innerHTML = `
|
||||
<div class="pane-header">
|
||||
<button class="pane-close" aria-label="Close pane">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
pane.appendChild(content);
|
||||
track.appendChild(pane);
|
||||
pane.scrollIntoView({ behavior: "smooth", inline: "end" });
|
||||
|
||||
// Scroll to the anchor if present
|
||||
if (hash) {
|
||||
requestAnimationFrame(() => {
|
||||
const target = pane.querySelector(`#${CSS.escape(hash)}`);
|
||||
target?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
}
|
||||
pane.querySelector(".pane-close").addEventListener("click", () => {
|
||||
pane.remove();
|
||||
updateURL();
|
||||
});
|
||||
|
||||
updateURL();
|
||||
}
|
||||
|
||||
function updateURL() {
|
||||
const panes = [...document.querySelectorAll(".stack-pane")];
|
||||
|
||||
const urls = panes.map(p => p.dataset.url);
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
params.set("stackedNotes", urls.join("|"));
|
||||
|
||||
history.replaceState({}, "", "?" + params.toString());
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", async () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const stack = params.get("stackedNotes");
|
||||
if (!stack) return;
|
||||
|
||||
const urls = stack.split("|");
|
||||
|
||||
// First pane is already rendered by Org
|
||||
const base = urls[0];
|
||||
const current = window.location.pathname + window.location.hash;
|
||||
|
||||
// Only continue if URL matches base
|
||||
if (base !== current && !base.startsWith(window.location.pathname)) {
|
||||
console.warn("Stack base mismatch:", base, current);
|
||||
return;
|
||||
}
|
||||
|
||||
// Load remaining panes sequentially
|
||||
for (const url of urls.slice(1)) {
|
||||
await pushPane(url);
|
||||
}
|
||||
|
||||
// Scroll to last pane
|
||||
const panes = document.querySelectorAll(".stack-pane");
|
||||
panes[panes.length - 1]?.scrollIntoView({
|
||||
behavior: "auto",
|
||||
inline: "end"
|
||||
});
|
||||
});
|
||||
@@ -1,34 +0,0 @@
|
||||
let index = [];
|
||||
|
||||
fetch("/search-index.json")
|
||||
.then(r => r.json())
|
||||
.then(data => index = data);
|
||||
|
||||
const box = document.getElementById("search-box");
|
||||
const results = document.getElementById("search-results");
|
||||
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const searchBox = document.getElementById("search-box");
|
||||
const results = document.getElementById("search-results");
|
||||
|
||||
});
|
||||
|
||||
|
||||
box.addEventListener("input", () => {
|
||||
const q = box.value.toLowerCase();
|
||||
results.innerHTML = "";
|
||||
|
||||
if (q.length < 2) return;
|
||||
|
||||
index
|
||||
.filter(e =>
|
||||
e.title.toLowerCase().includes(q)
|
||||
)
|
||||
//.slice(0, 10)
|
||||
.forEach(e => {
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = `<a href="${e.url}">${e.title}</a>`;
|
||||
results.appendChild(div);
|
||||
});
|
||||
});
|
||||
@@ -1,106 +0,0 @@
|
||||
@media (max-width: 600px){
|
||||
.banner-header{ flex-direction: column; align-items: center; text-align: center; }
|
||||
.banner-logo{ margin: 0 0 .5rem 0; }
|
||||
nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; }
|
||||
|
||||
|
||||
.theme-toggle {
|
||||
position: static;
|
||||
order: 2;
|
||||
margin-left: .5rem;
|
||||
padding: .3rem .6rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.banner-header {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.banner-header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
body.no-sidenotes {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#mobile-move-panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
:root:not([data-theme="light"]){
|
||||
--bg: #0f1115;
|
||||
--fg: #e6e6e6;
|
||||
--link: #8ab4ff;
|
||||
--heading: #9ecbff;
|
||||
--code-bg: #1a1d24;
|
||||
|
||||
--note-color: #c2c7cf;
|
||||
--note-bg: transparent;
|
||||
|
||||
--border: #2a2f3a;
|
||||
--chip-bg: #1f2330;
|
||||
--chip-fg: #cfd3da;
|
||||
--muted: #a9b0bb;
|
||||
}
|
||||
.countdown-wrap {
|
||||
color: var(--fg, #ddd);
|
||||
}
|
||||
time.countdown {
|
||||
color: var(--accent, #7abfff);
|
||||
background: color-mix(in srgb, var(--accent, #7abfff) 15%, transparent);
|
||||
box-shadow: 0 0 6px rgba(255,255,255,0.05);
|
||||
}
|
||||
time.countdown.expired {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1250px){
|
||||
#preamble.status{
|
||||
padding-right: var(--body-pad);
|
||||
}
|
||||
|
||||
#content.content{
|
||||
padding-right: var(--body-pad);
|
||||
}
|
||||
.sidenote,
|
||||
.marginnote{
|
||||
float: none;
|
||||
clear: both;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 0.5rem 0 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid rgba(0,0,0,.08);
|
||||
margin-right: 0;
|
||||
}
|
||||
.fullwidth{
|
||||
max-width: calc(100vw - 2 * var(--body-pad));
|
||||
}
|
||||
.sidenote, .marginnote{
|
||||
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
||||
}
|
||||
.sidenote .mn-img,
|
||||
.marginnote .mn-img{
|
||||
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
|
||||
}
|
||||
|
||||
#table-of-contents{
|
||||
float: none;
|
||||
position: static;
|
||||
width: auto;
|
||||
margin: 0 0 1rem;
|
||||
padding: .5rem .75rem;
|
||||
border-right: 0;
|
||||
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
||||
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,647 +0,0 @@
|
||||
/* =========================================================
|
||||
TOKENS / CUSTOM PROPERTIES
|
||||
========================================================= */
|
||||
|
||||
:root {
|
||||
--gutter: 2rem;
|
||||
--margin: 420px;
|
||||
--body-pad: 1rem;
|
||||
|
||||
--content-min: 60ch;
|
||||
--content-max: 880px;
|
||||
--content: clamp(
|
||||
var(--content-min),
|
||||
calc(100vi - (2 * var(--body-pad)) - (2 * (var(--margin) + var(--gutter)))),
|
||||
var(--content-max)
|
||||
);
|
||||
|
||||
--bleed: 48px;
|
||||
--fullwidth-cap: 860px;
|
||||
|
||||
--bg: #fff;
|
||||
--page-bg: #fafafc;
|
||||
--fg: #000;
|
||||
|
||||
--heading: #004c99;
|
||||
--link: #0a84ff;
|
||||
--link-2: var(--link);
|
||||
|
||||
--code-bg: #f0f0f0;
|
||||
|
||||
--border: #d7d7d7;
|
||||
--active-toc: #cacaca;
|
||||
|
||||
--muted: #666;
|
||||
--note-color: #555;
|
||||
--note-bg: transparent;
|
||||
|
||||
--chip-bg: #f0f0f0;
|
||||
--chip-fg: #444;
|
||||
|
||||
/* Compatibility aliases (you reference these later) */
|
||||
--border-color: var(--border);
|
||||
--text-color: var(--fg);
|
||||
--muted-text: var(--muted);
|
||||
--link-color: var(--link);
|
||||
--link-hover-color: var(--fg);
|
||||
--bg-alt: #fafafa;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
BASE / TYPOGRAPHY
|
||||
========================================================= */
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--page-bg);
|
||||
color: var(--fg);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
|
||||
/* Keep your layout intent (column app shell) */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
PREAMBLE / HEADER
|
||||
========================================================= */
|
||||
|
||||
#preamble {
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#preamble .banner-header,
|
||||
#preamble #updated {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.banner-header {
|
||||
position: relative; /* anchor for Close All */
|
||||
display: flex;
|
||||
justify-content: center; /* center main group */
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.banner-logo {
|
||||
height: 80px;
|
||||
width: auto;
|
||||
margin-right: 1.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#updated {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#close-all {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
|
||||
padding: 0.25rem 0.5rem; /* smaller so it doesn’t dominate */
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#close-all:hover {
|
||||
color: var(--fg);
|
||||
border-color: var(--fg);
|
||||
}
|
||||
|
||||
.banner-header > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner-header {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#close-all {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* =========================================================
|
||||
CONTENT WRAPPER
|
||||
========================================================= */
|
||||
|
||||
#content.content {
|
||||
max-width: var(--content);
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
padding-left: var(--body-pad);
|
||||
padding-right: var(--body-pad);
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content .figure,
|
||||
#content img:not(.fullwidth) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
STACKED PANE LAYOUT
|
||||
========================================================= */
|
||||
|
||||
#stack-root {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex: 1 1 auto;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
|
||||
.stack-track {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stack-pane {
|
||||
flex: 0 0 auto;
|
||||
|
||||
width: clamp(420px, 33vw, 860px);
|
||||
max-width: 100vw;
|
||||
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
position: relative; /* needed for ::after positioning */
|
||||
background-color: var(--bg);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stack-pane::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.stack-pane:last-child {
|
||||
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Scrollbar (WebKit) */
|
||||
.stack-pane::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.stack-pane::-webkit-scrollbar-thumb {
|
||||
background-color: color-mix(in oklab, var(--fg) 25%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
PANE HEADER + CLOSE BUTTON
|
||||
========================================================= */
|
||||
|
||||
.pane-root {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.pane-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
background: inherit;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pane-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
color: var(--muted);
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
|
||||
.pane-close:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
FOOTER
|
||||
========================================================= */
|
||||
|
||||
footer {
|
||||
color: var(--fg);
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
|
||||
flex-shrink: 0;
|
||||
margin-top: 0;
|
||||
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
|
||||
/* If you want it sticky later, use:
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
*/
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
LISTS
|
||||
========================================================= */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 1rem 0 1.5rem 1.5rem;
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
position: relative;
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: var(--heading);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: list-counter;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol li {
|
||||
counter-increment: list-counter;
|
||||
position: relative;
|
||||
padding-left: 1.8em;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: counter(list-counter) ".";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: var(--heading);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
li::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
li ul li::before {
|
||||
content: "–";
|
||||
font-weight: normal;
|
||||
color: var(--note-color);
|
||||
}
|
||||
|
||||
li ol li::before {
|
||||
font-weight: normal;
|
||||
color: var(--note-color);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
EPIGRAPH
|
||||
========================================================= */
|
||||
|
||||
.epigraph {
|
||||
margin: 2rem auto;
|
||||
max-width: 80%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.epigraph blockquote {
|
||||
margin: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
border-left: 4px solid var(--heading);
|
||||
background-color: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
|
||||
color: var(--fg);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.epigraph blockquote footer {
|
||||
margin-top: 0.75rem;
|
||||
font-style: normal;
|
||||
font-size: 0.9em;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.epigraph blockquote cite {
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.epigraph blockquote::before,
|
||||
.epigraph blockquote::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
UTILITIES / MISC
|
||||
========================================================= */
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* bigger-picture.js controls */
|
||||
.bp-x {
|
||||
right: 72px;
|
||||
}
|
||||
.bp-next,
|
||||
.bp-prev {
|
||||
right: 8px;
|
||||
}
|
||||
.bp-prev {
|
||||
left: 8px;
|
||||
}
|
||||
.bp-wrap {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.bp-wrap.bp-fadeout {
|
||||
opacity: 0;
|
||||
}
|
||||
.bp-controls {
|
||||
padding-top: env(safe-area-inset-top, 0);
|
||||
padding-right: calc(env(safe-area-inset-right, 0) + 8px);
|
||||
}
|
||||
|
||||
/* code copy button */
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 0.4em;
|
||||
right: 0.4em;
|
||||
background-color: var(--code-bg);
|
||||
color: var(--heading);
|
||||
border: 1px solid var(--heading);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
BACKLINKS
|
||||
========================================================= */
|
||||
|
||||
.backlinks-section {
|
||||
margin-top: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
opacity: 0.95;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.backlinks-list {
|
||||
margin-top: 0.75rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.backlinks-list li {
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.backlinks-list li::before {
|
||||
content: "↩ ";
|
||||
opacity: 0.5;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.backlinks-list li a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--link);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
padding-bottom: 0.05em;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.backlinks-list li a:hover,
|
||||
.backlinks-list li a:focus {
|
||||
color: var(--fg);
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
SEARCH
|
||||
========================================================= */
|
||||
|
||||
.banner-search {
|
||||
position: relative;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
|
||||
background-color: var(--bg-alt);
|
||||
color: var(--fg);
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
border-color: var(--link);
|
||||
box-shadow: 0 0 0 2px rgba(42, 93, 176, 0.15);
|
||||
}
|
||||
|
||||
#search-box::placeholder {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.3rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
|
||||
max-height: 18rem;
|
||||
overflow-y: auto;
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#search-results > * {
|
||||
padding: 0.45rem 0.65rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#search-results > *:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#search-results > *:hover,
|
||||
#search-results > *.active {
|
||||
background-color: rgba(42, 93, 176, 0.08);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
RESPONSIVE
|
||||
========================================================= */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#stack-root {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.stack-track {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stack-pane {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
/* =========================================================
|
||||
FULLSCREEN PANE MODE
|
||||
========================================================= */
|
||||
|
||||
body.pane-fullscreen #stack-root {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.pane-fullscreen .stack-track {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.pane-fullscreen .stack-pane {
|
||||
width: 100% !important;
|
||||
max-width: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
body.pane-fullscreen .stack-pane::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Only the active fullscreen pane remains */
|
||||
body.pane-fullscreen .stack-pane:not(.is-fullscreen) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Optional: make content breathe more in fullscreen */
|
||||
body.pane-fullscreen #content.content {
|
||||
max-width: 900px;
|
||||
}
|
||||
Reference in New Issue
Block a user