From 4bb8134b9c102e183bf7de004a4f53034302471a Mon Sep 17 00:00:00 2001 From: agent Date: Thu, 16 Jul 2026 18:17:35 +0000 Subject: [PATCH] =?UTF-8?q?v0.3.0:=20Responsive-Layout=20Fixes=20(Script-P?= =?UTF-8?q?osition=20+=20CSS-Spezifit=C3=A4t)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drei Bugs gefixt die Responsive-Layout kaputt machten: 1. Script-Tag war NACH platziert (HTML-invalid) Fix: Script-Tag ist jetzt VOR im vault.html-Patch 2. CSS-Spezifität zu niedrig (nur .vault-app statt .vault-app.hermes-rc) Fix: 2-Klassen-Selektoren .vault-app.hermes-rc.X schlagen obv's Single-Class-Selektoren 3. Mobile-Overflow nicht kontrolliert Fix: overflow-x: hidden auf .vault-app + .vault-content, word-wrap + overflow-wrap für lange URLs/Codes Außerdem: - Init mit 50ms-Delay nach DOMContentLoaded (gibt obv Zeit für Setup) - Hamburger-Toggle mit e.stopPropagation() - Tablet-Graph als Bottom-Panel (220px) mit border-top statt border-left - Mobile-Graph komplett hidden (war: nur klein) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- vault-custom.js | 426 +++++++++++++++++++++++++++++------------------- vault.html | 2 +- 2 files changed, 262 insertions(+), 166 deletions(-) diff --git a/vault-custom.js b/vault-custom.js index 9217c2f..9874426 100644 --- a/vault-custom.js +++ b/vault-custom.js @@ -7,8 +7,14 @@ * 1. Current-page highlighting in 3D Graph * 2. Click-to-navigate on 3D Graph nodes (Three.js raycasting) * 3. Responsive layout (graph collapses below 1024px, tree below 768px) + * 4. URL-based navigation (?file=) * * Design notes: see docs/ARCHITECTURE.md + * + * IMPORTANT: This script runs AFTER obv's main script (which sets up the + * layout). So our responsiveLayout() needs to apply classes/styles AFTER + * obv's setup, and our CSS must win the specificity battle against obv's + * inline styles + media queries. */ (function() { 'use strict'; @@ -18,60 +24,239 @@ const HermesCustom = window.HermesCustom; // ============================================================ - // 1. Current-page highlighting + // Configuration + // ============================================================ + + const BREAKPOINTS = { + mobile: 768, // <768px + tablet: 1024, // 768-1023px + }; + + // ============================================================ + // 1. CSS injection — high specificity to win against obv // ============================================================ /** - * Determine which file is currently being viewed. - * Uses URL ?file= parameter, or falls back to extracting from the - * page content (the last file fetched via loadFile). + * Inject responsive CSS into as a stylesheet (not