Fix up a few things

docs/extensions/index.html

@@ -61,7 +61,8 @@
       }
 
       .extension-pane {
-        flex: 1 1 80%;
+        flex: 0 0 80%;
+        overflow: auto;
       }
 
       iframe[name="extension-demo-frame"] {
@@ -248,12 +249,14 @@ <h2 class="demo-header">Code</h2>
       }
 
       function showSourceCode(code) {
-        const codeElement = document.createElement("pre");
-        codeElement.classList.add("code");
-        codeElement.classList.add("wide");
+        const preElement = document.createElement("pre");
+        preElement.classList.add("code");
+        preElement.classList.add("wide");
+        const codeElement = document.createElement("code");
         codeElement.textContent = formatSourceCode(code.innerHTML);
         hljs?.highlightElement(codeElement);
-        codeContainer.replaceChildren(codeElement);
+        preElement.appendChild(codeElement);
+        codeContainer.replaceChildren(preElement);
       }
 
       function formatSourceCode(text) {

docs/extensions/loader/index.html

@@ -7,7 +7,7 @@
       // Watch for the 'unload' event as a proxy for load start.
       // The initial about:blank page also counts when unloading.
       frame.contentWindow.addEventListener("unload", () => {
-        // Wait for destination location
+        // Wait for destination location for the hash
         setTimeout(() => {
           document
             .querySelector(frame.contentWindow.location.hash || null)
@@ -23,12 +23,7 @@
       });
     }
   </script>
-  <iframe
-    hidden
-    name="htmz"
-    onbeforeunload="window.beforeHtmz(this)"
-    onload="window.htmz(this)"
-  ></iframe>
+  <iframe hidden name="htmz" onload="window.htmz(this)"></iframe>
 </div>
 
 <div id="extension-description">
@@ -39,19 +34,23 @@ <h2>loader</h2>
   </p>
 </div>
 
-<a href="content.html#content" target="htmz">Load content</a>
-<div id="content"></div>
+<div id="content">
+  <a href="content.html#content" target="htmz">Load content</a>
+</div>
 
 <style>
   .loader {
     width: 2rem;
     height: 2rem;
-    border: 0.25rem solid #f0f;
+    border: 0.25rem solid #f80;
     border-bottom-color: transparent;
     border-radius: 50%;
     box-sizing: border-box;
     animation: loader 1s linear infinite;
   }
+  .loader * {
+    display: none;
+  }
 
   @keyframes loader {
     0% {

docs/index.html

@@ -20,8 +20,8 @@ <h1 class="title">
 
     <section>
       <p class="intro">
-        <b>htmz</b> is a minimalist HTML microframework that gives you the power
-        to create modular web user interfaces with the familiar simplicity of
+        <b>htmz</b> is a minimalist HTML microframework for creating interactive
+        and modular web user interfaces with the familiar simplicity of
         <strong class="stronger">plain HTML</strong>.
         <a href="https://github.com/Kalabasa/htmz" target="_blank">[GitHub]</a>
       </p>
@@ -56,8 +56,8 @@ <h2>nofilter<span class="heading-icon">⚡</span></h2>
 
     <section>
       <p>
-        <b>In a nutshell, htmz</b> lets you swap page fragments using vanilla
-        HTML code.
+        <b>In a nutshell, htmz</b> lets you swap page fragments on request using
+        vanilla HTML.
       </p>
       <p>
         Imagine clicking a link, but instead of reloading the whole page, it
@@ -195,8 +195,7 @@ <h2>What does it do exactly?</h2>
       <p>htmz does one thing and one thing only.</p>
       <p class="mission">
         <strong class="stronger">
-          Enable you to load HTML resources within <em>any element</em> in the
-          page.
+          Load HTML onto <em>any element</em> in the page on request.
         </strong>
       </p>
       <p>
@@ -336,17 +335,16 @@ <h3>Clean target values</h3>
       <section>
         <h3>Support opening links in a new tab</h3>
         <p>
-          In the htmz model, you link to HTML <em>fragments</em> that are
-          designed to be inserted into an existing page. But what if the user
-          opens these links in a new tab? They would see these partial UIs on
-          their own &mdash; a pretty bad user experience!
+          What if the user opens an htmz link in a new tab? Well, they would be
+          loading your page fragment, carefully designed to be injected into an
+          exsting page, on its own!
         </p>
         <p>
           Using the
           <a
             href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest"
             target="_blank"
-            >Sec-Fetch-Dest</a
+            ><strong>Sec-Fetch-Dest</strong></a
           >
           header, you can
           <a
@@ -527,6 +525,10 @@ <h3>What are the limitations?</h3>
           decreases or increases complexity. It really depends on your goal and
           style.
         </p>
+        <p>
+          Lastly, this is not a templating library! No HTML imports or
+          client-side includes.
+        </p>
       </section>
     </section>
 

docs/style.css

@@ -188,15 +188,9 @@ section:has(:target):not(:has(section :target)) {
   border-radius: 0.5rem;
 }
 
-pre.code {
-  padding: 0.5rem;
-  white-space: pre-wrap;
-  word-break: break-all;
-  border-radius: 0.5rem;
-}
 .code {
   padding: 0 0.25rem;
-  background: #3a424f;
+  background: #2e343f;
   color: #ddd;
   border-radius: 0.25rem;
 }
@@ -205,6 +199,21 @@ pre.code {
   overflow: auto;
   max-width: unset;
 }
+pre.code {
+  padding: 0.5rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  border-radius: 0.5rem;
+}
+pre.code:has(code) {
+  padding: 0;
+  overflow: auto;
+}
+pre.code code {
+  display: block;
+  padding: 0.5rem !important;
+  background: none;
+}
 .code i,
 .code-term {
   font-style: normal;
@@ -309,7 +318,7 @@ pre.code {
 }
 
 @supports (background-clip: text) {
-  .rainbow-mask {
+  pre.code code.rainbow-mask {
     display: inline-block;
     background-size: 215% 100%;
     background-clip: text;