You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.2 KiB
119 lines
2.2 KiB
/* Responsive Design - Mobile-first approach */ |
|
|
|
/* Mobile styles (default, < 768px) */ |
|
@media (max-width: 767px) { |
|
.feed-sidebar { |
|
display: none; |
|
} |
|
|
|
.layout-container { |
|
flex-direction: column; |
|
padding: 1rem; |
|
} |
|
|
|
.main-content { |
|
width: 100%; |
|
} |
|
|
|
.mobile-menu-toggle { |
|
display: flex; |
|
} |
|
|
|
.nav-menu { |
|
position: fixed; |
|
top: 60px; |
|
left: -100%; |
|
width: 100%; |
|
height: calc(100vh - 60px); |
|
background: var(--bg-secondary); |
|
flex-direction: column; |
|
align-items: flex-start; |
|
padding: 2rem; |
|
transition: left 0.3s; |
|
border-top: 1px solid var(--border-color); |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
|
|
/* Tablet styles (768px - 1024px) */ |
|
@media (min-width: 768px) and (max-width: 1024px) { |
|
.feed-sidebar { |
|
width: 250px; |
|
} |
|
|
|
.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; |
|
} |
|
}
|
|
|