MediaWiki:Mobile.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/** This goes in MediaWiki:Mobile.css */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--fonts: 'Chakra Petch', sans-serif;
--page-text-color: #fff;
--page-background-color: #101010;
--page-border-color: #000;
--content-text-color: #fff;
--content-background-color: #545454;
--content-border-color: #000;
--ui-link-color: #b9e587;
--ui-redlink-color: #e6878b;
--content-link-color: #b9e587;
--content-redlink-color: #e6878b;
--logo-red: #ff2020;
--logo-green: #20df20;
--logo-blue: #207fdf;
--rgb-strip: linear-gradient(to right, #ff2020, #ff2020 33.333%, #20df20 33.333%, #20df20 66.666%, #207fdf 66.666%, #207fdf);
--button-background-color: #207fdf;
--button-text-color: #fff;
--button-border-color: #207fdf;
--button-background-color-hover: #87CBE6;
--button-text-color-hover: #000;
}
/**
* HOMEPAGE
*/
#homepage {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
#homepage {
grid-template-columns: repeat(2, 1fr);
}
}
/**
* HOMEPAGE - HEADING BANNER
*/
.homepage-heading {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
border-width: 8px 0 0 0;
border-style: solid;
border-image-slice: 1;
border-image-source: var(--rgb-strip);
color: var(--page-text-color);
background-color: var(--page-background-color);
text-align: center;
}
.homepage-heading a {
color: var(--ui-link-color) !important;
}
.homepage-heading .homepage-heading__logo {
flex: 1 1 40%;
}
.homepage-heading .homepage-heading__logo img {
max-width: 100%;
height: auto;
}
.homepage-heading .homepage-heading__info {
flex: 1 1 60%;
}
.homepage-heading .homepage-heading__info p {
margin: .5rem 0;
}
.homepage-heading .homepage-heading__blurb {
font-weight: bold;
font-size: 1.5em;
}
.homepage-heading .homepage-heading__beep-boop {
font-weight: bold;
font-style: italic;
font-size: 3em;
}
.homepage-heading .homepage-heading__stats {
font-size: 1.5em;
}
@media (min-width: 1100px) {
.homepage-heading {
flex-direction: row;
align-items: center;
grid-column: span 2;
}
}
/**
* HOMEPAGE - CONTENT BOXES
*/
.homepage-box {
border-width: 8px 0 0 0;
border-style: solid;
border-image-slice: 1;
border-image-source: var(--rgb-strip);
color: var(--page-text-color);
background-color: var(--page-background-color);
}
.homepage-box--centered {
text-align: center;
}
@media (min-width: 1100px) {
.homepage-box--wide {
grid-column: span 2;
}
}
.homepage-box .homepage-box__heading {
margin: 0;
padding: .5rem 1.5rem;
border: none;
color: var(--page-text-color);
background-color: var(--content-border-color);
}
.homepage-box .homepage-box__body {
padding: 1.5rem;
}
.homepage-box .homepage-box__heading a,
.homepage-box .homepage-box__body a {
color: var(--ui-link-color) !important;
}
.homepage-box .homepage-box__heading a.new,
.homepage-box .homepage-box__body a.new {
color: var(--ui-redlink-color) !important;
}
/* Handle image sizing on narrow screens */
@media (max-width: 550px) {
.homepage-box__body .floatleft,
.homepage-box__body .floatright {
margin: 0;
float: none;
text-align: center;
}
}
/**
* HOMEPAGE - NAVIGATION
*/
.homepage-navigation {
display: flex;
gap: 1.5rem;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.homepage-navigation > div > p {
display: flex;
flex-direction: column;
}
.homepage-navigation > div:nth-child(even) {
margin-top: 2.5rem;
}
.homepage-navigation a {
font-size: 1.25em;
color: var(--ui-link-color) !important;
}
.homepage-navigation a.new {
color: var(--ui-redlink-color) !important;
}