MediaWiki:Test.less

@import 'MediaWiki:Common.less/variables.less'; @import 'MediaWiki:Common.less/mixins.less';

// grid mp test

/* ==========================================================================

*           DESKTOP ZONE MediaWiki:Common.less/mainpage.less            
* ========================================================================== */

/* ===================

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

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

/*

root {

--bigtile-background-color: #f9f3eb; --bigtile-background-fade-zero: fade(#f9f3eb, 0%); --bigtile-background-fade-seventyfive: fade(#f9f3eb, 75%); }

• /

/* ===================

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

// skill training colors .skill-color(@color) {

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

   // skill name
   &:hover a:last-child {
       background: @color;
   }

}

/* ==========================

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

body.page-Old_School_RuneScape_Wiki {

   // limit max width for readability
   // don't use #mw-content-text because it includes the editform
   .mw-parser-output {
       max-width: 75em;
       margin: 0 auto;
   }

   // not when editing
   &.action-view {

       .catlinks,
       #contentSub,
       // hide pagetitle in favor of .mainpage-header 
       // Note: as of mw1.38, this is not needed anymore
       // blanking both MediaWiki:Mainpage-title-loggedin &
       // MediaWiki:Mainpage-title applies an inline `display: none;`
       // #firstHeading,
       // anything listed in the sitenotice should already be on the main page
       #siteNotice {
           display: none;
       }

   }
   
   // temporary
   .line-break {
       display: none !important
   }

}

/* ====================

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

.mainpage-header {

   display: flex;
   margin: 2.6em 1.75em 1.5em;

   .header-intro {
       flex: 2;

       h1 {
           font-size: 2.5em;
           font-weight: bold;
           border: none;
           margin: 0 0 .15em;
       }

       p {
           font-size: 1.1em;
           line-height: 1.7em;
       }

   }

   .header-stats {
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: -1em;
   }

}

// main sections .mainpage-body { display: grid; grid-template-areas: "update update update" "content content content" "left left right"; gap: 0.9rem; grid-template-columns: repeat(3,1fr);

   h2 a {
       color: var(--text-color);
   }

   .tile {
       padding-left: 1.75em;
       padding-right: 1.75em;
       max-width: 100%;
   }

   .tile-row {
       width: 100%;
       margin-bottom: 0;
   }

}

.mainpage-body .tile-row { display: grid; gap: 0.9rem }

// left column .mainpage-left { grid-area: left;

   flex: 2;
   display: flex;
   flex-flow: column wrap;

   > * {
       margin: 0 0 @mp-gutter-width;
   }

}

// right column .mainpage-right { grid-area: right;

   flex: 1;
   display: flex;
   flex-flow: column wrap;

   > * {
       margin: 0 0 @mp-gutter-width;
   }

}

/* ====================

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

.arrow {

   background: url('filepath://White-chevron.svg') no-repeat;
   display: inline-block;
   height: .7rem;
   width: .45rem;
   vertical-align: middle;

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

}

/* =============================

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

/* --------------------

     recent updates
  -------------------- */

// big tile /* unused .tile.big-tile { width: 100%;

   background: linear-gradient(to left, var(--bigtile-background-fade-zero), var(--bigtile-background-fade-seventyfive), var(--bigtile-background-color) 40%), url("filepath://Main page Twisted League.png") right / auto 100% no-repeat @white;
   margin-bottom: @mp-gutter-width;
   padding-right: 8vw;

} */

.mainpage-recent-updates { grid-area: update; grid-template-columns: repeat(3,1fr);

   .tile-halves {
       flex: 1;
       align-content: flex-start;

       // zoom on hover
       &:hover .tile-top img {
           transform: scale(1.04);
       }

   }

   .tile-bottom.link-button a {
       text-align: left;
       padding: 1rem 1.5rem .75rem;
   }

   h2 {
       margin: -0.5em 0 .3em;
   }

   p:not(.byline) {
       font-size: .9em;
       line-height: 1.75em;
       color: var(--text-color);
   }

}

/* --------------------

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

@mp-contents-height: 4.5rem;

.mainpage-contents { grid-area: content; grid-template-columns: repeat(6,1fr);

   .tile-halves {
       flex: 1;
   }

   .tile-top {
       position: relative; // needed for ribbon
   }

   h2 {
       margin: 0;
       padding: 0;
   }

   .tile-bottom.link-button a {
   	padding: 0.75em 0.2em; // prevent grid gap misalignment
   }

}

/* --------------------

     skill training
  -------------------- */

.mainpage-skills {

   ul {
       columns: 3 9em;
       margin: 1em .7em .7em 1em;
   }

   // skill row
   li {
       display: flex;
       margin-bottom: .29em;

       a {

           // skill icon
           &:first-child {
               border-radius: @border-radius;
               padding: 4px;
               width: 25px;
               height: 25px;
               text-align: center;
               display: flex;
   		    justify-content: center;
   		    align-items: center;
           }

           // skill text
           &:last-child {
               flex: 1;
               display: flex;
               align-items: center;
               font-weight: bold;
               padding-left: .7em;
               text-decoration: none;
           }

       }

       &:hover a {

           &:first-child {
               border-radius: @border-radius 0 0 @border-radius;
           }

           &:last-child {
               color: @mp-text-light;
               border-radius: 0 @border-radius @border-radius 0;
           }

       }

   }

}

.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

}

/* --------------------

     popular mw.pages
  -------------------- */

.popular-mw.pages ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .6em; margin: 1em 0 .7em 0; }

// skill row .mp-popular-page-light { display: flex; align-items: center; background-color: var(--button-background); transition: 100ms;

   a {
   	flex: 1;
   	display: block;
       color: @white;
       font-weight: bold;
       text-align: center;
       text-decoration: none;
       padding: .7em 1em;
   }

   &:hover {
       filter: brightness(115%);
       transition: 100ms;
   }

}

