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

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

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

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

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

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

.mainpage-left {

    .tile {
        padding: 2em 1.75em;

        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: 5.5rem;
    }

	.tile-bottom {
		border: none;
	}
}

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

}

/* --------------------
          social
   -------------------- */

.mainpage-social {
    border: none;
    margin-bottom: 0;

    .tile-top {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1em 2em;
        min-height: 70px; // not in em because the server icon is a fixed size

        .social-icon {
            float: left;
            margin: 0 1em 0 -1em;
            width: 60px;
            text-align: center;
        }

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

        .social-tagline {
            color: @mp-text-light;
            margin: 0;
        }

    }

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

        p {
            .uppercase-heading();
            color: @white;
            font-size: .9em;
            text-align: center;
            margin: 0;
        }

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

    }

}