MediaWiki:Common.less/mainpage.less: Difference between revisions

/* ===================
        MAIN PAGE
   =================== */
   
body.page-Main_Page.action-view .catlinks,
body.page-Main_Page.action-view #contentSub,
body.page-Main_Page.action-view #firstHeading,
body.page-Main_Page.action-view #siteNotice {
  display: none;
}


/* ===================
        variables
   =================== */

@mp-text-light: fade( @white, 90% );
@mp-gutter-width: .9rem;


/* ==========================
      page-specific styles
   ========================== */

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 
        // Note: as of mw1.38, this is not needed anymore
        // blanking both [[MediaWiki:Mainpage-title-loggedin]] &
        // [[MediaWiki:Mainpage-title]] applies an inline `display: none;`
        // #firstHeading,
        // anything listed in the sitenotice should already be on the main page
        #siteNotice {
            display: none;
        }

    }

}

/* ====================
      general styles
   ==================== */

.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;

    .header-intro {
        flex: 2;

        h1 {
            font-size: 2.5em;
            font-weight: bold;
            border: none;
            margin: 0 0 .15em;
        }

        p {
            font-size: 1.1em;
            line-height: 1.7em;
        }

    }

    .header-stats {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -1em;
    }

}

// main sections
.mainpage-body {
	display: grid;
	grid-template-areas:
	"event event event" // for tbzr tile
	"update update update"
	"content content content"
	"left left right";
	gap: 0.9rem;
	grid-template-columns: repeat(3, 1fr);

    h2 a {
        color: var(--text-color);
    }

    .tile {
        padding-left: 1.75em;
        padding-right: 1.75em;
        max-width: 100%;
        border: none;
    }

    .tile-row {
        width: 100%;
        margin-bottom: 0;
    }
}

.mainpage-body .tile-row {
	display: grid;
	gap: 0.9rem
}

// left column
.mainpage-left {
	grid-area: left;
    flex: 2;
    display: flex;
    flex-flow: column wrap;

    > * {
        margin: 0 0 @mp-gutter-width;
    }

}

// right column
.mainpage-right {
	grid-area: right;
    flex: 1;
    display: flex;
    flex-flow: column wrap;

    > * {
        margin: 0 0 @mp-gutter-width;
    }

}

/* ====================
        components
   ==================== */

.arrow {
    background: url('filepath://White-chevron.svg') no-repeat;
    display: inline-block;
    height: .7rem;
    width: .45rem;
    vertical-align: middle;

    &.dark {
        filter: invert(80%);
    }

}

/* =============================
      section-specific styles
   ============================= */


/* --------------------
      wiki contents
   -------------------- */
@mp-contents-height: 5.5rem;

.mainpage-contents {
	grid-area: content;
	grid-template-columns: repeat(5, 1fr);

    .tile-halves {
        flex: 1;
        background: none;
    }

    .tile-top {
	    height: @mp-contents-height;
        position: relative; // needed for ribbon
        
        &.tile-image img {
        	height: auto;
        }
    }

    h2 {
        margin: 0;
        padding: 0;
    }
    
    .tile-bottom {
    	box-shadow: inset 0 0 2px rgba(255,255,255,0.5);
    	
    	h2 {
    		background: var(--body-darker);
    		box-shadow: @infobox-card-shadow;
    		margin: 3px !important;
    	}

    	&.link-button a {
    		padding: 0.65em 0.2em; // prevent grid gap misalignment
    	}
    }

}

/* --------------------
      popular pages
   -------------------- */

.popular-pages ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .6em;
	margin: 1em 0 .7em 0;
}

.mp-popular-page-light {
	display: flex;
	align-items: center;
	background-color: var(--button-background);
	transition: 100ms;

    a {
    	flex: 1;
    	display: block;
        color: @white;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        padding: .7em 1em;
    }

    &:hover {
        filter: brightness(115%);
        transition: 100ms;
    }

}

/* --------------------
      discord server & twitter/X
   -------------------- */
.mainpage-social {
    border: none;
    box-shadow: @box-shadow-dark;

    .tile-top {
        display: flex;
        align-items: center;
        padding: 1em 1.5em;

        a {
            flex: 1;
            position: relative;
            text-decoration: none;

            &:hover .arrow {
                transform: translateX(50%);
            }

        }

    }

    .tile-bottom {
        border: none;
        padding: 1em 1.75em;

        p {
            color: @white;
            font-weight: bold;
            font-size: .9em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: .03em;
            margin: 0;
        }

    }

    .social-icon {
        margin-right: .75em;
        text-align: center;
        width: 60px;
    }

    .social-header {
        color: @white;
        font-weight: bold;
        font-size: 1.15em;
        margin: .5em 0 -0.15em;
    }

    .server-tagline {
        color: @mp-text-light;
        margin-bottom: .5em;
    }

    .arrow {
        position: absolute;
        top: ~"calc(50% - .5em)"; // center arrow on its point
        right: 0;
        height: 1em;
        width: .7em;
        background-size: .7em 1em;
        transition: .3s ease-out;
    }
	
	// Discord colors
    &.mainpage-discord  {

        .tile-top {
            background: @discord-bg;
        }

        .tile-bottom {
            background: @discord-bg-dark;
        }

    }

    // X (Twitter) colors
    &.mainpage-twitter  {

        .tile-top {
            background: @twitter-bg;
        }

        .tile-bottom {
            background: @twitter-bg-dark;
        }
    }
}

/* --------------------
      edit the wiki
   -------------------- */

.mainpage-editing {
    border: none;
    box-shadow: @box-shadow-dark;

    .tile-top {
        background: var(--body-darker);
    }

    .tile-bottom {
        background: saturate( darken( @steel-blue, 4% ), 4% );
        border: none;
        padding: .8rem 1.5rem .4rem;
    }

    h2,
    a {
        color: @white;
    }

    p {
        color: @mp-text-light;
    }

    ul {
        list-style-image: url('filepath://Transparent-chevron.svg');
    }

}

/* ==========================
          media queries
   ========================== */

@media only screen and (max-width: @width-breakpoint-desktop-wide) {

	// switch to two rows of three tiles
	.mainpage-contents {
		grid-template-columns: repeat(3, 1fr)
	}

}

@media only screen and (max-width: @width-breakpoint-desktop) {

	// mainpage-left and -right on one column now
	.mainpage-body {
		grid-template-areas:
		"event event event"
		"update update update"
		"content content content"
		"left left left"
		"right right right";
	}

    .mainpage-recent-updates {
		grid-template-columns: repeat(2, 1fr);

        .tile-halves {

            // hide third recent update
            &:last-child {
                display: none;
            }

        	// zoom on hover
			&:hover .tile-top img {
				transform: scale(1.04);
        	}

        }

        .tile-top {
            height: 18vw;
            min-height: 9em;
        }

    }

    // hide other things
    .mainpage-header .header-stats {
        display: none;
    }

    // kill margin as it duplicates grid's gap
    .mainpage-left > *:last-child,
    .mainpage-right > *:last-child {
        margin-bottom: 0;
    }

	.popular-pages ul {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: @width-breakpoint-tablet) {
	.mainpage-recent-updates {
		// resulting in single column
		grid-template-columns: none;

		// revert display:none
		.tile-halves:last-child {
			display: flex;
		}
	}

	// switch to three rows of two tiles
	.mainpage-contents {
		grid-template-columns: repeat(2, 1fr);
	}
}