MediaWiki:Mobile.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
display: none; | display: none; | ||
} | } | ||
.mobile-view { | .mobile-view { | ||
display: block; | display: block; | ||
} | } | ||
/* Hero section adjustments */ | /* Hero section adjustments */ | ||
/* MODIFIED - Ensure mobile padding is reduced */ | |||
.hero-banner { | |||
padding: 0.8em 0.5em; | |||
margin: 0.8em 0; /* Added margin reduction */ | |||
} | |||
/* MODIFIED - Added rule for image max-height */ | |||
.hero-banner img { | |||
max-height: 200px; /* Even smaller on mobile */ | |||
} | |||
.hero-title { | .hero-title { | ||
font-size: 1. | font-size: 1.6em; /* MODIFIED - Reduced */ | ||
margin-top: 0.4em; /* MODIFIED - Reduced */ | |||
} | } | ||
.hero-subtitle { | .hero-subtitle { | ||
font-size: | font-size: 1em; /* MODIFIED - Reduced */ | ||
margin-top: 0.2em; /* MODIFIED - Reduced */ | |||
margin-bottom: 0.3em; /* MODIFIED - Reduced */ | |||
} | } | ||
.quick-access-buttons { | .quick-access-buttons { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
} | } | ||
.button { | .button { | ||
width: 80%; | width: 80%; | ||
| Line 33: | Line 47: | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
} | } | ||
/* MODIFIED - About Section adjustments for mobile */ | |||
.about-section { | |||
padding: 0.8em; /* Reduced */ | |||
margin: 0.8em auto; /* Reduced */ | |||
font-size: 0.95em; /* Slightly reduced */ | |||
line-height: 1.5; /* Slightly reduced */ | |||
} | |||
.about-section h2 { | |||
font-size: 1.3em; /* Reduced */ | |||
margin-bottom: 0.4em; /* Reduced */ | |||
} | |||
.about-section p { | |||
margin-bottom: 0.3em; /* Reduced */ | |||
} | |||
/* Featured content adjustments */ | /* Featured content adjustments */ | ||
.featured-cards { | .featured-cards { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
/* Main sections mobile */ | /* Main sections mobile */ | ||
.main-sections-mobile { | .main-sections-mobile { | ||
| Line 44: | Line 76: | ||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
.wiki-table-mobile { | .wiki-table-mobile { | ||
width: 100%; | width: 100%; | ||
| Line 54: | Line 86: | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.05); | box-shadow: 0 2px 8px rgba(0,0,0,0.05); | ||
} | } | ||
.section-header { | .section-header { | ||
width: 100%; | width: 100%; | ||
| Line 61: | Line 93: | ||
text-align: center; | text-align: center; | ||
} | } | ||
.two-column-mobile { | .two-column-mobile { | ||
column-count: 2; | column-count: 2; | ||
column-gap: 20px; | column-gap: 20px; | ||
} | } | ||
/* Stats adjustments */ | /* Stats adjustments */ | ||
.stats-container { | .stats-container { | ||
flex-direction: column; | flex-direction: column; | ||
} | } | ||
.stat-box { | .stat-box { | ||
width: 100%; | width: 100%; | ||
} | } | ||
/* Footer adjustments */ | /* Footer adjustments */ | ||
.wiki-footer { | .wiki-footer { | ||
padding: 1em; | padding: 1em; | ||
} | } | ||
.footer-links { | .footer-links { | ||
flex-direction: column; | flex-direction: column; | ||
gap: 10px; | gap: 10px; | ||
} | } | ||
/* Featured content section header adjustments */ | /* Featured content section header adjustments */ | ||
.featured-content .section-header { | .featured-content .section-header { | ||
| Line 91: | Line 123: | ||
text-align: center; | text-align: center; | ||
} | } | ||
.featured-content .section-header h2 { | .featured-content .section-header h2 { | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
text-align: center; | text-align: center; | ||
} | } | ||
/* Card content alignment */ | /* Card content alignment */ | ||
.card-content { | .card-content { | ||
text-align: center; | text-align: center; | ||
} | } | ||
/* List item spacing */ | /* List item spacing */ | ||
.section-content ul { | .section-content ul { | ||
padding-left: 1em; | padding-left: 1em; | ||
} | } | ||
.section-content li { | .section-content li { | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
| Line 117: | Line 149: | ||
column-count: 1; | column-count: 1; | ||
} | } | ||
/* MODIFIED - Adjusted padding for smallest screens */ | |||
.hero-banner { | .hero-banner { | ||
padding: | padding: 0.6em 0.3em; | ||
} | } | ||
/* MODIFIED - Adjusted padding for smallest screens */ | |||
.about-section { | .about-section { | ||
padding: | padding: 0.6em; | ||
} | } | ||
.section-content { | .section-content { | ||
padding: 0.8em; | padding: 0.8em; | ||
} | } | ||
/* Ensure section headers are properly centered on very small screens */ | /* Ensure section headers are properly centered on very small screens */ | ||
.section-header { | .section-header { | ||