Release v2.3.7

pilafmon · pilafmon · commit 91f3ad0373a5 · 2025-05-02T03:04:22.000-07:00
diff --git a/dist/blogger-tweaks.min.css b/dist/blogger-tweaks.min.css
diff --git a/dist/layouts/block-duo.css b/dist/layouts/block-duo.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Block Duo layout -- Two big columns followed by a single footer
diff --git a/dist/layouts/color-blocks.css b/dist/layouts/color-blocks.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Color Blocks layout -- Two columns of colorful blocks
diff --git a/dist/layouts/color-slide.css b/dist/layouts/color-slide.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Color Slide layout -- Top to botttom color transition
diff --git a/dist/layouts/letterbox.css b/dist/layouts/letterbox.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Letterbox layout -- Edge-to-edge semi-opaque bar over cover background image
diff --git a/dist/layouts/modern.css b/dist/layouts/modern.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Modern layout -- Clean blog post page
diff --git a/dist/layouts/neon.css b/dist/layouts/neon.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Neon layout -- For hackers and space junkies
diff --git a/dist/layouts/neon.min.js b/dist/layouts/neon.min.js
@@ -1,2 +1,2 @@
-//! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License
+//! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License
 const numNeonImages=8;const randomImage=Date.now()%numNeonImages+1;globalThis.document.body.classList.add("neon-image-"+String(randomImage));
