MediaWiki:Mobile.less/mainpage.less

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
// <pre>
/* ===================
        MAIN PAGE
   =================== */

// preview the mobile main page at <https://runescape.wiki/?useformat=mobile>

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

// text colors
@mp-header-color: @river-bed;
@mp-text-color: @tundora;
@mp-text-light: fade( @white, 85% );

// element colors
@mp-border-color: @mystic;
@mp-background-color: @white;

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

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

.skill-color(@color) {

    // icon
    a:first-child {
        background: desaturate( lighten( @color, 15% ), 20% );
    }

}

@keyframes slide-up {

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

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

}

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

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

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

}

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

body.page-RuneScape_Wiki {

    // "Welcome, <username>"
    .pre-content {
    	display: none !important;
    }

    #content {
        padding-bottom: 0;
    }

    .content {
        margin: 0 auto;
    }

    // restore margin removed above
    .last-modified-bar {
        margin: 0 1em;
    }

}

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

.mainpage-body {
    color: @mp-text-color;

    h2,
    h2 a {
        color: @mp-header-color;
    }

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

}

.mainpage-left {

    > * {
        border-bottom: none;
    }

    .tile {
        padding: 2.5em 1.75em 2em;
        border-left-width: 0;
        border-right-width: 0;

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

    }

    .tile-halves {
        border-left-width: 0;
        border-right-width: 0;

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

    }

}

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

/* --------------------
      recent updates
   -------------------- */
// big tile
.tile.big-tile {
	border: none;
	border-bottom: 1px solid @mp-border-color;
}

// 3 tiles
.mainpage-recent-updates {
    border-bottom: 1px solid @mp-border-color;
    padding: 1.5em 1em 2.5em;
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; // for inertia scrolling

    -webkit-scroll-snap-destination: 50% 50%; // old spec, deprecated
    scroll-snap-destination: 50% 50%; // old spec, deprecated
    -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 {
    	width: 78%;
    	
    	p,
    	a {
    		white-space: normal !important;
    	}
    }

    .tile-halves {
        display: inline-block;
        margin: 1em .75em 0 0;
        width: 85vw;
        max-width: 18em;
        white-space: initial;

        -webkit-scroll-snap-coordinate: 50% 50%; // old spec, deprecated
        scroll-snap-coordinate: 50% 50%; // old spec, deprecated
        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 {
        display: flex; //Forces tiles to align by top instead of bottom
        padding-bottom: .5rem;

        p:not(.byline) {
            color: @mp-text-color;
        }

    }

    .byline {
        margin: 0;

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

    }

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

        &::before {
            width: 100%;
        }

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

    }

}

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

.mainpage-contents {
    background: @shuttle-gray;
    padding: 2.5em 1em 2em;

    &::before {
        content: 'Explore';
        margin-left: 1.5em;
        .uppercase-heading();
    }

    .tile-halves {
        border: none;
        background: none;
        box-shadow: none;
        margin: 0 1.5em;

        &:first-child {
            margin-top: 1.25em;

            .tile-bottom {
            	border-top: none;
            }

        }

        &:last-child {
            margin-bottom: 0;

            .tile-top {
                border-bottom: none;
            }

        }

    }

    .tile-bottom {
        border-color: lighten( @shuttle-gray, 15% );
        padding: .25em 0;
        background: none;
    }

    h2 {
        padding: 0 0 .35em;
        width: 100%;

        a {
            color: @black-haze;
            display: block;
        }

    }

}

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

.mainpage-skills {

    .tile-top {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch; // for inertia scrolling

        h2 {
            position: -webkit-sticky;
            position: sticky;
            left: .5em;
        }

        ul {
            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;
            }

        }

    }

}

.skill-agility,
.skill-melee {
    .skill-color( #932419 ); // red
}

.skill-ranged {
    .skill-color( #4c6215 ); // green
}

.skill-magic {
    .skill-color( #304791 ); // blurple
}

.skill-fishing,
.skill-fletching {
    .skill-color( #1a6671 ); // bluish
}

.skill-cooking,
.skill-divination,
.skill-thieving {
    .skill-color( #713684 ); // purple
}

.skill-farming,
.skill-woodcutting {
    .skill-color( #306f25 ); // dark green
}

.skill-mining,
.skill-summoning {
    .skill-color( #315f8d ); // dark blue
}

.skill-invention,
.skill-smithing {
    .skill-color( #b69213 ); // gold
}

.skill-archaeology {
	.skill-color( #784212 ); // brown
}

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

.mainpage-wikinews {

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

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

	// for specificity over .content p
    .mainpage-left & p {
        margin-left: .75em;
        margin-right: .75em;
    }

}

/* --------------------
        discussions
   -------------------- */

.mainpage-yg {
    display: none;
    padding-bottom: 2.5em !important;

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

    // only show for logged-in users
    body.is-authenticated & {
        display: inherit;
    }

}

/* --------------------
      runescape news
   -------------------- */

.mainpage-news {
    background: @black-haze;

    .news-updates {

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

        li {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

    }

}

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

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

    .tile-top {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1em 2em;
        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: #7289da;
        }

        .tile-bottom {
            background: #697ec4;
        }

    }

    // Twitter colors
    &.mainpage-twitter  {

        .tile-top {
            background: #1da1f2;
        }

        .tile-bottom {
            background: #1e96e0;
        }

    }

}

/* --------------------
       Events Team
   -------------------- */

.mainpage-events {
	border: none;
	margin-bottom: 0;
	
	.tile-top {
		background-color: #4f348b;
		color: #fff;
		padding: 1em 2em;
		
		h2 {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		.note {
			margin-top: 0;
			color: #949eaa;
			font-style: italic;
			
			a, a:visited {
				color: #b8c5d4;
			}
		}
		
		a, a:visited,
		h2 a {
			color: #fff;
			text-decoration: none;
		}
		
		ul {
			//list-style-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='5' height='13'%3E %3Ccircle cx='2.5' cy='9.5' r='2.5' fill='%23ffffff'/%3E %3C/svg%3E");
			list-style: none;
			margin-top: 1em;
			margin-left: 0;
		}
		
		li {
			padding-bottom: 0.6em;
			overflow: auto;
			
			img {
				max-width: 30px;
				width: auto;
				height: auto;
			}
			
			a:hover, a:focus {
				text-decoration: underline;
			}
			
			a {
				float: left;
				
				&:first-child {
					width: 30px;
				}
				&:last-child {
					padding-left:1.5em;
					text-indent:-1em;
					line-height: 1.5;
				}
			}
			
			&:last-of-type {
				display: none;
			}
		}
	}
	
	.tile-bottom {
        border: none;
        padding: 1em 1.75em;
        background-color: #3d276b;
        color: #fff;
        font-weight: bold;
	    font-size: .9em;
	    text-align: center;
	    text-transform: uppercase;
	    letter-spacing: .03em;
	    margin: 0;
        
        body.wgl-darkmode & {
        	background-color: #3d276b;
        	color: #fff;
        }
        
        a, a:visited {
			color: #fff;
			text-decoration: none;
		}
		
		.arrow {
			margin-left: .2em;
		}
    }
}