|
|
| (18 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* MediaWiki:Mainpage.css - Dedicated CSS for the Main Page layout */ | | /* MediaWiki:Mainpage.css — title hide only. All design in Common.css. */ |
| | | #firstHeading, .firstHeading, .mw-page-title-main { display: none !important; } |
| /* Hide the page title on Main_Page */
| |
| #firstHeading, .firstHeading, .mw-page-title-main, .page-header__title { display: none !important; } | |
| | |
| /* Top banner */
| |
| #mp-topbanner {
| |
| background: #cee0f2;
| |
| border: 1px solid #a2a9b1;
| |
| padding: 12px 16px;
| |
| margin-bottom: 14px;
| |
| text-align: center;
| |
| font-size: 1.05em;
| |
| }
| |
| | |
| /* Two-column layout - Desktop */
| |
| #mp-upper {
| |
| display: flex;
| |
| flex-wrap: nowrap; /* Prevent messy wrapping on desktop, let media queries handle it */
| |
| gap: 15px;
| |
| margin-bottom: 14px;
| |
| align-items: flex-start;
| |
| }
| |
| | |
| #mp-left {
| |
| flex: 1 1 55%;
| |
| min-width: 0; /* Prevents overflow issues */
| |
| }
| |
| | |
| #mp-right {
| |
| flex: 1 1 45%;
| |
| min-width: 0;
| |
| }
| |
| | |
| /* Headings */
| |
| .mp-h2 {
| |
| background: #cee0f2;
| |
| border: 1px solid #a2a9b1;
| |
| border-bottom: none;
| |
| padding: 5px 10px;
| |
| font-size: 1em;
| |
| font-weight: bold;
| |
| color: #202122;
| |
| margin: 0;
| |
| }
| |
| .mp-h2-yellow { background: #fef6e7; }
| |
| .mp-h2-green { background: #ecf5ec; }
| |
| .mp-h2-gray { background: #dce3ee; }
| |
| | |
| /* Body of sections */
| |
| .mp-body {
| |
| background: #ffffff;
| |
| border: 1px solid #a2a9b1;
| |
| border-top: none;
| |
| padding: 10px 12px;
| |
| margin-bottom: 12px;
| |
| font-size: 0.9em;
| |
| line-height: 1.6;
| |
| color: #202122;
| |
| overflow-x: auto; /* Allow tables to scroll horizontally safely */
| |
| box-sizing: border-box;
| |
| }
| |
| .mp-body ul { margin: 0; padding-left: 1.5em; }
| |
| | |
| /* Portal grid */
| |
| #mp-portals {
| |
| margin-top: 14px;
| |
| border: 1px solid #a2a9b1;
| |
| box-sizing: border-box;
| |
| }
| |
| #mp-portals-header {
| |
| background: #dce3ee;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| padding: 6px 12px;
| |
| font-weight: bold;
| |
| font-size: 0.95em;
| |
| }
| |
| .mp-portal-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| background: #ffffff;
| |
| }
| |
| .mp-portal-cell {
| |
| flex: 1 1 15%;
| |
| min-width: 100px; /* Reduce min-width for mobile safety */
| |
| border-right: 1px solid #eaecf0;
| |
| border-bottom: 1px solid #eaecf0;
| |
| padding: 10px 8px;
| |
| text-align: center;
| |
| font-size: 0.85em;
| |
| box-sizing: border-box;
| |
| }
| |
| .mp-portal-cell:hover { background: #eaf3fb; }
| |
| .mp-portal-cell a { color: #3366cc; font-weight: bold; display: block; text-decoration: none; }
| |
| .mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; }
| |
| .mp-portal-desc { display: block; color: #54595d; font-size: 0.85em; margin-top: 2px; font-weight: normal; }
| |
| | |
| | |
| /* ============================================================
| |
| RESPONSIVE DESIGN RULES
| |
| ============================================================ */
| |
| | |
| /* Tablet and Smaller Desktop (up to 1000px) */
| |
| @media screen and (max-width: 1000px) {
| |
| #mp-upper {
| |
| display: block !important; /* Break the flex layout to stack cleanly */
| |
| margin-bottom: 0 !important;
| |
| }
| |
| #mp-left, #mp-right {
| |
| width: 100% !important;
| |
| display: block !important;
| |
| margin-bottom: 15px !important;
| |
| }
| |
| .mp-portal-cell {
| |
| flex: 1 1 30% !important; /* 3 items per row instead of 6 */
| |
| }
| |
| }
| |
| | |
| /* Standard Mobile Phones (up to 600px) */
| |
| @media screen and (max-width: 600px) {
| |
| #mp-topbanner {
| |
| padding: 10px;
| |
| font-size: 0.95em;
| |
| }
| |
| .mp-body {
| |
| padding: 8px 10px; /* Shrink padding slightly to maximize screen space */
| |
| }
| |
| .mp-portal-cell {
| |
| flex: 1 1 45% !important; /* 2 items per row */
| |
| }
| |
| }
| |
| | |
| /* Very Small Mobile Phones (up to 400px) */
| |
| @media screen and (max-width: 400px) {
| |
| .mp-portal-cell {
| |
| flex: 1 1 100% !important; /* Stack portals completely (1 item per row) */
| |
| }
| |
| } | |
/* MediaWiki:Mainpage.css — title hide only. All design in Common.css. */
#firstHeading, .firstHeading, .mw-page-title-main { display: none !important; }