From Old School RuneScape Wiki
// <pre>
/* ===================
MAIN PAGE
=================== */
// preview the mobile main page at <https://oldschool.runescape.wiki/?useformat=mobile>
/* ===================
variables
=================== */
// text colors
@mp-header-color: @river-bed;
@mp-text-color: @tundora;
@mp-text-light: fade( @white, 85% );
// element colors
@mp-border-color: @mystic;
@mp-background-color: @white;
/* ===================
mixins
=================== */
.uppercase-heading() {
color: @gray-chateau;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .025em;
}
.skill-color(@color) {
// icon
a:first-child {
background: desaturate( lighten( @color, 15% ), 20% );
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====================
components
==================== */
.arrow {
background: url('filepath://White-chevron.svg') no-repeat;
display: inline-block;
height: .65rem;
width: .45rem;
&.dark {
filter: invert(80%);
}
}
/* ==========================
page-specific styles
========================== */
.pre-content h1 {
text-align: center;
}
body.page-RuneScape_Wiki {
// "Welcome, <username>"
.pre-content {
display: none !important;
}
#content {
padding-bottom: 0;
}
.content {
margin: 0 auto;
}
// restore margin removed above
.last-modified-bar {
margin: 0 1em;
}
}
/* ====================
general styles
==================== */
.mainpage-body {
color: @mp-text-color;
h2,
h2 a {
color: @mp-header-color;
}
ul {
margin: 0 .25em;
list-style-type: disc;
}
}
.mainpage-left {
> * {
border-bottom: none;
}
.tile {
padding: 2.5em 1.75em 2em;
border-left-width: 0;
border-right-width: 0;
h2 {
padding: 0;
margin: .65em .5em;
}
}
.tile-halves {
border-left-width: 0;
border-right-width: 0;
h2 {
padding: 0;
margin: .65em .5em;
}
}
}
/* =============================
section-specific styles
============================= */
/* --------------------
recent updates
-------------------- */
.mainpage-recent-updates {
display:flex;
flex-flow:row wrap;
justify-content:center;
border-bottom: 1px solid @mp-border-color;
padding: 1.5em 1em 2.5em;
white-space: nowrap;
-webkit-overflow-scrolling: touch; // for inertia scrolling
-webkit-scroll-snap-destination: 50% 50%; // old spec, deprecated
scroll-snap-destination: 50% 50%; // old spec, deprecated
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
&::before {
content: 'Recent updates';
display: block;
position: -webkit-sticky;
position: sticky;
left: 1.5em;
.uppercase-heading();
}
.tile-halves {
display: inline-block;
margin: 1em .75em 0 0;
width: 100%;
white-space: initial;
-webkit-scroll-snap-coordinate: 50% 50%; // old spec, deprecated
scroll-snap-coordinate: 50% 50%; // old spec, deprecated
scroll-snap-align: center;
&: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;
margin-right: 1em;
}
}
img {
width: 100%;
margin-top: -12.5%;
}
.tile-top {
height: 9em;
overflow: hidden;
}
.tile-bottom {
padding-bottom: .5rem;
}
.byline {
margin: 0;
& + h2 {
margin: .025em 0 0;
padding: 0;
}
}
// dot separator between links
a + a:before {
content: "· ";
display: inline-block;
white-space: pre-wrap;
pointer-events: none;
}
p:not(.byline) a {
color: @mp-text-color;
}
// center recent updates for larger widths
// 18em tiles * 3 + 1em gutters * 4 = 58em
@media only screen and (min-width: 58em) {
overflow-x: initial;
&::before {
width: 100%;
}
.tile-halves {
width: 85vw;
max-width: 18em;
&:nth-child(3) {
margin-right: 0;
}
img {
margin-top:unset;
}
}
.tile-halves:nth-child(3) {
margin-right: 0;
}
}
}
/* --------------------
wiki contents
-------------------- */
.mainpage-contents {
background: @shuttle-gray;
padding: 55px 1em 2em 2.5em;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
overflow-x: auto;
position:relative;
&::before {
content: 'Explore';
margin: 1em;
position: absolute;
top: 0;
.uppercase-heading();
}
.tile-halves {
border: none;
background: none;
box-shadow: none;
flex: 0 0 auto;
width: 200px;
margin-right: 10px;
}
.tile-top {
border-bottom: 1px solid lighten( @shuttle-gray, 10% );
padding: 0;
height: initial;
}
.tile-bottom {
padding: 0.5rem 1rem;
}
h2 {
padding: 0 0 .35em;
width: 100%;
a {
color: #444E5A;
display: block;
text-align:center;
}
}
}
/* --------------------
skills
-------------------- */
.mainpage-skills {
.tile-top {
overflow-x: scroll;
-webkit-overflow-scrolling: touch; // for inertia scrolling
h2 {
position: -webkit-sticky;
position: sticky;
left: .5em;
}
ul {
columns: 3;
width: 32em;
list-style: none;
margin-left: .75em;
@media only screen and (min-width: 32em) {
width: 100%;
max-width: 50em;
margin: auto;
}
}
li {
display: flex;
align-items: center;
margin-bottom: .6em;
// skill icon
a:first-child {
width: 25px;
height: 25px;
padding: 4px;
border-radius: 3px;
}
// skill name
a:last-child {
flex: 1;
color: @river-bed;
font-weight: bold;
padding-left: .5em;
}
}
}
}
.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
}
/* --------------------
wiki news
-------------------- */
.mainpage-wikinews {
&::before {
content: 'From the wiki';
margin-left: .75em;
.uppercase-heading();
}
.news-date {
font-weight: bold;
margin-bottom: 0;
}
p {
margin-left: .5em;
margin-right: .5em;
}
}
/* --------------------
discussions
-------------------- */
.mainpage-yg {
display: none;
padding-bottom: 2.5em !important;
&::before {
content: 'Discussions';
margin-left: .75em;
.uppercase-heading();
}
// only show for logged-in users
body.is-authenticated & {
display: inherit;
}
}
/* --------------------
runescape news
-------------------- */
.mainpage-news {
background: @black-haze;
.news-updates {
padding-bottom: 1.5em;
border-bottom: 1px solid @mp-border-color;
&::before {
content: 'Newsposts';
margin-left: .75em;
.uppercase-heading();
}
li {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.news-patchnotes {
padding-top: .5em;
}
}
/* --------------------
discord server
-------------------- */
@discord-purple: #7289da;
@discord-purple-dark: #697ec4;
.mainpage-discord {
border: none;
margin-bottom: 0;
.tile-top {
display: flex;
align-items: center;
justify-content: center;
background: @discord-purple;
padding: 1em 2em;
height: 70px; // not in em because the server icon is a fixed size
.partner-icon img {
float: left;
margin: 0 1em 0 -1em;
}
.server-name {
color: @white;
font-weight: bold;
font-size: 1.25em;
margin: 0;
}
.server-tagline {
color: @mp-text-light;
margin: 0;
}
}
.tile-bottom {
background: @discord-purple-dark;
border: none;
padding: 1em 2em;
p {
.uppercase-heading();
color: @white;
font-size: .9em;
text-align: center;
margin: 0;
}
}
}
/* --------------------
twitter
-------------------- */
@twitter-blue: #00ACED;
@twitter-dark-blue: #0084B4;
.mainpage-twitter {
border: none;
margin-bottom: 0;
.tile-top {
display: flex;
align-items: center;
justify-content: center;
background: @twitter-blue;
padding: 1em 2em;
height: 70px; // not in em because the server icon is a fixed size
.twitter-logo {
float: left;
margin: 0 1em 0 -1em;
}
.twitter-name {
color: @white;
font-weight: bold;
font-size: 1.25em;
margin: 0;
}
.twitter-tagline {
color: @mp-text-light;
margin: 0;
}
}
.tile-bottom {
background: @twitter-dark-blue;
border: none;
padding: 1em 2em;
p {
.uppercase-heading();
color: @white;
font-size: .9em;
text-align: center;
margin: 0;
}
}
}
/* article of the week */
.mainpage-articleoftheweek .floatright,
.mainpage-articleoftheweek .floatright img {
width: 100%;
}