Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,327
edits
MediaWiki:Common.less/mainpage.less: Difference between revisions
MediaWiki:Common.less/mainpage.less (view source)
Revision as of 17:14, 17 October 2024
, 17 Octoberno edit summary
No edit summary |
No edit summary |
||
Line 1:
/* ===================
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);
}
}
| |||