Add mobile responsiveness to ToolsnToys hub pages; fix table overflow in guides

Add 680px breakpoint to toolsntoys, foss-tools, guides, jl-early-tools:
header stacks, stats bar collapses to 2-col, sidebar/content grid stacks.
Fix table overflow in 3 guide pages: move overflow-x:hidden from body to
.guide-wrap so .guide-table-wrap scroll containers work on mobile Safari.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-02 18:21:33 +02:00
parent 73f653ff23
commit 334929292e
7 changed files with 39 additions and 8 deletions

View File

@@ -298,6 +298,12 @@
width: 600px; height: 400px; background: radial-gradient(ellipse at center bottom, rgba(232,148,58,0.1) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
@media (max-width: 680px) {
.header { flex-direction: column; gap: 0.75rem; }
.header-right { align-items: flex-start; text-align: left; }
.main-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>