MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
CaptainChris (talk | contribs) Created page with "→CSS placed here will be applied to all skins: →Container for left + right sections: .mp-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; →space between main and sidebar: } →Left content: .mp-left { flex: 1; →take up remaining space: } →Sidebar on right: .mp-right { width: 250px; →adjust sidebar width: }" |
CaptainChris (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* | /* Main page layout */ | ||
.mp-container { | .mp-container { | ||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: 20px; /* | gap: 20px; | ||
/* keep everything inside the wiki content width */ | |||
box-sizing: border-box; | |||
} | } | ||
/* Left | /* Left column fills remaining space */ | ||
.mp-left { | .mp-left { | ||
flex: 1; /* | flex: 1 1 auto; | ||
min-width: 0; /* prevents weird overflow with long content */ | |||
} | } | ||
/* | /* Right sidebar */ | ||
.mp-right { | .mp-right { | ||
width: | flex: 0 0 320px; /* fixed sidebar width on desktop */ | ||
max-width: 100%; | |||
box-sizing: border-box; | |||
border-left: 1px solid #e0e0e0; /* subtle divider */ | |||
padding-left: 16px; | |||
margin-left: 4px; | |||
} | |||
/* Make cards/embed inside the sidebar not hang off the edge */ | |||
.mp-right > * { | |||
width: 100%; | |||
} | |||
/* Responsive: stack on narrow screens */ | |||
@media (max-width: 900px) { | |||
.mp-container { | |||
flex-direction: column; | |||
} | |||
.mp-right { | |||
flex: none; | |||
width: 100%; | |||
border-left: 0; | |||
border-top: 1px solid #e0e0e0; | |||
padding-left: 0; | |||
padding-top: 12px; | |||
margin-left: 0; | |||
margin-top: 12px; | |||
} | |||
} | } | ||
Revision as of 04:45, 19 August 2025
/* CSS placed here will be applied to all skins */
/* Main page layout */
.mp-container {
display: flex;
align-items: flex-start;
gap: 20px;
/* keep everything inside the wiki content width */
box-sizing: border-box;
}
/* Left column fills remaining space */
.mp-left {
flex: 1 1 auto;
min-width: 0; /* prevents weird overflow with long content */
}
/* Right sidebar */
.mp-right {
flex: 0 0 320px; /* fixed sidebar width on desktop */
max-width: 100%;
box-sizing: border-box;
border-left: 1px solid #e0e0e0; /* subtle divider */
padding-left: 16px;
margin-left: 4px;
}
/* Make cards/embed inside the sidebar not hang off the edge */
.mp-right > * {
width: 100%;
}
/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
.mp-container {
flex-direction: column;
}
.mp-right {
flex: none;
width: 100%;
border-left: 0;
border-top: 1px solid #e0e0e0;
padding-left: 0;
padding-top: 12px;
margin-left: 0;
margin-top: 12px;
}
}