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 CustomHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| height: 64px; | |
| background-color: #0a0a0a; | |
| border-bottom: 1px solid #333333; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .container { | |
| max-width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 1.5rem; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.125rem; | |
| color: #e5e5e5; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| text-decoration: none; | |
| } | |
| .logo:hover { | |
| color: #ff6600; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-item { | |
| font-size: 0.875rem; | |
| color: #888888; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| color: #e5e5e5; | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| background-color: #111111; | |
| border: 1px solid #333333; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 4px; | |
| font-size: 0.875rem; | |
| color: #888888; | |
| width: 200px; | |
| } | |
| .search-box input { | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: #e5e5e5; | |
| width: 100%; | |
| margin-left: 0.5rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .search-icon { | |
| width: 16px; | |
| height: 16px; | |
| color: #888888; | |
| } | |
| /* Mobile Menu Button */ | |
| .menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: #e5e5e5; | |
| cursor: pointer; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .search-box { | |
| display: none; | |
| } | |
| .menu-btn { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| <div class="container"> | |
| <a href="/" class="logo"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> | |
| Syncopated Notes | |
| </a> | |
| <div class="search-box"> | |
| <i data-feather="search" class="search-icon"></i> | |
| <input type="text" placeholder="Search..."> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#" class="nav-item active">Docs</a> | |
| <a href="#" class="nav-item">Blog</a> | |
| <a href="#" class="nav-item">About</a> | |
| <a href="https://github.com" target="_blank" class="nav-item"> | |
| <i data-feather="github" style="width:18px;height:18px;"></i> | |
| </a> | |
| </nav> | |
| <button class="menu-btn"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| `; | |
| // Initialize icons inside shadow DOM | |
| if (window.feather) { | |
| window.feather.replace(); | |
| } | |
| } | |
| } | |
| customElements.define('custom-header', CustomHeader); |