MediaWiki:Minerva.less/mainpage.less

//

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

// preview the mobile main page at <https://near-reality.wiki/?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 {
	@media only screen and (max-width: 65.999rem) {
		h1 {
			text-align: center;
		}
	}
}

.mainpage-body {
	// flex doesnt look great currently
	display: unset;

    ul {
        margin: 0 .25em;
        list-style-type: disc;
    }

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

}

.mainpage-left {

	// common style
	margin-right: 0;

    .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 {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 1.5em 1em 2.5em;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch; // for inertia scrolling

    -webkit-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;

    &::before {
        content: 'Recent updates';
        display: block;
        position: -webkit-sticky;
        position: sticky;
        left: 1.5em;
        .uppercase-heading();
    }

    .tile-halves {
        display: inline-block;
        margin: 1em .75em 0 0;
        width: 100%;
        white-space: initial;
        flex: unset;

        scroll-snap-align: center;

        &: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;
            margin-right: 1em;
        }

    }

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

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

    .byline {
        margin: 0;

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

    }

    // dot separator between links
    a + a:before {
        content: "· ";
        display: inline-block;
        white-space: pre-wrap;
        pointer-events: none;
    }

	// center recent updates for larger widths
	// 18em tiles * 3 + 1em gutters * 4 = 58em
	@media only screen and (min-width: 58em) {
		overflow-x: initial;

		&::before {
			width: 100%;
		}

		.tile-halves {
			width: 85vw;
			max-width: 18em;

			&:nth-child(3) {
				margin-right: 0;
			}

			img {
				margin-top: unset;
			}
		}

		.tile-halves:nth-child(3) {
			margin-right: 0;
		}

	}

	// common hides it
	@media only screen and (max-width: 65.999rem) {
		.tile-halves {
			&:last-child {
				display: block;
			}
			&:nth-last-child(1),
			&:nth-last-child(3){
				margin-right: 0;
			}
		}
	}
}

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

.mainpage-contents {
    background: var(--body-mid);
    padding: 55px 1em 2em 2.5em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow-x: auto;
    position:relative;
    
    &::before {
        content: 'Explore';
        margin: 1em;
        position: absolute;
        top: 0;
        .uppercase-heading(@text-color: inherit);
    }

    .tile-halves {
        border: none;
        background: none;
        box-shadow: none;
        flex: 0 0 auto;
        width: 200px;
        margin-right: 10px;
        // common style sets it as 0
        &:nth-child(3) {
            margin-right: 0.9rem
        }
    }

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

	.tile-bottom {
		border: none;
	}

    h2 {
        width: 100%;
	}
}

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

.mainpage-skills {

    .tile-top {

        ul {
			// MOBILE STYLES CONFLICT WITH COMMON HENCE THE COMMENTING
//			columns: 3; 
//			width: 32em; 
//			list-style: none; 
//			margin-left: .75em;

            @media only screen and (min-width: 32em) {
                width: 100%;
                max-width: 50em;
                margin: auto;
            }

        }

/*		li {
			display: flex;
			align-items: center;
			margin-bottom: .6em;

            // skill icon
            a:first-child {
                width: 25px;
                height: 25px;
                padding: 4px;
                border-radius: 3px;
            }

            // skill name
			a:last-child {
				flex: 1;
				color: @river-bed;
				font-weight: bold;
				padding-left: .5em;
			}

        } */

    }

}

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

.mainpage-wikinews {

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

    .news-date {
        font-weight: bold;
        margin-bottom: 0;
    }

    p {
        margin-left: .5em;
        margin-right: .5em;
    }

}

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

.mainpage-discord {

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

        .partner-icon img {
            float: left;
            margin: 0 1em 0 -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 {
            float: left;
            margin: 0 1em 0 -1em;
        }

        .twitter-name {
            margin: 0;
        }

        .twitter-tagline {
            margin: 0;
        }

    }

}

/* ==========================
          tbz tile
   ========================== */
/*
// same as recent-updates
.mainpage-trailblazer {
	.tile-row {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		padding: 1.5em 1em 2.5em;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch; // for inertia scrolling
	}

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

	.tile-halves {
		display: inline-block;
		margin: 1em .75em 0 0;
		width: 100%;
		white-space: initial;
		flex: unset;
		
		scroll-snap-align: center;
		
		&: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;
		    margin-right: 1em;
		}
	}

	@media only screen and (min-width: 58em) {
		overflow-x: initial;

		.tile-halves {
			width: 85vw;
			max-width: 18em;

			&:nth-child(3) {
				margin-right: 0;
			}

			img {
				margin-top: unset;
			}
		}

		.tile-halves:nth-child(3) {
			margin-right: 0;
		}

	}
}
*/