/* Responsive Design - Mobile-first approach */ /* Mobile styles (default, < 768px) */ @media (max-width: 767px) { .feed-sidebar { display: none; } .wiki-sidebar { display: none; } .layout-container { flex-direction: column; padding: 1rem; gap: 1rem; } .main-content { width: 100%; min-width: 0; } /* Ensure no overflow on mobile */ article, .feed-container, .nav-container { overflow-x: hidden; word-wrap: break-word; } .mobile-menu-toggle { display: flex; } .nav-menu { position: fixed; top: 80px; /* Match header height */ left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--bg-secondary); flex-direction: column; align-items: flex-start; padding: 2rem; transition: left 0.3s; border-top: 1px solid var(--border-color); z-index: 999; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); } .nav-menu.active { left: 0; } .nav-menu li { width: 100%; padding: 0.5rem 0; } .dropdown-menu { position: static; opacity: 1; visibility: visible; border: none; box-shadow: none; margin-left: 1rem; margin-top: 0.5rem; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } article { padding: 1.5rem; } .nav-container { padding: 0.5rem 1rem; } /* E-books table: show only avatar on mobile, narrow author column */ .ebooks-table th[data-sort="author"], .ebooks-table td:nth-child(2) { width: 60px; min-width: 60px; max-width: 60px; padding: 0.5rem; text-align: center; } .ebooks-table td .user-badge { display: flex; justify-content: center; align-items: center; padding: 0; background: transparent; border: none; width: 100%; } .ebooks-table td .user-badge-name, .ebooks-table td .user-badge-handle { display: none !important; } .ebooks-table td .user-badge-avatar, .ebooks-table td .user-badge-avatar-placeholder { width: 40px; height: 40px; margin: 0; } .ebooks-table td .user-badge-avatar-placeholder .icon-inline { width: 20px; height: 20px; } } /* Tablet styles (768px - 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { .feed-sidebar { width: 250px; } .wiki-sidebar { width: 200px; } .layout-container { padding: 1.5rem; } h1 { font-size: 2.25rem; } } /* Desktop styles (> 1024px) */ @media (min-width: 1025px) { .feed-sidebar { display: block; } .layout-container { max-width: 1400px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --bg-primary: #1a1a1a; --bg-secondary: #0f0f0f; --text-primary: #ffffff; --text-secondary: #e0e0e0; --link-color: #9bb3ff; --border-color: #606060; } }