/* --------------------

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

.mainpage-discord {

   border: none;
   box-shadow: @box-shadow-dark;

   .tile-top {
       display: flex;
       align-items: center;
       background: @discord-bg;
       padding: 1em 1.75em;

       a {
           flex: 1;
           position: relative; // allow link to cover icon
           text-decoration: none;

           &:hover .arrow {
               transform: translateX(50%);
           }

       }

   }

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

       p {
           color: @white;
           font-weight: bold;
           font-size: .9em;
           text-align: center;
           text-transform: uppercase;
           letter-spacing: .03em;
           margin: 0;
       }

   }

   .partner-icon {
       margin-right: .75em;
   }

   .server-name {
       color: @white;
       font-weight: bold;
       font-size: 1.25em;
       margin: .5em 0 -0.15em;
   }

   .server-tagline {
       color: @mp-text-light;
       margin-bottom: .5em;
   }

   .arrow {
       position: absolute;
       top: ~"calc(50% - .5em)"; // center arrow on its point
       right: 0;
       height: 1em;
       width: .7em;
       background-size: .7em 1em;
       transition: .3s ease-out;
   }

}

/* --------------------

        Twitter
  --------------------*/

@twitter-blue: #00aced; @twitter-dark-blue: #0084b4;

.mainpage-twitter {

   border: none;
   box-shadow: @box-shadow-dark;

   .tile-top {
       display: flex;
       align-items: center;
       background: @twitter-blue;
       padding: 1em 1.75em;

       a {
           flex: 1;
           position: relative; // allow link to cover icon
           text-decoration: none;

           &:hover .arrow {
               transform: translateX(50%);
           }

       }

   }

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

       p {
           color: @white;
           font-weight: bold;
           font-size: .9em;
           text-align: center;
           text-transform: uppercase;
           letter-spacing: .03em;
           margin: 0;
       }

   }

   .twitter-logo {
       margin-right: .75em;
   }

   .twitter-name {
       color: @white;
       font-weight: bold;
       font-size: 1.25em;
       margin: .5em 0 -0.15em;
   }

   .twitter-tagline {
       color: @mp-text-light;
       margin-bottom: .5em;
   }

   .arrow {
       position: absolute;
       top: ~"calc(50% - .5em)"; // center arrow on its point
       right: 0;
       height: 1em;
       width: .7em;
       background-size: .7em 1em;
       transition: .3s ease-out;
   }

}

/* --------------------

     edit the wiki
  -------------------- */

.mainpage-editing {

   border: none;
   box-shadow: @box-shadow-dark;

   .tile-top {
       background: @steel-blue;
   }

   .tile-bottom {
       background: saturate( darken( @steel-blue, 4% ), 4% );
       border: none;
       padding: .8rem 1.5rem .4rem;
   }

   h2,
   a {
       color: @white;
   }

   p {
       color: @mp-text-light;
   }

   ul {
       list-style-image: url('filepath://Transparent-chevron.svg');
   }

}

/* ==========================

           poll
  ========================== */

.mainpage-poll .ajaxpoll { border: none; background: none; padding: 0; width: auto; }

/* ==========================

         tbz tile
  ========================== */

/* .mainpage-trailblazer { text-align: center;

.tb-main-container { position: relative; top: -150px; margin-bottom: -125px; }

.tb-logo img { height: auto; width: 400px; margin-bottom: @mp-gutter-width; }

.tile-halves { flex: 1; align-content: flex-start; margin-right: @mp-gutter-width;

&:last-child { margin-right: 0; } }

.tb-regions { display: flex; background: #0d323b; color: @white; padding: 1em; margin: 0 auto; border-radius: 1em;

h2 { color: @white; } } }

• /

/* ==========================

         media queries
  ========================== */

@media only screen and (max-width: @width-breakpoint-desktop-wide) {

// switch to two rows of three tiles

   .mainpage-contents {

grid-template-columns: repeat(3,1fr)

   }

}

@media only screen and (max-width: @width-breakpoint-desktop) {

.mainpage-body { grid-template-areas: "update update update" "content content content" "left left left" "right right right"; }

   .mainpage-recent-updates {

grid-template-columns: repeat(2,1fr);

       .tile-halves {

           // hide third recent update
           &:last-child {
               display: none;
           }
           
       	// zoom on hover

&:hover .tile-top img { transform: scale(1.04);

       	}

       }

       .tile-top {
           height: 18vw;
           min-height: 9em;
       }

   }

   // hide other things
   .mainpage-header .header-stats {
       display: none;
   }

.popular-mw.pages ul { grid-template-columns: repeat(2, 1fr); } }

@media only screen and (max-width: @width-breakpoint-tablet) { .mainpage-recent-updates { // rows instead of columns grid-template-columns: none;

// revert display:none .tile-halves:last-child { display: flex; } } }

/* ==========================================================================

*           MOBILE ZONE MediaWiki:Minerva.less/mainpage.less            
* ========================================================================== */

/* ===================

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

// preview the mobile main page at <https://oldschool.runescape.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 { 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;
   }

}

.mainpage-left {

   .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 { 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: initial;
   }

.tile-bottom { border: none; }

   h2 {
       width: 100%;

} }

/* --------------------

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

.mainpage-skills .tile-top {

   ul {
       @media only screen and (min-width: @width-breakpoint-desktop) {
           margin: 0;
       }
   }

}

/* --------------------

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

.mainpage-wikinews {

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

}

/* --------------------

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

.mainpage-discord {

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

       .partner-icon {
           margin-right: 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 {
           margin-right: 1em;
       }

       .twitter-name {
           margin: 0;
       }

       .twitter-tagline {
           margin: 0;
       }

   }

}