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 (max-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;
       }

   }

}

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

         tbz(r) tile
  ========================== */

/* .content .mw-parser-output .mainpage-trailblazer h2 {

//