https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3AMinerva.less%2Fmainpage.less 2026-04-26T09:49:00Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.runerealm.org/index.php?title=MediaWiki:Minerva.less/mainpage.less&diff=34733&oldid=prev 2024-10-16T23:11:02Z

<p>Created page with &quot;<span dir="auto"><span class="autocomment">=================== MAIN PAGE ===================: </span> // preview the mobile main page at &lt;https://oldschool.runescape.wiki/?useformat=mobile&gt; <span dir="auto"><span class="autocomment">=================== mixins ===================: </span> .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(1re...&quot;</span></span></p> <p><b>New page</b></p><div>/* ===================<br /> MAIN PAGE<br /> =================== */<br /> <br /> // preview the mobile main page at &lt;https://oldschool.runescape.wiki/?useformat=mobile&gt;<br /> <br /> /* ===================<br /> mixins<br /> =================== */<br /> <br /> .uppercase-heading(@text-color: var(--byline-color)) {<br /> color: @text-color;<br /> font-weight: bold;<br /> text-transform: uppercase;<br /> letter-spacing: .025em;<br /> }<br /> <br /> @keyframes slide-up {<br /> <br /> from {<br /> opacity: 0;<br /> transform: translateY(1rem);<br /> }<br /> <br /> to {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> <br /> }<br /> <br /> /* ====================<br /> general styles<br /> ==================== */<br /> <br /> .mainpage-header {<br /> margin: 2em 1em 0; // reduce margins<br /> <br /> .header-intro {<br /> @media only screen and (max-width: @width-breakpoint-desktop) {<br /> h1 {<br /> text-align: center;<br /> font-size: 1.8em;<br /> }<br /> <br /> p {<br /> font-size: 1em; // reset from 1.1m<br /> }<br /> }<br /> }<br /> }<br /> <br /> .mainpage-body {<br /> .tile-row {<br /> // common does width: 100%<br /> width: inherit;<br /> }<br /> }<br /> <br /> .mainpage-left {<br /> <br /> .tile {<br /> padding: 2.5em 1.75em 2em;<br /> <br /> h2 {<br /> padding: 0;<br /> margin: .65em .5em;<br /> }<br /> <br /> }<br /> <br /> .tile-halves {<br /> h2 {<br /> padding: 0;<br /> margin: .65em .5em;<br /> }<br /> }<br /> <br /> }<br /> <br /> /* =============================<br /> section-specific styles<br /> ============================= */<br /> <br /> /* --------------------<br /> recent updates<br /> -------------------- */<br /> <br /> .mainpage-recent-updates {<br /> padding: 1.5em 1em 2.5em;<br /> <br /> &amp;::before {<br /> content: &#039;Recent updates&#039;;<br /> display: block;<br /> margin-left: 1.5em;<br /> .uppercase-heading();<br /> grid-column: ~&quot;1 / 4&quot;;<br /> }<br /> <br /> .tile-halves {<br /> display: inline-block;<br /> width: 100%;<br /> white-space: initial;<br /> flex: unset;<br /> <br /> &amp;:nth-child(1) {<br /> animation: .9s .2s both slide-up;<br /> }<br /> <br /> &amp;:nth-child(2) {<br /> animation: .9s .4s both slide-up;<br /> }<br /> <br /> &amp;:nth-child(3) {<br /> animation: .9s .6s both slide-up;<br /> }<br /> <br /> }<br /> <br /> .tile-top {<br /> height: 9em;<br /> overflow: hidden;<br /> }<br /> <br /> .tile-bottom {<br /> padding-bottom: .5rem;<br /> }<br /> <br /> .byline {<br /> margin: 0;<br /> <br /> &amp; + h2 {<br /> margin: .025em 0 0;<br /> padding: 0;<br /> }<br /> <br /> }<br /> <br /> // center recent updates for smaller widths<br /> @media only screen and (max-width: @width-breakpoint-tablet) {<br /> <br /> &amp;::before {<br /> text-align: center;<br /> margin: 0;<br /> grid-column: auto;<br /> }<br /> <br /> }<br /> }<br /> <br /> /* --------------------<br /> wiki contents<br /> -------------------- */<br /> <br /> .mainpage-contents {<br /> background: var(--body-mid);<br /> padding: 55px 1em 2em 2.5em;<br /> overflow-x: auto;<br /> grid-template-columns: repeat(6, 1fr) !important; // shouldnt break into two<br /> position: relative;<br /> scroll-snap-align: center;<br /> <br /> &amp;::before {<br /> content: &#039;Explore&#039;;<br /> margin: 1em;<br /> position: absolute;<br /> top: 0;<br /> .uppercase-heading(@text-color: inherit);<br /> grid-column: ~&quot;1 / 6&quot;;<br /> }<br /> <br /> .tile-halves {<br /> border: none;<br /> background: none;<br /> box-shadow: none;<br /> width: 200px;<br /> }<br /> <br /> .tile-top {<br /> padding: 0;<br /> height: initial;<br /> }<br /> <br /> .tile-bottom {<br /> border: none;<br /> }<br /> <br /> h2 {<br /> width: 100%;<br /> }<br /> }<br /> <br /> /* --------------------<br /> skills<br /> -------------------- */<br /> <br /> .mainpage-skills .tile-top ul {<br /> @media only screen and (max-width: @width-breakpoint-desktop) {<br /> margin: 0;<br /> }<br /> }<br /> <br /> /* --------------------<br /> wiki news<br /> -------------------- */<br /> <br /> .mainpage-wikinews {<br /> <br /> &amp;::before {<br /> content: &#039;From the wiki&#039;;<br /> margin-left: .75em;<br /> .uppercase-heading();<br /> }<br /> <br /> }<br /> <br /> /* --------------------<br /> discord server<br /> -------------------- */<br /> <br /> .mainpage-discord {<br /> <br /> .tile-top {<br /> padding: 1em 2em;<br /> height: 70px; // not in em because the server icon is a fixed size<br /> <br /> .partner-icon {<br /> margin-right: 1em;<br /> }<br /> <br /> .server-name {<br /> margin: 0;<br /> }<br /> <br /> .server-tagline {<br /> margin: 0;<br /> }<br /> <br /> }<br /> <br /> }<br /> <br /> /* --------------------<br /> twitter<br /> -------------------- */<br /> <br /> .mainpage-twitter {<br /> margin-bottom: 0;<br /> <br /> .tile-top {<br /> padding: 1em 2em;<br /> height: 70px; // not in em because the server icon is a fixed size<br /> <br /> .twitter-logo {<br /> margin-right: 1em;<br /> }<br /> <br /> .twitter-name {<br /> margin: 0;<br /> }<br /> <br /> .twitter-tagline {<br /> margin: 0;<br /> }<br /> <br /> }<br /> <br /> }<br /> <br /> /* ==========================<br /> tbz(r) tile<br /> ========================== */<br /> /*<br /> .content .mw-parser-output .mainpage-trailblazer h2 {<br /> // &lt;h2&gt; use flex on minerva so have to use this instead of text-align<br /> justify-content: center;<br /> padding: 0;<br /> }<br /> */</div>

Alex