MediaWiki:Minerva.less/mainpage.less

/* ===================
        MAIN PAGE
   =================== */

// preview the mobile main page at <https://brightershoreswiki.org/?useformat=mobile>

/* ===================
          mixins
   =================== */

.uppercase-heading(@text-color: var(--byline-color)) {
    color: @text-color;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .025em;
}

@keyframes slide-up {

    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

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

.mainpage-header {
	margin: 2em 1em 0; // reduce margins
	
	.header-intro {
		@media only screen and (max-width: @width-breakpoint-desktop) {
			h1 {
				text-align: center;
				font-size: 1.8em;
			}
			
			p {
				font-size: 1em; // reset from 1.1m
			}
		}
	}
}

.mainpage-body {
    .tile-row {
    	// common does width: 100%
    	width: inherit;
    }
}

.mainpage-left {

    .tile {
        padding: 2.5em 1.75em 2em;

        h2 {
            padding: 0;
            margin: .65em .5em;
        }

    }

    .tile-halves {
        h2 {
            padding: 0;
            margin: .65em .5em;
        }
    }

}

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

/* --------------------
      recent updates
   -------------------- */

.mainpage-recent-updates {
	padding: 1.5em 1em 2.5em;

    &::before {
        content: 'Recent updates';
        display: block;
        margin-left: 1.5em;
        .uppercase-heading();
        grid-column: ~"1 / 4";
    }

    .tile-halves {
        display: inline-block;
        width: 100%;
        white-space: initial;
        flex: unset;

        &:nth-child(1) {
            animation: .9s .2s both slide-up;
        }

        &:nth-child(2) {
            animation: .9s .4s both slide-up;
        }

        &:nth-child(3) {
            animation: .9s .6s both slide-up;
        }

    }

	.tile-top {
		height: 9em;
		overflow: hidden;
	}

    .tile-bottom {
        padding-bottom: .5rem;
    }

    .byline {
        margin: 0;

        & + h2 {
            margin: .025em 0 0;
            padding: 0;
        }

    }

	// center recent updates for smaller widths
	@media only screen and (max-width: @width-breakpoint-tablet) {

		&::before {
			text-align: center;
			margin: 0;
			grid-column: auto;
		}

	}
}

/* --------------------
      wiki contents
   -------------------- */

.mainpage-contents {
    background: var(--body-mid);
    padding: 55px 1em 2em 2.5em;
    overflow-x: auto;
    grid-template-columns: repeat(6, 1fr) !important; // shouldnt break into two
    position: relative;
    scroll-snap-align: center;
    
    &::before {
        content: 'Explore';
        margin: 1em;
        position: absolute;
        top: 0;
        .uppercase-heading(@text-color: inherit);
        grid-column: ~"1 / 6";
    }

    .tile-halves {
        border: none;
        background: none;
        box-shadow: none;
        width: 200px;
    }

    .tile-top {
        padding: 0;
        height: initial;
    }

	.tile-bottom {
		border: none;
	}

    h2 {
        width: 100%;
	}
}

/* --------------------
          skills
   -------------------- */

.mainpage-skills .tile-top ul {
    @media only screen and (max-width: @width-breakpoint-desktop) {
        margin: 0;
    }
}

/* --------------------
        wiki news
   -------------------- */

.mainpage-wikinews {

    &::before {
        content: 'From the wiki';
        margin-left: .75em;
        .uppercase-heading();
    }

}

/* --------------------
      discord server
   -------------------- */

.mainpage-discord {

	.tile-top {
		padding: 1em 2em;
		height: 70px; // not in em because the server icon is a fixed size

        .partner-icon {
            margin-right: 1em;
        }

        .server-name {
            margin: 0;
        }

        .server-tagline {
            margin: 0;
        }

    }

}

/* --------------------
         twitter
   -------------------- */

.mainpage-twitter {
	margin-bottom: 0;

	.tile-top {
		padding: 1em 2em;
		height: 70px; // not in em because the server icon is a fixed size

        .twitter-logo {
            margin-right: 1em;
        }

        .twitter-name {
            margin: 0;
        }

        .twitter-tagline {
            margin: 0;
        }

    }

}