MediaWiki:Common.less/mainpage.less
Jump to navigation
Jump to search
/* ======================
Main Page
====================== */
body.page-Main_Page {
// limit max width for readability
// don't use #mw-content-text because it includes the editform
.mw-parser-output {
max-width: 75em;
margin: 0 auto;
}
// not when editing
&.action-view {
.catlinks,
#contentSub,
// hide pagetitle in favor of .mainpage-header
#firstHeading,
// anything listed in the sitenotice should already be on the main page
#siteNotice {
display: none;
}
}
}
// use css grid for layout; according to GA 98% of our users' browsers support it
.mp-grid {
display: grid;
grid-gap: .8em;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"vote vote vote vote"
"head head head head"
"yg yg old old "
"rsw osw ptbr rsc "
"foot foot foot foot";
@media screen and (max-width: 900px) {
grid-gap: .6em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"vote vote"
"head head"
"yg yg "
"old old "
"rsw osw "
"ptbr rsc "
"foot foot";
}
}
/* --------------
header
-------------- */
.mp-header {
display: flex;
align-items: center;
grid-area: head;
padding: 1.75em 1.5em;
background: @black-haze;
border: 1px solid @mystic;
h1 {
border: none;
font-weight: bold;
margin: 0;
padding: 0;
}
&.section-vote {
grid-area: vote;
color: @black-haze;
background: @shuttle-gray;
border-color: @river-bed;
h1 {
color: white;
}
a {
color: @mystic;
font-weight: bold;
}
}
@media screen and (max-width: 800px) {
display: initial;
}
}
.mp-header-left {
flex: 3;
padding-right: 1em;
}
.mp-header-right {
flex: 2;
text-align: right;
ul {
display: flex;
justify-content: flex-end;
font-weight: bold;
list-style: none;
margin: 0;
@media screen and (max-width: 800px) {
justify-content: flex-start;
}
}
li + li {
margin-left: 1.5em;
}
@media screen and (max-width: 800px) {
margin-top: 1em;
text-align: inherit;
}
}
/* --------------
sections
-------------- */
.mp-section {
border: 1px solid @mystic;
padding: 1.5em;
h2 {
border: none;
font-weight: bold;
margin: 0 0 .5em;
padding: 0;
}
}
.section-yewgrove {
grid-area: yg;
}
.section-archive {
grid-area: old;
}
.section-yewgrove,
.section-archive {
display: flex;
flex-direction: column;
ul {
flex: 1;
}
.see-more {
text-align: right;
margin-bottom: 0;
}
}
.section-wiki {
padding: .75em 1em;
h2 {
font-size: 1.3em;
}
}
.section-rsw {
grid-area: rsw;
}
.section-osw {
grid-area: osw;
}
.section-ptbr {
grid-area: ptbr;
}
.section-rsc {
grid-area: rsc;
}
/* --------------
footer
-------------- */
.mp-footer {
grid-area: foot;
font-size: .9em;
padding: 1em;
text-align: center;
}
.mw-warning-with-logexcerpt {
display: none;
}