|
|
| (72 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| <style type="text/css">
| | {{Saga/Main Page}} |
| /* Main Page Header Styles */
| |
| .mainpage-header {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: space-between;
| |
| padding: 20px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .header-intro, .header-stats {
| |
| flex: 1;
| |
| min-width: 300px; /* Ensures that the intro and stats sections do not become too narrow */
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .header-intro h1, .header-intro p, .header-stats ul {
| |
| margin: 10px 0;
| |
| }
| |
| | |
| .header-stats ul {
| |
| list-style-type: none;
| |
| padding: 0;
| |
| }
| |
| | |
| .header-stats ul li {
| |
| display: inline-block;
| |
| margin-right: 15px;
| |
| }
| |
| | |
| /* Main Page Contents Styles */ | |
| .mainpage-contents {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: space-around;
| |
| gap: 20px; /* Adjusts the space between items */
| |
| padding: 20px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .tile-halves {
| |
| display: flex;
| |
| flex-direction: column;
| |
| flex: 1;
| |
| min-width: 250px; /* Minimum width of each tile */
| |
| max-width: 300px; /* Maximum width to maintain uniformity */
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .tile-top, .tile-bottom {
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| text-align: center;
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .tile-top {
| |
| flex-grow: 1;
| |
| }
| |
| | |
| .link-button {
| |
| width: 100%;
| |
| padding: 10px 0; /* Adds padding to the bottom part for better spacing */
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* Enhancements for responsiveness */
| |
| @media (max-width: 768px) {
| |
| .mainpage-header, .mainpage-contents {
| |
| justify-content: center;
| |
| }
| |
| | |
| .header-intro, .header-stats, .tile-halves {
| |
| flex: 0 0 100%; /* Forces items to take full width on smaller screens */
| |
| max-width: none; /* Removes max-width restriction for better flexibility */
| |
| }
| |
| }
| |
| </style>
| |
| | |
| | |
| <div class="mainpage-header">
| |
| <div class="header-intro">
| |
| <h1>Welcome to the RuneSaga Wiki!</h1>
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
| |
| </div>
| |
| <div class="header-stats plainlist nomobile">
| |
| <ul>
| |
| <li>Number of articles: '''{{NUMBEROFARTICLES}}'''</li>
| |
| <li>Number of files: '''{{NUMBEROFFILES}}'''</li>
| |
| <li>Number of active users: '''{{NUMBEROFACTIVEUSERS}}'''</li>
| |
| <li>Number of edits: '''{{NUMBEROFEDITS}}'''</li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| __NOTOC__
| |
| <div class="mainpage-contents tile-row">
| |
| <div class="contents-equipment tile-halves">
| |
| <div class="tile-top tile-image">[[file:Main page equipment.png|link=equipment]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Worn Equipment|Equipment]]</h2></div>
| |
| </div>
| |
| <div class="contents-guides tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page skills.png|link=Skills]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Skills]]</h2></div>
| |
| </div>
| |
| <div class="contents-bestiary tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page bestiary.png|link=Bestiary]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Bestiary]]</h2></div>
| |
| </div>
| |
| <div class="contents-minigames tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page benefits.png|link=Minigames]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Donation Benefits]]</h2></div>
| |
| </div>
| |
| <div class="contents-equipment tile-halves">
| |
| <div class="tile-top tile-image">[[file:Main page equipment.png|link=equipment]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Worn Equipment|Equipment]]</h2></div>
| |
| </div>
| |
| <div class="contents-guides tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page skills.png|link=Skills]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Skills]]</h2></div>
| |
| </div>
| |
| <div class="contents-bestiary tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page bestiary.png|link=Bestiary]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Bestiary]]</h2></div>
| |
| </div>
| |
| <div class="contents-minigames tile-halves">
| |
| <div class="tile-top tile-image">[[File:Main page benefits.png|link=Minigames]]</div>
| |
| <div class="tile-bottom link-button"><h2>[[Donation Benefits]]</h2></div>
| |
| </div>
| |
| </div>
| |
