MediaWiki:Common.less/mainpage.less
Jump to navigation
Jump to search
/* ===================
MAIN PAGE
=================== */
body.page-Main_Page.action-view .catlinks,
body.page-Main_Page.action-view #contentSub,
body.page-Main_Page.action-view #firstHeading,
body.page-Main_Page.action-view #siteNotice {
display: none;
}
/* ===================
variables
=================== */
@mp-text-light: fade( @white, 90% );
@mp-gutter-width: .9rem;
/* ==========================
page-specific styles
========================== */
body.page-Main_Page {
// 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%;
border: none;
}
.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
============================= */
/* --------------------
wiki contents
-------------------- */
@mp-contents-height: 5.5rem;
.mainpage-contents {
grid-area: content;
grid-template-columns: repeat(5, 1fr);
.tile-halves {
flex: 1;
background: none;
}
.tile-top {
height: @mp-contents-height;
position: relative; // needed for ribbon
&.tile-image img {
height: auto;
}
}
h2 {
margin: 0;
padding: 0;
}
.tile-bottom {
box-shadow: inset 0 0 2px rgba(255,255,255,0.5);
h2 {
background: var(--body-darker);
box-shadow: @infobox-card-shadow;
margin: 3px !important;
}
&.link-button a {
padding: 0.65em 0.2em; // prevent grid gap misalignment
}
}
}
/* --------------------
popular pages
-------------------- */
.popular-pages ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: .6em;
margin: 1em 0 .7em 0;
}
.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 & twitter/X
-------------------- */
.mainpage-social {
border: none;
box-shadow: @box-shadow-dark;
.tile-top {
display: flex;
align-items: center;
padding: 1em 1.5em;
a {
flex: 1;
position: relative;
text-decoration: none;
&:hover .arrow {
transform: translateX(50%);
}
}
}
.tile-bottom {
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;
}
}
.social-icon {
margin-right: .75em;
text-align: center;
width: 60px;
}
.social-header {
color: @white;
font-weight: bold;
font-size: 1.15em;
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;
}
// Discord colors
&.mainpage-discord {
.tile-top {
background: @discord-bg;
}
.tile-bottom {
background: @discord-bg-dark;
}
}
// X (Twitter) colors
&.mainpage-twitter {
.tile-top {
background: @twitter-bg;
}
.tile-bottom {
background: @twitter-bg-dark;
}
}
}
/* --------------------
edit the wiki
-------------------- */
.mainpage-editing {
border: none;
box-shadow: @box-shadow-dark;
.tile-top {
background: var(--body-darker);
}
.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');
}
}
/* ==========================
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"
"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);
}
}