Spaces:
Running
Running
This is a crucial correction. You want the **Nextra Documentation Layout** (the structure) combined with the **Tactical Ops Color Palette & Font** (the skin), but **without** the "roleplay" elements (no "SYSTEM ONLINE" widgets, no dense data grids, no radar charts, no forced uppercase).
2d1d74f verified | class CustomToc extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .toc-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #888888; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| } | |
| .toc-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .toc-item { | |
| margin-bottom: 0.5rem; | |
| } | |
| .toc-link { | |
| display: block; | |
| font-size: 0.8125rem; /* 13px */ | |
| color: #888888; | |
| text-decoration: none; | |
| border-left: 2px solid transparent; | |
| padding-left: 1rem; | |
| transition: all 0.2s ease; | |
| line-height: 1.5; | |
| } | |
| .toc-link:hover { | |
| color: #e5e5e5; | |
| } | |
| .toc-link.toc-item-active { | |
| color: #ff6600; | |
| border-left-color: #ff6600; | |
| font-weight: 500; | |
| } | |
| </style> | |
| <div class="toc-title">On This Page</div> | |
| <ul class="toc-list"> | |
| <li class="toc-item"> | |
| <a href="#intro" class="toc-link">Introduction</a> | |
| </li> | |
| <li class="toc-item"> | |
| <a href="#architecture" class="toc-link">Architecture</a> | |
| </li> | |
| <li class="toc-item"> | |
| <a href="#troubleshooting" class="toc-link">Rocky Linux 9</a> | |
| </li> | |
| </ul> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-toc', CustomToc); |