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:
@@ -518,6 +518,15 @@
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg-deep); }
|
||||
::-webkit-scrollbar-thumb { background: var(--text-muted); }
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.header { flex-direction: column; gap: 0.75rem; }
|
||||
.header-right { align-items: flex-start; text-align: left; }
|
||||
.stats-bar { grid-template-columns: repeat(2, 1fr); }
|
||||
.main-grid { grid-template-columns: 1fr; }
|
||||
.category-list { flex-direction: row; flex-wrap: wrap; }
|
||||
.cat-item { flex: 1 1 auto; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user