MediaWiki:Common.css: Difference between revisions
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* | /* General reset for consistent box-sizing */ | ||
*, | |||
*::before, | |||
*::after { | |||
box-sizing: border-box; | |||
} | } | ||
/* | /* Center the entire page content */ | ||
#mw-page-container { | |||
display: flex; | |||
justify-content: center; | |||
align-items: flex-start; | |||
flex-direction: column; | |||
max-width: 1200px; /* Adjust this width as per your design */ | |||
margin: 0 auto; | |||
} | } | ||
/* | /* Style for the header and ensure the logo is centered */ | ||
#mw-head-container { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: 100%; | |||
padding: 10px 0; | |||
background: #f8f9fa; /* Light background for visibility */ | |||
} | } | ||
#p-logo { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
max-width: 200px; | |||
} | } | ||
/* Center sidebar */ | |||
#mw-navigation { | |||
display: flex; | |||
justify-content: center; | |||
align-items: flex-start; | |||
width: 100%; | |||
padding: 10px 0; | |||
} | } | ||
/* | /* Center main content */ | ||
#mw-content-text { | |||
text-align: center; | |||
padding: 20px 10px; | |||
#mw- | |||
} | } | ||
/* | /* Adjust styles for the sidebar scaling */ | ||
#mw-sidebar { | |||
max-width: 300px; | |||
margin: 10px auto; | |||
} | } | ||
/* | /* Ensure responsiveness by making sidebar, header, and logo resize well */ | ||
@media (max-width: 768px) { | |||
#mw-page-container { | |||
max-width: 100%; | |||
} | |||
} | |||
# | #mw-navigation, | ||
#mw-sidebar, | |||
#mw-head-container { | |||
width: 100%; | |||
} | } | ||
#mw-content-text { | #mw-content-text { | ||
padding: 10px; | |||
} | |||
} | } |
Revision as of 02:22, 10 December 2024
/* General reset for consistent box-sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Center the entire page content */
#mw-page-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
max-width: 1200px; /* Adjust this width as per your design */
margin: 0 auto;
}
/* Style for the header and ensure the logo is centered */
#mw-head-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px 0;
background: #f8f9fa; /* Light background for visibility */
}
#p-logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 200px;
}
/* Center sidebar */
#mw-navigation {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
padding: 10px 0;
}
/* Center main content */
#mw-content-text {
text-align: center;
padding: 20px 10px;
}
/* Adjust styles for the sidebar scaling */
#mw-sidebar {
max-width: 300px;
margin: 10px auto;
}
/* Ensure responsiveness by making sidebar, header, and logo resize well */
@media (max-width: 768px) {
#mw-page-container {
max-width: 100%;
}
#mw-navigation,
#mw-sidebar,
#mw-head-container {
width: 100%;
}
#mw-content-text {
padding: 10px;
}
}