zaine/org_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-publish on Sun 10 Aug 22:28:35 BST 2025

Browse Source
This commit is contained in:
Zaine Arch
2025-08-10 22:28:35 +01:00
parent a5da96d0ad
commit feb5ea7d5c
32 changed files with 631 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
output/assets/scripts/bigger-picture.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

138
output/assets/scripts/gallery-init.js Normal file
View File

@@ -0,0 +1,138 @@
document.addEventListener('DOMContentLoaded', () => {
if (typeof window.BiggerPicture !== 'function') {
console.error('[gallery-init] BiggerPicture not found. Check script path.');
return;
}
// 1) Wrap Org-exported images so they’re clickable
const imgs = document.querySelectorAll('.figure img, img.org-svg');
imgs.forEach((img) => {
if (img.closest('a')) return; // already wrapped
const a = document.createElement('a');
const href = img.currentSrc || img.src;
a.href = href;
a.dataset.img = href; // lets BP pre-size/raster slides
a.dataset.alt = img.alt || '';
const setDims = () => {
a.dataset.width = img.naturalWidth || img.width || 1920;
a.dataset.height = img.naturalHeight || img.height || 1080;
};
if (img.complete) setDims(); else img.addEventListener('load', setDims);
img.style.cursor = 'zoom-in';
img.parentElement.insertBefore(a, img);
a.appendChild(img);
});
// 2) One global BP instance
const bp = BiggerPicture({ target: document.body });
// SVG pan/zoom handle
let activePanZoom = null;
const destroyPanZoom = () => { try { activePanZoom?.destroy(); } catch(_){} activePanZoom = null; };
// 3) Build galleries per content container
const containers = document.querySelectorAll('main, article, .content, body');
containers.forEach((container) => {
const links = Array.from(container.querySelectorAll('.figure a, a:has(img.org-svg)'));
if (!links.length) return;
// Start the lightbox on click
links.forEach((link, index) => {
link.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll(".theme-toggle").forEach(el => {
el.classList.add("hidden");
});
bp.open({
// IMPORTANT: pass the anchor ELEMENTS, not custom objects
items: links,
el: link,
caption: (el) => el.querySelector('img')?.alt || el.title || '',
maxZoom: 40, // for raster images (PNG/JPG); SVG handled separately
// Fade-out polish + cleanup
onClose(containerEl) {
destroyPanZoom();
if (containerEl) containerEl.classList.add('bp-fadeout');
const themeToggle = document.querySelector(".theme-toggle");
if (themeToggle) {
themeToggle.classList.remove("hidden");
}
},
// Called once after open and on every slide change
onOpen(containerEl) { enhanceSVG(containerEl); },
onUpdate(containerEl){ enhanceSVG(containerEl); }
});
});
});
});
// 4) If current slide is an SVG, swap to inline + enable svg-pan-zoom
async function enhanceSVG(containerEl) {
try {
destroyPanZoom();
const imgEl = containerEl.querySelector('.bp-img img');
if (!imgEl) return;
const src = imgEl.currentSrc || imgEl.src || '';
const isSVG = src.toLowerCase().endsWith('.svg');
const htmlLayer = containerEl.querySelector('.bp-html');
if (!isSVG || !htmlLayer) {
// ensure any previous holder is removed and bitmap is visible
const old = htmlLayer?.querySelector('.bp-svg-holder');
if (old) old.remove();
imgEl.style.visibility = '';
return;
}
// Create/clear holder
let holder = htmlLayer.querySelector('.bp-svg-holder');
if (!holder) {
holder = document.createElement('div');
holder.className = 'bp-svg-holder';
holder.style.maxWidth = '95vw';
holder.style.maxHeight = '95vh';
htmlLayer.appendChild(holder);
}
holder.innerHTML = '';
// Hide the bitmap so only the inline SVG shows
imgEl.style.visibility = 'hidden';
// Inline the SVG
const res = await fetch(src, { cache: 'force-cache' });
const text = await res.text();
holder.innerHTML = text;
const svg = holder.querySelector('svg');
if (!svg) { imgEl.style.visibility = ''; return; }
svg.style.maxWidth = '95vw';
svg.style.maxHeight = '95vh';
svg.style.display = 'block';
if (typeof window.svgPanZoom === 'function') {
activePanZoom = svgPanZoom(svg, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
minZoom: 0.05,
maxZoom: 400, // effectively "unlimited"
zoomScaleSensitivity: 0.25,
dblClickZoomEnabled: true
});
// Keep wheel inside lightbox
holder.addEventListener('wheel', (e) => e.stopPropagation(), { passive: true });
} else {
console.warn('[gallery-init] svg-pan-zoom not loaded');
}
} catch (err) {
console.error('[gallery-init] SVG enhance failed:', err);
}
}
});

