diff --git a/ToolsnToys/appimage-installation-guide.html b/ToolsnToys/appimage-installation-guide.html index a58c011..43aba3b 100644 --- a/ToolsnToys/appimage-installation-guide.html +++ b/ToolsnToys/appimage-installation-guide.html @@ -32,9 +32,7 @@ background: var(--bg-deep); color: var(--text-main); font-family: 'Rambla', sans-serif; - min-height: 100vh; - overflow-x: hidden; - } + min-height: 100vh;} body::before { content: ''; @@ -90,7 +88,7 @@ #embers { position: fixed; inset: 0; pointer-events: none; z-index: 3; } - .guide-wrap { + .guide-wrap { overflow-x: hidden; position: relative; z-index: 1; display: grid; diff --git a/ToolsnToys/foss-tools.html b/ToolsnToys/foss-tools.html index 041bdfc..c07147a 100644 --- a/ToolsnToys/foss-tools.html +++ b/ToolsnToys/foss-tools.html @@ -152,6 +152,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; } + } diff --git a/ToolsnToys/guides.html b/ToolsnToys/guides.html index c537d96..a4b3dd7 100644 --- a/ToolsnToys/guides.html +++ b/ToolsnToys/guides.html @@ -502,6 +502,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; } + } diff --git a/ToolsnToys/jl-early-tools.html b/ToolsnToys/jl-early-tools.html index a3de0e1..d8ad38f 100644 --- a/ToolsnToys/jl-early-tools.html +++ b/ToolsnToys/jl-early-tools.html @@ -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; } + } diff --git a/ToolsnToys/linux-installation-methods.html b/ToolsnToys/linux-installation-methods.html index badd795..77219af 100644 --- a/ToolsnToys/linux-installation-methods.html +++ b/ToolsnToys/linux-installation-methods.html @@ -26,7 +26,7 @@ --border-amber: rgba(232,148,58,0.35); } * { margin: 0; padding: 0; box-sizing: border-box; } - body { background: var(--bg-deep); color: var(--text-main); font-family: 'Rambla', sans-serif; min-height: 100vh; overflow-x: hidden; } + body { background: var(--bg-deep); color: var(--text-main); font-family: 'Rambla', sans-serif; min-height: 100vh;} body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 90%, rgba(232,148,58,0.06) 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 10% 0%, rgba(3,8,18,0.95) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 90% 0%, rgba(3,8,18,0.95) 0%, transparent 60%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px); pointer-events: none; z-index: 1000; animation: scanline 12s linear infinite; } @keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 400px; } } @@ -34,7 +34,7 @@ .campfire-glow { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); width: 500px; height: 300px; background: radial-gradient(ellipse at center bottom, rgba(255,107,26,0.14) 0%, rgba(255,59,10,0.04) 40%, transparent 70%); pointer-events: none; animation: campfireFlicker 3s ease-in-out infinite; z-index: 0; } @keyframes campfireFlicker { 0%,100% { opacity: 0.6; transform: translateX(-50%) scaleY(1); } 33% { opacity: 1; transform: translateX(-50%) scaleY(1.08); } 66% { opacity: 0.7; transform: translateX(-52%) scaleY(0.96); } } #embers { position: fixed; inset: 0; pointer-events: none; z-index: 3; } - .guide-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; max-width: 1100px; margin: 0 auto; } + .guide-wrap { overflow-x: hidden; position: relative; z-index: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; max-width: 1100px; margin: 0 auto; } .guide-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.5rem 0.75rem 1.5rem 1rem; border-right: 1px solid var(--border-green); display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; scrollbar-color: var(--neon-dim) transparent; } .sidebar-back { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-muted); text-decoration: none; text-transform: uppercase; transition: color 0.15s; } .sidebar-back:hover { color: var(--neon-green); } diff --git a/ToolsnToys/linux-uninstallation.html b/ToolsnToys/linux-uninstallation.html index 96a8c83..a7af4d9 100644 --- a/ToolsnToys/linux-uninstallation.html +++ b/ToolsnToys/linux-uninstallation.html @@ -26,7 +26,7 @@ --border-amber: rgba(232,148,58,0.35); } * { margin: 0; padding: 0; box-sizing: border-box; } - body { background: var(--bg-deep); color: var(--text-main); font-family: 'Rambla', sans-serif; min-height: 100vh; overflow-x: hidden; } + body { background: var(--bg-deep); color: var(--text-main); font-family: 'Rambla', sans-serif; min-height: 100vh;} body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 90%, rgba(232,148,58,0.06) 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 10% 0%, rgba(3,8,18,0.95) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 90% 0%, rgba(3,8,18,0.95) 0%, transparent 60%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px); pointer-events: none; z-index: 1000; animation: scanline 12s linear infinite; } @keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 400px; } } @@ -34,7 +34,7 @@ .campfire-glow { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); width: 500px; height: 300px; background: radial-gradient(ellipse at center bottom, rgba(255,107,26,0.14) 0%, rgba(255,59,10,0.04) 40%, transparent 70%); pointer-events: none; animation: campfireFlicker 3s ease-in-out infinite; z-index: 0; } @keyframes campfireFlicker { 0%,100% { opacity: 0.6; transform: translateX(-50%) scaleY(1); } 33% { opacity: 1; transform: translateX(-50%) scaleY(1.08); } 66% { opacity: 0.7; transform: translateX(-52%) scaleY(0.96); } } #embers { position: fixed; inset: 0; pointer-events: none; z-index: 3; } - .guide-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; max-width: 1100px; margin: 0 auto; } + .guide-wrap { overflow-x: hidden; position: relative; z-index: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; max-width: 1100px; margin: 0 auto; } .guide-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.5rem 0.75rem 1.5rem 1rem; border-right: 1px solid var(--border-green); display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; scrollbar-color: var(--neon-dim) transparent; } .sidebar-back { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-muted); text-decoration: none; text-transform: uppercase; transition: color 0.15s; } .sidebar-back:hover { color: var(--neon-green); } diff --git a/ToolsnToys/toolsntoys.html b/ToolsnToys/toolsntoys.html index fdbce3b..90e6e86 100644 --- a/ToolsnToys/toolsntoys.html +++ b/ToolsnToys/toolsntoys.html @@ -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; } + }