diff --git a/dist/layouts/vertical-bars.css b/dist/layouts/vertical-bars.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Vertical Bars layout -- traditional boring old-school webpage
diff --git a/dist/layouts/zebra-sections.css b/dist/layouts/zebra-sections.css
@@ -1,4 +1,4 @@
-/*! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
+/*! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
 
 /*
 Zebra Sections layout -- Edge-to-edge blocks with alternating background colors
@@ -17,7 +17,7 @@ HTML (<body>):
          a.current
       h1, h2, h4, img[alt=avatar]
    main
-      section
+      section.night-mode[data-background=xyz]
          h2
             img
          cite  //author byline or date modified notice
@@ -221,6 +221,7 @@ main >section >div >menu >li i.font-icon {
 main >section >form {
    display: inline-flex;
    flex-direction: column;
+   color: dimgray;
    background-color: gainsboro;
    padding: 35px 40px;
    margin: 0px 10px 30px 10px;
@@ -253,6 +254,7 @@ main >section >footer {
    padding-top: 20px;
    }
 main >section >footer.flip-icons {
+   letter-spacing: 0.1em;
    transform: scaleX(-1);
    }
 body >footer {
@@ -285,7 +287,27 @@ body >main >section >ol.marble-checklist {
    padding: 0px 10px;
    }
 
-/* Mobile devices */
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+   main >section {
+      color: gainsboro;
+      background-color: var(--colorTar);
+      }
+   main >section:nth-child(even) {
+      background-color: var(--colorCharcoal);
+      }
+   }
+
+/* Night Mode */
+main >section.night-mode {
+   color: gainsboro;
+   background-color: black;
+   }
+main:has(>section.night-mode:last-child)+footer {
+   background-color: var(--colorTar);
+   }
+
+/* Mobile Devices */
 @media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
    body >header.responsive-avatar {
       img {
diff --git a/dist/lib-x.d.ts b/dist/lib-x.d.ts
@@ -1,4 +1,4 @@
-//! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License
+//! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License
 
 export type GlobalKey = keyof typeof globalThis;
 export type Json = string | number | boolean | null | undefined | JsonObject | Json[];
diff --git a/dist/lib-x.dev.js b/dist/lib-x.dev.js
@@ -1,4 +1,4 @@
-//! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License
+//! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License
 
 const libXDom = {
     stateDepot: [],
@@ -904,7 +904,7 @@ const libXExtra = {
     },
 };
 const libX = {
-    version: '2.3.6',
+    version: '2.3.7',
     dom: libXDom,
     ui: libXUi,
     util: libXUtil,
diff --git a/dist/lib-x.js b/dist/lib-x.js
@@ -1,4 +1,4 @@
-//! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License
+//! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License
 
 const libXDom = {
     stateDepot: [],
@@ -904,7 +904,7 @@ const libXExtra = {
     },
 };
 const libX = {
-    version: '2.3.6',
+    version: '2.3.7',
     dom: libXDom,
     ui: libXUi,
     util: libXUtil,
diff --git a/dist/lib-x.min.js b/dist/lib-x.min.js
diff --git a/dist/reset.min.css b/dist/reset.min.css
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
    "name": "web-ignition",
    "description": "Start a fire",
-   "version": "2.3.6",
+   "version": "2.3.7",
    "license": "MIT",
    "type": "module",
    "module": "dist/lib-x.js",
@@ -87,7 +87,7 @@
    "devDependencies": {
       "@eslint/js": "~9.25",
       "@fortawesome/fontawesome-free": "~6.7",
-      "@types/node": "~22.14",
+      "@types/node": "~22.15",
       "add-dist-header": "~1.4",
       "assert-deep-strict-equal": "~1.2",
       "copy-file-util": "~1.2",
@@ -97,7 +97,7 @@
       "esm-to-plain-js": "~1.1",
       "jshint": "~2.13",
       "less": "~4.3",
-      "mocha": "~11.1",
+      "mocha": "~11.2",
       "replacer-util": "~1.3",
       "rimraf": "~6.0",
       "run-scripts-util": "~1.3",
diff --git a/src/css/layouts/zebra-sections.css b/src/css/layouts/zebra-sections.css
@@ -252,6 +252,7 @@ main >section >footer {
    padding-top: 20px;
    }
 main >section >footer.flip-icons {
+   letter-spacing: 0.1em;
    transform: scaleX(-1);
    }
 body >footer {
@@ -287,7 +288,7 @@ body >main >section >ol.marble-checklist {
 /* Dark Mode */
 @media (prefers-color-scheme: dark) {
    main >section {
-      color: white;
+      color: gainsboro;
       background-color: var(--colorTar);
       }
    main >section:nth-child(even) {
@@ -297,11 +298,11 @@ body >main >section >ol.marble-checklist {
 
 /* Night Mode */
 main >section.night-mode {
-   color: white;
+   color: gainsboro;
    background-color: black;
    }
-main >section.night-mode:last-child {
-   border-bottom: 5px solid silver;
+main:has(>section.night-mode:last-child)+footer {
+   background-color: var(--colorTar);
    }
 
 /* Mobile Devices */
diff --git a/src/css/layouts/zebra-sections.html b/src/css/layouts/zebra-sections.html
@@ -163,6 +163,32 @@ <h2>On Fire</h2>
             <li>Item Ghost</li><li>Item American Bison</li><li><i data-icon=dragon></i>Item Dragon</li>
          </menu>
       </div>
+      <div>
+         <header>Details Summary</header>
+         <details open>
+            <summary>A. Item A</summary>
+            <header>This is an overview of subitems listed below.</header>
+            <details>
+               <summary>1. Subitem 1</summary>
+               <p>Here are some details on Subitem 1.</p>
+               <p>Here are more details on Subitem 1.</p>
+            </details>
+            <details open>
+               <summary>2. Subitem 2</summary>
+               <header>This is an overview of small items listed below.</header>
+               <details open>
+                  <summary>a. Small Item a</summary>
+                  <p>Here are some details on small item a.</p>
+               </details>
+            </details>
+         </details>
+         <details>
+            <summary>B. Item B</summary>
+            <p>Here are some details on Item B.</p>
+            <p>Here are more details on Item B.</p>
+            <p>Here are more details on Item B.</p>
+         </details>
+      </div>
       <h2>Marble Checklist</h2>
       <ol class=marble-checklist data-on-load=libX.marbleChecklist.setup>
          <li id=dog>     <p>Walk dog</p></li>
diff --git a/src/css/reset-color-overrides.css b/src/css/reset-color-overrides.css
@@ -15,10 +15,18 @@ button { background-color: cornflowerblue; }
 button:hover:not(:disabled), button:focus { background-color: royalblue; }
 
 /* Summary Details Colors */
-details >summary::before { color: inherit; }  /* collapsed marker */
-details[open] >summary::before { color: black; }  /* expanded marker */
-details >summary:hover::before { color: black; text-shadow: 0px 0px 0.2em deepskyblue; }  /* hover on closed marker */
-details >summary+header, details:not(:has(details))::details-content { background-color: gainsboro; }  /* content box */
+*.no-dark-mode details >summary+header,
+*.no-dark-mode details:not(:has(details))::details-content,
+details >summary+header,
+details:not(:has(details))::details-content {
+   background-color: gainsboro;  /* content box (light) */
+   }
+@media (prefers-color-scheme: dark) {
+   details >summary+header,
+   details:not(:has(details))::details-content {
+      background-color: var(--colorSmoke);  /* content box (dark) */
+      }
+   }
 
 /* Reveal Action Colors */
 .reveal-button { color: darkseagreen; }
diff --git a/src/css/reset/summary-details.less b/src/css/reset/summary-details.less
@@ -87,3 +87,23 @@ details[open]:not(:has(details))::details-content {
    padding: 20px 30px;
    margin: 10px 0px 20px 0px;
    }
+
+// Marker Color
+details >summary::before,
+*.no-dark-mode details >summary::before {
+   color: inherit;  //collapsed
+   }
+details[open] >summary::before,
+details >summary:hover::before,
+*.no-dark-mode details[open] >summary::before,
+*.no-dark-mode details >summary:hover::before {
+   color: black;  //expanded or hover
+   }
+details >summary:hover::before,
+*.no-dark-mode details >summary:hover::before {
+   text-shadow: 0px 0px 0.2em deepskyblue;  //hover on collapsed
+   }
+@media (prefers-color-scheme: dark) {
+   details[open] >summary::before,
+   details >summary:hover::before { color: white; }  //expanded or hover on collapsed
+   }
diff --git a/src/css/reset/tables.less b/src/css/reset/tables.less
@@ -5,7 +5,8 @@
 table { border-collapse: collapse; border-spacing: 0px; margin: 0px auto 20px auto; }
 table tr { border-bottom: 1px solid steelblue; transition: all 500ms; }
 table thead tr { border-bottom-width: 3px; }
-table tbody tr:hover { background-color: aliceblue; .DarkMode({ background-color: var(--colorSmoke); }); }
+table tbody tr:hover { background-color: aliceblue; }
+table:not(.no-dark-mode) tbody tr:hover { .DarkMode({ background-color: var(--colorSmoke); }); }
 table tbody tr th[colspan] { font-size: 0.8rem; font-weight: normal; text-align: center; text-transform: uppercase; color: white; background-color: steelblue; padding: 3px 0px; }
 table tbody tr td { font-size: 0.9rem; vertical-align: top; text-align: center; }
 table th, table td { padding: 6px 15px; .MobileMode({ padding: 6px 6px; }); }
@@ -42,8 +43,8 @@ table.data-box {
             }
          }
       }
-   caption {
-      .DarkMode({ color: white; });
+   caption:not(.no-dark-mode) {
+      .DarkMode({ color: gainsboro; });
       }
    }
 
diff --git a/src/css/spec-css.html b/src/css/spec-css.html
@@ -180,7 +180,7 @@ <h3>3/3</h3>
    <section>
       <h2>Summaries and Details</h2>
       <p>Below is information about some items and subitems.</p>
-      <div>
+      <div class=no-dark-mode>
 
          <details open>
             <summary>A. Item A</summary>
@@ -213,7 +213,7 @@ <h2>Summaries and Details</h2>
    <section>
       <h2>Tables</h2>
 
-      <table data-number-column=3>
+      <table class=no-dark-mode data-number-column=3>
          <caption>Regular Table</caption>
          <thead>
             <tr><th>Tree</th><th>Leaves</th><th>List Price</th></tr>
@@ -227,7 +227,7 @@ <h2>Tables</h2>
       </table>
 
       <table class=data-box data-number-column=3 data-code-column=3>
-         <caption>Data Box Table</caption>
+         <caption class=no-dark-mode>Data Box Table</caption>
          <thead>
             <tr><th>Tree</th><th>Leaves</th><th>List Price</th></tr>
          </thead>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License /`
	`1`	`+/! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License /`
`2`	`2`
`3`	`3`	`/*`
`4`	`4`	`Block Duo layout -- Two big columns followed by a single footer`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-//! web-ignition v2.3.6 ~~ https://github.com/center-key/web-ignition ~~ MIT License`
	`1`	`+//! web-ignition v2.3.7 ~~ https://github.com/center-key/web-ignition ~~ MIT License`
`2`	`2`	`const numNeonImages=8;const randomImage=Date.now()%numNeonImages+1;globalThis.document.body.classList.add("neon-image-"+String(randomImage));`