LCE-Hub-Mirrors/lce-hub.github.io
1
0
Fork 0
mirror of https://github.com/LCE-Hub/lce-hub.github.io.git synced 2026-08-20 04:27:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile responsiveness

Browse source
This commit is contained in:
Santiago Fisela 2026-03-14 19:37:29 -03:00
parent 447a53b9e0
commit 7b5dd712ab
1 changed files with 152 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

183
src/style.css
View file

@ -142,6 +142,15 @@ body {
gap: 15px; gap: 15px;
margin-bottom: 0px; margin-bottom: 0px;
z-index: 10; 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 { .tabs-wrapper {
@ -163,6 +172,7 @@ body {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
transition: transform 0.1s steps(2); transition: transform 0.1s steps(2);
white-space: nowrap;
} }
.tab-item.active { .tab-item.active {
@ -888,11 +898,7 @@ body {
color: #fff; color: #fff;
} }
@media (max-width: 800px) {
.os-grid {
grid-template-columns: 1fr;
}
}
.gallery-grid { .gallery-grid {
display: grid; display: grid;
@ -933,17 +939,7 @@ body {
display: block; 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 { .launcher-previews {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -954,23 +950,7 @@ body {
margin-right: auto; 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 { .gallery-item.large {
max-width: 100%; max-width: 100%;
@ -1027,9 +1007,150 @@ body {
z-index: 100; 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) { @media (max-width: 800px) {
.menu-container { .menu-container {
width: 95vw; width: 95vw;
margin: 20px auto; 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;
} }
} }