MediaWiki:Mobile.less/mainpage.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <pre>
/* ===================
        MAIN PAGE
   =================== */

// visualize a versão mobile da página principal em <https://pt.rs.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: 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
   -------------------- */

.mainpage-noticias-recentes {
    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: 'Notícias recentes';
        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-atalhos {
    background: @shuttle-gray;
    padding: 2.5em 1em 2em;

    &::before {
        content: 'Explorar';
        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-habilidades {

    .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-agilidade,
.skill-corpo-a-corpo {
    .skill-color( #932419 ); // red
}

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

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

.skill-pesca,
.skill-arco-e-flecha {
    .skill-color( #1a6671 ); // bluish
}

.skill-culinaria,
.skill-divinacao,
.skill-roubo {
    .skill-color( #713684 ); // purple
}

.skill-agricultura,
.skill-corte-de-lenha {
    .skill-color( #306f25 ); // dark green
}

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

.skill-invencao,
.skill-metalurgia {
    .skill-color( #b69213 ); // gold
}

/* --------------------
        portal
   -------------------- */

.mainpage-portal {

}

/* --------------------
        missões
   -------------------- */

.mainpage-missoes {

    &::before {
        content: 'Novidades';
        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;
        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;
        }

    }

    // Facebook colors
    &.mainpage-facebook  {

        .tile-top {
            background: #4262a9;
        }

        .tile-bottom {
            background: #3b5998;
        }

    }

    // Parceiros colors
    &.mainpage-parceiros  {

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

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

    }

}