sanity checks

assets/scripts/script.js

@@ -1,16 +1,17 @@
 
-// COPY BUTTON:
+
+/* Event listener function for the COPY BUTTON */
 document.addEventListener("DOMContentLoaded", function () {
-  document.querySelectorAll("pre.src").forEach(function (block) {
+    document.querySelectorAll("pre.src").forEach(function (codeBlock) {
 	const button = document.createElement("button");
 	button.innerText = "Copy";
 	button.className = "copy-btn";
 
 	// Append button inside <pre>
-    block.appendChild(button);
+	codeBlock.appendChild(button);
 
 	button.addEventListener("click", function () {
-      const text = block.innerText.replace(button.innerText, ""); // exclude button text
+	    const text = codeBlock.innerText.replace(button.innerText, ""); // exclude button text
 	    navigator.clipboard.writeText(text.trim()).then(() => {
 		button.innerText = "Copied!";
 		setTimeout(() => (button.innerText = "Copy"), 1500);
@@ -19,6 +20,8 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 });
 
+
+/* Event listener for footnotes and sidenotes*/
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
 	const sup = ref.closest("sup") || ref;
@@ -68,7 +71,10 @@ document.addEventListener("DOMContentLoaded", () => {
 	sup.insertAdjacentElement("afterend", sn);
     });
 });
-  (function(){
+
+
+/* Function for setting the theme */
+(function(){
     const root = document.documentElement;
     const storageKey = "theme";
     const saved = localStorage.getItem(storageKey);
@@ -85,13 +91,16 @@ document.addEventListener("DOMContentLoaded", () => {
 	root.setAttribute("data-theme", target);
 	localStorage.setItem(storageKey, target);
     });
-  })();
+})();
 
+
+/* 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^="#"]');
+    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
@@ -150,7 +159,7 @@ document.addEventListener("DOMContentLoaded", () => {
     
     headings.forEach(h => observer.observe(h));
 
-  // Initial highlight (in case you load mid‑page)
+    // Initial highlight (in case load mid‑page)
     let bestId = null, bestDist = Infinity;
     headings.forEach(h => {
 	const top = h.getBoundingClientRect().top - headerOffsetPx;
@@ -159,7 +168,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
     if (bestId) setActive(bestId);
     
-  // Optional: smooth-scroll ToC clicks
+    // smooth-scroll ToC clicks
     toc.addEventListener("click", (e) => {
 	const a = e.target.closest('a[href^="#"]');
 	if (!a) return;

assets/styles/style.css

@@ -3,11 +3,17 @@
    ========================= */
 :root{
     /* Layout */
-    --content: 880px;
+    
     --gutter:  2rem;
     --margin:  420px;
     --body-pad: 1rem;
-
+    --content: clamp(
+	var(--content-min),
+	calc(100vi - 2*var(--body-pad) - 2*(var(--margin) + var(--gutter))),
+	var(--content-max)
+    );
+    --content-min: 60ch;
+    --content-max: 880px;
     /* Fullwidth media tuning */
     --bleed: 48px; 
     --fullwidth-cap: 860px;
@@ -91,7 +97,7 @@ nav{
     max-width: 100%;
 }
 
-@media (max-width: 1100px){
+@media (max-width: 1250px){
     #preamble.status{
       padding-right: var(--body-pad);
   }
@@ -139,8 +145,9 @@ footer{
 .marginnote{
     float: right;
     width: var(--margin);
-    margin-right: calc(-1 * ( (95vw - var(--content)) / 2 ));
+    //margin-right: calc(-1 * ( (95vw - var(--content)) / 2 ));
-    padding-left: var(--gutter);
+    margin-right: calc(-1 * ((100vi - var(--content)) / 2));
+    padding-right: var(--gutter);
     overflow-wrap: break-word;    /* preferred */
     word-wrap: break-word;        /* legacy support */
     word-break: break-word;       /* safety for stubborn cases */
@@ -207,7 +214,7 @@ body{ counter-reset: sidenote-counter; }
     text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
 }
 
-@media (max-width: 1100px){
+@media (max-width: 1250px){
   #content.content{
     padding-right: var(--body-pad);
   }
@@ -506,7 +513,7 @@ li ol li::before {
 .epigraph blockquote footer{ color: var(--muted); }
 
 /* Mobile sidenote rule uses a light border; make it theme-aware */
-@media (max-width: 1100px){
+@media (max-width: 1250px){
   .sidenote, .marginnote{
     border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
   }
@@ -577,7 +584,7 @@ li ol li::before {
 
 /* 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: 1100px){
+@media (max-width: 1250px){
   .sidenote .mn-img,
   .marginnote .mn-img{
     border-color: color-mix(in oklab, var(--fg) 12%, transparent);
@@ -600,8 +607,9 @@ li ol li::before {
   /* push into the left gutter, mirroring .sidenote on the right */
   float: left;
   width: var(--margin);
-  margin-left: calc(-1 * ( (95vw - var(--content)) / 2 ));
+  //margin-left: calc(-1 * ( (95vw - var(--content)) / 2 ));
-  padding-right: var(--gutter);
+  margin-left: calc(-1 * ((100vi - var(--content)) / 2));
+  padding-left: var(--gutter);
   box-sizing: border-box;
 
   /* sticky behavior */
@@ -648,7 +656,7 @@ h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
 /* =========================
    Mobile / narrow view
    ========================= */
-@media (max-width: 1100px){
+@media (max-width: 1250px){
   #table-of-contents{
     float: none;
     position: static;          /* no sticky on small screens */

sitemap.org

@@ -14,8 +14,8 @@
   - [[file:blogs/blogs-list.org][Blogs List]]
 - tags
   - [[file:tags/introduction.org][Tag: introduction]]
-  - [[file:tags/emacs.org][Tag: emacs]]
-  - [[file:tags/education.org][Tag: education]]
-  - [[file:tags/website.org][Tag: website]]
-  - [[file:tags/review.org][Tag: review]]
   - [[file:tags/insights.org][Tag: insights]]
+  - [[file:tags/emacs.org][Tag: emacs]]
+  - [[file:tags/website.org][Tag: website]]
+  - [[file:tags/education.org][Tag: education]]
+  - [[file:tags/review.org][Tag: review]]