27
output/assets/scripts/svg-pan-zoom.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
output/assets/styles/bigger-picture.min.css vendored Normal file
View File

@@ -0,0 +1,8 @@
/**
* Minified by jsDelivr using clean-css v5.3.2.
* Original file: /npm/bigger-picture@1.1.19/dist/bigger-picture.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
@keyframes bp-fadein{from{opacity:.01}to{opacity:1}}@keyframes bp-bar{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes bp-o{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bp-wrap{top:0;left:0;width:100%;height:100%;position:fixed;z-index:999;contain:strict;touch-action:none;-webkit-tap-highlight-color:transparent}.bp-wrap>div:first-child{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);animation:bp-fadein .48s cubic-bezier(.215,.61,.355,1)}.bp-vid audio{position:absolute;left:14px;width:calc(100% - 28px);bottom:14px;height:50px}.bp-inner{top:0;left:0;width:100%;height:100%;position:absolute;display:flex}.bp-html{display:contents}.bp-html>:first-child{margin:auto}.bp-img-wrap{top:0;left:0;width:100%;height:100%;position:absolute;contain:strict}.bp-img-wrap .bp-canzoom{cursor:zoom-in}.bp-img-wrap .bp-drag{cursor:grabbing}.bp-close{contain:layout size}.bp-img{position:absolute;top:50%;left:50%;user-select:none;background-size:100% 100%}.bp-img div,.bp-img img{position:absolute;top:0;left:0;width:100%;height:100%}.bp-img .bp-o{display:none}.bp-zoomed .bp-img:not(.bp-drag){cursor:grab}.bp-zoomed .bp-cap{opacity:0;animation:none!important}.bp-zoomed.bp-small .bp-controls{opacity:0}.bp-zoomed.bp-small .bp-controls button{pointer-events:none}.bp-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;text-align:left;transition:opacity .3s;animation:bp-fadein .3s}.bp-controls button{pointer-events:auto;cursor:pointer;position:absolute;border:0;background:rgba(0,0,0,.15);opacity:.9;transition:all .1s;contain:content}.bp-controls button:hover{background-color:rgba(0,0,0,.2);opacity:1}.bp-controls svg{fill:#fff}.bp-count{position:absolute;color:rgba(255,255,255,.9);line-height:1;margin:16px;height:50px;width:100px}.bp-next,.bp-prev{top:50%;right:0;margin-top:-32px;height:64px;width:58px;border-radius:3px 0 0 3px}.bp-next:hover:before,.bp-prev:hover:before{transform:translateX(-2px)}.bp-next:before,.bp-prev:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");position:absolute;left:7px;top:9px;width:46px;transition:all .2s}.bp-prev{right:auto;left:0;transform:scalex(-1)}.bp-x{top:0;right:0;height:55px;width:58px;border-radius:0 0 0 3px}.bp-x:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M24 10l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6z'/%3E%3C/svg%3E");position:absolute;width:37px;top:8px;right:10px}.bp-if,.bp-vid{position:relative;margin:auto;background:#000;background-size:100% 100%}.bp-if div,.bp-if iframe,.bp-if video,.bp-vid div,.bp-vid iframe,.bp-vid video{top:0;left:0;width:100%;height:100%;position:absolute;border:0}.bp-load{display:flex;background-size:100% 100%;overflow:hidden;z-index:1}.bp-bar{position:absolute;top:0;left:0;height:3px;width:100%;transform:translateX(-100%);background:rgba(255,255,255,.9);border-radius:0 3px 3px 0;animation:bp-bar 4s both}.bp-o,.bp-o:after{border-radius:50%;width:90px;height:90px}.bp-o{margin:auto;border:10px solid rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.9);animation:bp-o 1s infinite linear}.bp-cap{position:absolute;bottom:2%;background:rgba(9,9,9,.8);color:rgba(255,255,255,.9);border-radius:4px;max-width:95%;line-height:1.3;padding:.6em 1.2em;left:50%;transform:translateX(-50%);width:fit-content;width:-moz-fit-content;display:table;transition:opacity .3s;animation:bp-fadein .2s}.bp-cap a{color:inherit}.bp-inline{position:absolute}.bp-lock{overflow-y:hidden}.bp-lock body{overflow:scroll}.bp-noclose .bp-x{display:none}.bp-noclose:not(.bp-zoomed){touch-action:pan-y}.bp-noclose:not(.bp-zoomed) .bp-img-wrap{cursor:zoom-in}@media (prefers-reduced-motion){.bp-wrap *{animation-duration:0s!important}}@media (max-width:500px){.bp-x{height:47px;width:47px}.bp-x:before{width:34px;top:6px;right:6px}.bp-next,.bp-prev{margin-top:-27px;height:54px;width:45px}.bp-next:before,.bp-prev:before{top:7px;left:2px;width:43px}.bp-o,.bp-o:after{border-width:6px;width:60px;height:60px}.bp-count{margin:12px 10px}}
/*# sourceMappingURL=/sm/15e96278e1e731ce40eef8d6284cefc81b81dda67c3a0aa386ec893f183bd57f.map */

