MediaWiki:Common.less/mainpage.less

/* ======================
         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;
}