diff --git a/src/style.css b/src/style.css index 9fd7bed..78f7998 100644 --- a/src/style.css +++ b/src/style.css @@ -142,6 +142,15 @@ body { gap: 15px; margin-bottom: 0px; z-index: 10; + max-width: 100%; + overflow-x: auto; + padding: 10px 0; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.menu-tabs::-webkit-scrollbar { + display: none; } .tabs-wrapper { @@ -163,6 +172,7 @@ body { color: #fff; cursor: pointer; transition: transform 0.1s steps(2); + white-space: nowrap; } .tab-item.active { @@ -888,11 +898,7 @@ body { color: #fff; } -@media (max-width: 800px) { - .os-grid { - grid-template-columns: 1fr; - } -} + .gallery-grid { display: grid; @@ -933,17 +939,7 @@ body { display: block; } -@media (max-width: 900px) { - .gallery-grid { - grid-template-columns: repeat(2, 1fr); - } -} -@media (max-width: 600px) { - .gallery-grid { - grid-template-columns: 1fr; - } -} .launcher-previews { grid-template-columns: repeat(3, 1fr); @@ -954,23 +950,7 @@ body { margin-right: auto; } -@media (max-width: 1200px) { - .launcher-previews { - grid-template-columns: repeat(3, 1fr); - } -} -@media (max-width: 900px) { - .launcher-previews { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 600px) { - .launcher-previews { - grid-template-columns: 1fr; - } -} .gallery-item.large { max-width: 100%; @@ -1027,9 +1007,150 @@ body { z-index: 100; } +@media (max-width: 1200px) { + .launcher-previews { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 900px) { + + .gallery-grid, + .launcher-previews { + grid-template-columns: repeat(2, 1fr); + } +} + @media (max-width: 800px) { .menu-container { width: 95vw; margin: 20px auto; + padding: 20px 0; + height: auto; + min-height: 100vh; + } + + .menu-content-wrapper { + width: 100%; + height: auto; + min-height: 500px; + } + + .menu-content, + .tab-content { + height: auto; + min-height: 400px; + } + + .home-layout { + height: auto; + } + + .features-row { + flex-direction: column; + align-items: center; + gap: 40px; + padding: 20px; + flex-grow: 0; + height: auto; + } + + .menu-title { + max-width: 300px; + } + + .tab-item { + padding: 8px 15px; + font-size: 1.2rem; + } + + .feature-card { + max-width: 100%; + } + + .cta-section h2 { + font-size: 1.8rem; + } + + .cta-section p { + font-size: 1rem; + } + + .bottom-actions { + grid-template-columns: 1fr; + gap: 25px; + padding: 20px; + } + + .main-btn { + width: 100%; + max-width: 350px; + font-size: 1.2rem; + } + + .branding-group { + flex-direction: column; + text-align: center; + } + + .menu-footer { + flex-direction: column; + align-items: center; + gap: 15px; + padding: 20px 0; + } + + .legends { + gap: 15px; + flex-wrap: wrap; + justify-content: center; + } + + .overview-section, + .core-features-grid, + .os-grid { + grid-template-columns: 1fr; + } + + .modal-content { + width: 95%; + max-height: 90vh; + overflow-y: auto; + } + + .modal-header h2 { + font-size: 1.5rem; + } + + .close-btn { + font-size: 1.1rem; + padding: 2px 8px; + } +} + +@media (max-width: 600px) { + + .gallery-grid, + .launcher-previews { + grid-template-columns: 1fr; + } + + .tab-item { + padding: 6px 10px; + font-size: 1rem; + } + + .arrow-btn { + font-size: 1rem; + padding: 4px; + } + + .brand-name, + .brand-sub { + font-size: 1.4rem; + } + + .screenshot-carousel { + display: none; } } \ No newline at end of file