190
output/assets/styles/style.css
View File

@@ -2,8 +2,6 @@
Theme variables
========================= */
:root{
/* Layout */
--gutter: 2rem;
--margin: 420px;
--body-pad: 1rem;
@@ -14,21 +12,43 @@
);
--content-min: 60ch;
--content-max: 880px;
/* Fullwidth media tuning */
--bleed: 48px;
--fullwidth-cap: 860px;
/* Colors */
--bg: #faf9f6;
--fg: #000000;
--link: #1a0dab;
--heading: #004c99;
--code-bg: #f0f0f0;
--active-toc: #cacaca;
/* Notes */
--note-color: #555;
--note-bg: transparent;
--border: #d7d7d7;
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
}
/* =========================================
Dark mode — manual (data-theme) wins
========================================= */
:root[data-theme="dark"]{
--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;
--active-toc: #313131;
}
/* =========================
@@ -46,11 +66,11 @@ h1, h2, h3{ color: var(--heading); }
a {
color: var(--link);
text-decoration: none; /* removes underline by default */
text-decoration: none;
}
a:hover {
text-decoration: underline; /* only show on hover */
text-decoration: underline;
}
/* =========================
@@ -97,11 +117,7 @@ nav{
max-width: 100%;
}
@media (max-width: 1250px){
#preamble.status{
padding-right: var(--body-pad);
}
}
/* =========================
Footer
@@ -214,25 +230,7 @@ body{ counter-reset: sidenote-counter; }
text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
}
@media (max-width: 1250px){
#content.content{
padding-right: var(--body-pad);
}
.sidenote,
.marginnote{
float: none;
clear: both;
width: auto;
display: block; /* ⬅ make them start on a new line */
margin: 0.5rem 0 0.75rem; /* spacing above/below */
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));
}
}
/* Ultra-wide comfort tweaks */
@@ -277,7 +275,7 @@ pre {
}
.org-src-container > pre{ overflow: auto; }
/* Language badges (optional) */
/* Language badges */
.org-src-container > pre:before{
display: block; position: absolute; top: 0; right: 0;
background-color: #b3b3b3; color: #fff;
@@ -460,34 +458,7 @@ li ol li::before {
.epigraph blockquote::after {
content: none;
}
/* =========================================
Dark mode — manual (data-theme) wins
========================================= */
:root {
/* optional: shared tokens for borders/chips */
--border: #d7d7d7;
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
}
:root[data-theme="dark"]{
--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;
--active-toc: #313131;
}
/* Auto scheme if no manual override is set */
@media (prefers-color-scheme: dark){
@@ -530,13 +501,6 @@ li ol li::before {
}
.epigraph blockquote footer{ color: var(--muted); }
/* Mobile sidenote rule uses a light border; make it theme-aware */
@media (max-width: 1250px){
.sidenote, .marginnote{
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
}
}
/* Theme toggle button positioning + transparent background */
.theme-toggle {
position: fixed;
@@ -600,14 +564,7 @@ li ol li::before {
line-height: 1.35;
}
/* Mobile: these already stack under content via your media query; nothing special needed,
but we can soften the border a touch to match the mobile sidenote rule */
@media (max-width: 1250px){
.sidenote .mn-img,
.marginnote .mn-img{
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
}
}
.sidenote img {
margin-top: 0.35rem;
display: block;
@@ -671,22 +628,6 @@ li ol li::before {
/* Headings offset so anchors don’t hide under the sticky header */
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
/* =========================
Mobile / narrow view
========================= */
@media (max-width: 1250px){
#table-of-contents{
float: none;
position: static; /* no sticky on small screens */
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;
}
}
#text-table-of-contents a.is-active{
// font-weight: 700;
text-decoration: underline;
@@ -694,3 +635,68 @@ h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
//border: 1px solid var(--border, #ccc);
}
/*BP STUFF*/
/* theme removal */
.hidden { display: none !important; }
.bp-x{ right:72px; }
.bp-next,.bp-prev{ right:8px; }
.bp-prev{ left:8px; }
/* Smooth exit */
.bp-wrap{ transition: opacity .18s ease; }
.bp-wrap.bp-fadeout{ opacity: 0; }
/* Respect notches */
.bp-controls{
padding-top: env(safe-area-inset-top, 0);
padding-right: calc(env(safe-area-inset-right, 0) + 8px);
}
@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;
}
}