MediaWiki:Common.less/mainpage.less

/* =================== MAIN PAGE =================== *//* =================== variables =================== */@mp-text-light: fade( @white, 90% );@mp-gutter-width: .9rem;/* unused: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 span a { 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; } }}/* ==================== 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: "event event event" // for tbzr tile "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-top span { width: 100%; } } .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; // skill icon span a { border-radius: @border-radius; padding: 4px; width: 25px; height: 25px; text-align: center; display: flex; justify-content: center; align-items: center; } // skill text > a: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; } > a: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; }}/* -------------------- X / Twitter --------------------*/@twitter-bg: #15202b;@twitter-bg-dark: #121c26;.mainpage-twitter { border: none; box-shadow: @box-shadow-dark; .tile-top { display: flex; align-items: center; background: @twitter-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: @twitter-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; } } .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(r) tile ========================== */.mainpage-trailblazer { grid-area: event; .tb-logo { margin-bottom: @mp-gutter-width; } .tile-row { grid-template-columns: repeat(3,1fr); @media only screen and (max-width: @width-breakpoint-tablet) { grid-template-columns: none; .tile-top { height: 20vw; min-height: 9em; } } }}/* ========================== 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-left and -right on one column now .mainpage-body { grid-template-areas: "event event event" // for tbzr tile "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; } // kill margin as it duplicates grid's gap .mainpage-left > *:last-child, .mainpage-right > *:last-child { margin-bottom: 0; } .popular-pages ul { grid-template-columns: repeat(2, 1fr); }}@media only screen and (max-width: @width-breakpoint-tablet) { .mainpage-recent-updates { // resulting in single column grid-template-columns: none; // revert display:none .tile-halves:last-child { display: flex; } } // switch to three rows of two tiles .mainpage-contents { grid-template-columns: repeat(2, 1fr); }}