docs(jump-links): improve non-contiguous demo

Author: zeroedin

elements/pf-jump-links/demo/non-contiguous.html

@@ -1,104 +1,131 @@
-<article class="content">
-  <section id="chapter-1">
-    <h1>Chapter 1</h1>
-  </section>
-  <section id="chapter-2">
-    <h2>
-      <a href="#chapter-2">Chapter 2</a>
-    </h2>
-  </section>
-  <section id="chapter-3">
-    <h2>
-      <a href="#chapter-3">Chapter 3</a>
-    </h2>
-    <section id="sub-chapter-1">
-      <h3>
-        <a href="#sub-chapter-1">Sub-chapter 3.1</a>
-      </h3>
+<article>
+  <div class="content">
+    <section id="chapter-1">
+      <h1>Chapter 1</h1>
     </section>
-    <section id="sub-chapter-2">
-      <h3>
-        <a href="#sub-chapter-2">Sub-chapter 3.2</a>
-      </h3>
+    <section id="chapter-2">
+      <h2>
+        <a href="#chapter-2">Chapter 2</a>
+      </h2>
     </section>
-    <section id="sub-chapter-3">
-      <h3>
-        <a href="#sub-chapter-3">Sub-chapter 3.3</a>
-      </h3>
+    <section id="chapter-3">
+      <h2>
+        <a href="#chapter-3">Chapter 3</a>
+      </h2>
+      <section id="sub-chapter-1">
+        <h3>
+          <a href="#sub-chapter-1">Sub-chapter 3.1</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-2">
+        <h3>
+          <a href="#sub-chapter-2">Sub-chapter 3.2</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-3">
+        <h3>
+          <a href="#sub-chapter-3">Sub-chapter 3.3</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-4">
+        <h3>
+          <a href="#sub-chapter-4">Sub-chapter 3.4</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-5">
+        <h3>
+          <a href="#sub-chapter-5">Sub-chapter 3.5</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-6">
+        <h3>
+          <a href="#sub-chapter-6">Sub-chapter 3.6</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-7">
+        <h3>
+          <a href="#sub-chapter-7">Sub-chapter 3.7</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-8">
+        <h3>
+          <a href="#sub-chapter-8">Sub-chapter 3.8</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-9">
+        <h3>
+          <a href="#sub-chapter-9">sub-chapter 3.9</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-10">
+        <h3>
+          <a href="#sub-chapter-10">Sub-chapter 3.10</a>
+        </h3>
+      </section>
     </section>
-    <section id="sub-chapter-4">
-      <h3>
-        <a href="#sub-chapter-4">Sub-chapter 3.4</a>
-      </h3>
+    <section id="chapter-4">
+      <h2>
+        <a href="#chapter-4">Chapter 4</a>
+      </h2>
     </section>
-    <section id="sub-chapter-5">
-      <h3>
-        <a href="#sub-chapter-5">Sub-chapter 3.5</a>
-      </h3>
+    <section id="chapter-5">
+      <h2>
+        <a href="#chapter-5">Chapter 5</a>
+      </h2>
+      <section id="sub-chapter-11">
+        <h3>
+          <a href="#sub-chapter-11">Sub-chapter 5.1</a>
+        </h3>
+      </section>
+      <section id="sub-chapter-12">
+        <h3>
+          <a href="#sub-chapter-12">Sub-chapter 5.2</a>
+        </h3>
+      </section>
     </section>
-    <section id="sub-chapter-6">
-      <h3>
-        <a href="#sub-chapter-6">Sub-chapter 3.6</a>
-      </h3>
-    </section>
-    <section id="sub-chapter-7">
-      <h3>
-        <a href="#sub-chapter-7">Sub-chapter 3.7</a>
-      </h3>
-    </section>
-    <section id="sub-chapter-8">
-      <h3>
-        <a href="#sub-chapter-8">Sub-chapter 3.8</a>
-      </h3>
-    </section>
-    <section id="sub-chapter-9">
-      <h3>
-        <a href="#sub-chapter-9">sub-chapter 3.9</a>
-      </h3>
-    </section>
-    <section id="sub-chapter-10">
-      <h3>
-        <a href="#sub-chapter-10">Sub-chapter 3.10</a>
-      </h3>
-    </section>
-  </section>
-  <section id="chapter-4">
-    <h2>
-      <a href="#chapter-4">Chapter 4</a>
-    </h2>
-  </section>
-  <section id="chapter-5">
-    <h2>
-      <a href="#chapter-5">Chapter 5</a>
-    </h2>
-    <section id="sub-chapter-11">
-      <h3>
-        <a href="#sub-chapter-11">Sub-chapter 5.1</a>
-      </h3>
-    </section>
-    <section id="sub-chapter-12">
-      <h3>
-        <a href="#sub-chapter-12">Sub-chapter 5.2</a>
-      </h3>
-    </section>
-  </section>
+  </div>
+  <pf-jump-links vertical>
+    <pf-jump-links-item href="#sub-chapter-1">Sub-chapter 3.1</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-2">Sub-chapter 3.2</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-3">Sub-chapter 3.3</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-4">Sub-chapter 3.4</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-5">Sub-chapter 3.5</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-6">Sub-chapter 3.6</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-7">Sub-chapter 3.7</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-8">Sub-chapter 3.8</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-9">Sub-chapter 3.9</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-10">Sub-chapter 3.10</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-11">Sub-chapter 5.1</pf-jump-links-item>
+    <pf-jump-links-item href="#sub-chapter-12">Sub-chapter 5.2</pf-jump-links-item>
+  </pf-jump-links>
 </article>
 
-<pf-jump-links vertical>
-  <pf-jump-links-item href="#sub-chapter-1">Sub-chapter 3.1</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-2">Sub-chapter 3.2</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-3">Sub-chapter 3.3</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-4">Sub-chapter 3.4</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-5">Sub-chapter 3.5</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-6">Sub-chapter 3.6</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-7">Sub-chapter 3.7</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-8">Sub-chapter 3.8</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-9">Sub-chapter 3.9</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-10">Sub-chapter 3.10</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-11">Sub-chapter 5.1</pf-jump-links-item>
-  <pf-jump-links-item href="#sub-chapter-12">Sub-chapter 5.2</pf-jump-links-item>
-</pf-jump-links>
 
 <script type="module">
   import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
 </script>
+
+<style>
+  article {
+    display: grid;
+    grid-template-columns: 1fr 0.25fr;
+    gap: var(--pf-global--spacer--md, 1rem);
+  }
+
+  .content {
+    min-height: 100dvh;
+  }
+
+  section {
+    border: var(--pf-global--BorderWidth--sm, 1px) dashed var(--pf-global--BorderColor--100, #d2d2d2);
+    margin-block-end: var(--pf-global--spacer--xs, 0.25rem);
+    padding-block: var(--pf-global--spacer--2xl, 3rem) var(--pf-global--spacer--4xl, 6rem) ;
+    padding-inline: var(--pf-global--spacer--md, 1rem);
+  }
+
+  pf-jump-links {
+    position: sticky;
+    inset: 0;
+    height: 100dvh;
+  }
+</style>