Alex at 11:25, 29 October 2024

2024-10-29T11:25:52Z

← Older revision		Revision as of 13:25, 29 October 2024
Line 46:		Line 46:
	========================== */		========================== */

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

	// limit max width for readability		// limit max width for readability

Alex at 10:12, 18 October 2024

2024-10-18T10:12:19Z

← Older revision		Revision as of 12:12, 18 October 2024
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;

Alex at 16:16, 17 October 2024

2024-10-17T16:16:13Z

← Older revision		Revision as of 18:16, 17 October 2024
Line 177:		Line 177:

	.arrow {		.arrow {
	background: url('~~filepath:~~//White-chevron.svg') no-repeat;		background: url('/images/rss/White-chevron.svg') no-repeat;
	display: inline-block;		display: inline-block;
	height: .7rem;		height: .7rem;
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("~~filepath:~~//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;
Line 362:		Line 362:

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

	.popular-~~mw.~~pages ul {		.popular-pages ul {
	display: grid;		display: grid;
	grid-template-columns: repeat(3, 1fr);		grid-template-columns: repeat(3, 1fr);
Line 569:		Line 569:

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

Line 682:		Line 682:
	}		}

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

Alex: Created page with "@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: .9r..."

2024-10-16T23:11:20Z

Created page with "@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: .9r..."

New page

@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;
}

}

}

MediaWiki:Test.less - Revision history

Alex at 11:25, 29 October 2024

Alex at 10:12, 18 October 2024

Alex at 16:16, 17 October 2024