Tags: Reverted Mobile edit Mobile web edit Advanced mobile edit |
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ZelocoreCMS Wiki Main Page Layout CSS */
| |
|
| |
|
| /* Top Banner */
| | /* Hide the page title exclusively on the Main Page */ |
| #mp-topbanner {
| | body.page-Main_Page h1#firstHeading, |
| background-color: #f8f9fa;
| | body.page-Main_Page .firstHeading, |
| border: 1px solid #a2a9b1;
| | body.page-Main_Page .mw-page-title-main { display: none !important; } |
| text-align: center;
| |
| padding: 15px;
| |
| margin-bottom: 15px;
| |
| font-size: 1.1em;
| |
| }
| |
| | |
| /* Two Column Layout */
| |
| #mp-upper {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| margin: 0 -8px;
| |
| }
| |
| | |
| #mp-left {
| |
| flex: 1 1 55%;
| |
| padding: 0 8px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| #mp-right {
| |
| flex: 1 1 45%;
| |
| padding: 0 8px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* Section Headers */
| |
| .mp-h2 {
| |
| background-color: #cedff2;
| |
| border: 1px solid #a2a9b1;
| |
| padding: 5px 10px;
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| font-family: 'Linux Libertine', Georgia, Times, serif;
| |
| margin-top: 15px;
| |
| }
| |
| | |
| .mp-h2-yellow { background-color: #fef6e7; }
| |
| .mp-h2-green { background-color: #e2f2d5; }
| |
| .mp-h2-gray { background-color: #eaecf0; }
| |
| | |
| /* Section Body */
| |
| .mp-body {
| |
| border: 1px solid #a2a9b1;
| |
| border-top: none;
| |
| padding: 10px;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| /* Portals Grid */
| |
| #mp-portals {
| |
| margin-top: 15px;
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa;
| |
| padding: 10px;
| |
| }
| |
| | |
| #mp-portals-header {
| |
| text-align: center;
| |
| font-weight: bold;
| |
| font-size: 1.1em;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| padding-bottom: 10px;
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| .mp-portal-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| margin: 0 -10px; /* Counteracts inner cell padding on desktop */
| |
| }
| |
| | |
| .mp-portal-cell {
| |
| flex: 1 1 30%;
| |
| min-width: 200px;
| |
| text-align: center;
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .mp-portal-icon {
| |
| display: block;
| |
| font-size: 2em;
| |
| margin-bottom: 5px;
| |
| }
| |
| | |
| .mp-portal-desc {
| |
| display: block;
| |
| font-size: 0.85em;
| |
| color: #54595d;
| |
| margin-top: 3px;
| |
| }
| |
| | |
| /* Hide title on Main Page */ | |
| body.page-Main_Page h1.firstHeading, | |
| body.page-Main_Page #firstHeading { | |
| display: none;
| |
| }
| |
| | |
| /* =========================================
| |
| RESPONSIVE MEDIA QUERIES
| |
| ========================================= */
| |
| | |
| /* Tablet & Small Desktop (Max 900px) */
| |
| @media (max-width: 900px) {
| |
| /* Stack the left and right columns completely */
| |
| #mp-upper {
| |
| margin: 0; /* Remove negative margins to prevent horizontal scroll */
| |
| }
| |
|
| |
| #mp-left, #mp-right {
| |
| flex: 1 1 100%;
| |
| padding: 0;
| |
| }
| |
|
| |
| #mp-right {
| |
| margin-top: 15px; /* Space between the stacked columns */
| |
| }
| |
| | |
| /* Change portals to a 2-column layout for tablets */
| |
| .mp-portal-cell {
| |
| flex: 1 1 45%;
| |
| }
| |
| }
| |
| | |
| /* Mobile Phones (Max 600px) */
| |
| @media (max-width: 600px) {
| |
| /* Compress banner padding and font size slightly */
| |
| #mp-topbanner {
| |
| padding: 10px;
| |
| font-size: 1em;
| |
| }
| |
| | |
| /* Compress section headers and body padding */
| |
| .mp-h2 {
| |
| font-size: 1.1em;
| |
| padding: 5px 8px;
| |
| }
| |
|
| |
| .mp-body {
| |
| padding: 8px;
| |
| }
| |
| | |
| /* Stack portals into a single column */
| |
| .mp-portal-grid {
| |
| margin: 0;
| |
| }
| |
|
| |
| .mp-portal-cell {
| |
| flex: 1 1 100%;
| |
| min-width: unset; /* Prevents overflow on very small devices */
| |
| padding: 10px 0;
| |
| }
| |
| } | |
/* Hide the page title exclusively on the Main Page */
body.page-Main_Page h1#firstHeading,
body.page-Main_Page .firstHeading,
body.page-Main_Page .mw-page-title-main { display: none !important; }