MediaWiki:Mobile.less/mainpage.less

From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>
/* ===================
        MAIN PAGE
   =================== */

// preview the mobile main page at <https://oldschool.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
   ========================== */
   
.pre-content h1 {
    text-align: center;
}

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
   -------------------- */

.mainpage-recent-updates {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
    border-bottom: 1px solid @mp-border-color;
    padding: 1.5em 1em 2.5em;
    white-space: nowrap;
    -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-halves {
        display: inline-block;
        margin: 1em .75em 0 0;
        width: 100%;
        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;
        }

    }
  img {
  width: 100%;
  margin-top: -12.5%;
    }
    .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;
    }

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

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

    }

}

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

.mainpage-contents {
    background: @shuttle-gray;
    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();
    }

    .tile-halves {
        border: none;
        background: none;
        box-shadow: none;
        flex: 0 0 auto;
        width: 200px;
        margin-right: 10px;
    }

    .tile-top {
        border-bottom: 1px solid lighten( @shuttle-gray, 10% );
        padding: 0;
        height: initial;
    }
	.tile-bottom {
	    padding: 0.5rem 1rem;
	}
    h2 {
        padding: 0 0 .35em;
        width: 100%;
        a {
            color: #444E5A;
            display: block;
            text-align:center;
        }
	}
}
/* --------------------
          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-thieving {
    .skill-color( #713684 ); // purple
}

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

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

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

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

}

/* --------------------
        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 {
        padding-bottom: 1.5em;
        border-bottom: 1px solid @mp-border-color;

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

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

    }

    .news-patchnotes {
        padding-top: .5em;
    }

}

/* --------------------
      discord server
   -------------------- */
@discord-purple: #7289da;
@discord-purple-dark: #697ec4;

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

    .tile-top {
        display: flex;
        align-items: center;
        justify-content: center;
        background: @discord-purple;
        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 {
            color: @white;
            font-weight: bold;
            font-size: 1.25em;
            margin: 0;
        }

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

    }

    .tile-bottom {
        background: @discord-purple-dark;
        border: none;
        padding: 1em 2em;

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

    }

}

/* --------------------
         twitter
   -------------------- */
@twitter-blue: #00ACED;
@twitter-dark-blue: #0084B4;

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

    .tile-top {
        display: flex;
        align-items: center;
        justify-content: center;
        background: @twitter-blue;
        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 {
            color: @white;
            font-weight: bold;
            font-size: 1.25em;
            margin: 0;
        }

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

    }

    .tile-bottom {
        background: @twitter-dark-blue;
        border: none;
        padding: 1em 2em;

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

    }

}
/* article of the week */
.mainpage-articleoftheweek .floatright,
.mainpage-articleoftheweek .floatright img {
    width: 100%;
}