MediaWiki:Test.less: Difference between revisions

From RuneRealm Wiki
Jump to navigation Jump to search
Browse history interactively
Content added Content deleted
VisualWikitext
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 46: Line 46:
========================== */
========================== */


body.page-Old_School_RuneScape_Wiki {
body.page-RuneRealm_Wiki {


// limit max width for readability
// limit max width for readability
Line 201: Line 201:
.tile.big-tile {
.tile.big-tile {
width: 100%;
width: 100%;
background: linear-gradient(to left, var(--bigtile-background-fade-zero), var(--bigtile-background-fade-seventyfive), var(--bigtile-background-color) 40%), url("/images/rss/Main page Twisted League.png") right / auto 100% no-repeat @white;
background: linear-gradient(to left, var(--bigtile-background-fade-zero), var(--bigtile-background-fade-seventyfive), var(--bigtile-background-color) 40%), url("/images/rss/Main_page_-_Twisted_League.png") right / auto 100% no-repeat @white;
margin-bottom: @mp-gutter-width;
margin-bottom: @mp-gutter-width;
padding-right: 8vw;
padding-right: 8vw;

Latest revision as of 12:25, 29 October 2024

@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-RuneRealm_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('/images/rss/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("/images/rss/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 pages
  -------------------- */

.popular-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('/images/rss/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-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;
       }

   }

}

Retrieved from "https://wiki2.runerealm.org/index.php?title=MediaWiki:Test.less&oldid=43847"