|
|
| Line 1: |
Line 1: |
|
__NOTOC__ |
|
__NOTOC__ |
|
{{#css: |
|
{{#css: |
|
|
.mainpage-contents { |
|
* { |
|
|
|
grid-area:content; |
|
box-sizing: border-box; |
|
|
|
grid-template-columns:repeat(6,1fr) |
|
} |
|
} |
|
|
|
|
|
|
.mainpage-contents .tile-halves { |
|
body { |
|
|
|
flex:2 |
|
font-family: Arial, Helvetica, sans-serif; |
|
|
} |
|
} |
|
|
|
|
|
|
.mainpage-contents h2 { |
|
/* Float four columns side by side */ |
|
|
|
margin:0; |
|
.column { |
|
|
|
padding:0 |
|
float: left; |
|
|
width: 25%; |
|
|
padding: 0 10px; |
|
|
} |
|
} |
|
|
|
|
|
|
.mainpage-contents .tile-bottom.link-button a { |
|
/* Remove extra left and right margins, due to padding */ |
|
|
|
padding:0.75em 0.2em |
|
.row {margin: 0 -5px;} |
|
|
|
} |
|
|
|
|
|
|
.mainpage-contents { |
|
/* Clear floats after the columns */ |
|
|
|
display:grid; |
|
.row:after { |
|
|
content: ""; |
|
gap:0.6rem; |
|
display: table; |
|
|
clear: both; |
|
|
} |
|
} |
|
|
|
|
|
|
.mainpage-body .tile-row { |
|
/* Responsive columns */ |
|
|
|
display:grid; |
|
@media screen and (max-width: 600px) { |
|
|
|
gap:0.9rem; |
|
.column { |
|
|
width: 100%; |
|
|
display: block; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
} |
|
} |
|
|
|
|
|
|
.tile-row { |
|
/* Style the counter cards */ |
|
|
|
display:flex; |
|
.card { |
|
|
|
flex-flow:row wrap; |
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); |
|
|
|
margin-bottom:1em |
|
padding: 16px; |
|
|
|
} |
|
text-align: center; |
|
|
|
|
|
background-color: #f1f1f1; |
|
|
|
.tile-halves { |
|
|
display:flex; |
|
|
flex-flow:row wrap; |
|
|
border:1px solid var(--tile-border-color); |
|
|
background:var(--tile-background-color); |
|
|
box-shadow:0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1) |
|
|
} |
|
|
|
|
|
.tile-halves h2 { |
|
|
font-size:1.4em; |
|
|
font-weight:bold; |
|
|
border:none; |
|
|
margin:0 0 0.4em |
|
|
} |
|
|
|
|
|
.tile-halves .byline + h2 { |
|
|
margin-top:-0.5em |
|
|
} |
|
|
|
|
|
.tile-top { |
|
|
width:100%; |
|
|
padding:1.3rem 1.5rem 0.6rem |
|
|
} |
|
|
|
|
|
.tile-top.tile-image { |
|
|
display:flex; |
|
|
align-items:center; |
|
|
background-color:var(--byline-color); |
|
|
overflow:hidden; |
|
|
padding:0; |
|
|
height:13vw; |
|
|
max-height:12em; |
|
|
transition:0.4s ease-out |
|
|
} |
|
|
|
|
|
.tile-halves:hover .tile-top.tile-image img { |
|
|
transform:scale(1.3); |
|
|
transition:0.3s ease-out |
|
|
} |
|
|
|
|
|
.tile-top.tile-image span { |
|
|
width:100% |
|
|
} |
|
|
|
|
|
.tile-top.tile-image img { |
|
|
width:100%; |
|
|
object-fit:cover; |
|
|
max-height:200px; |
|
|
transition:0.4s ease-out |
|
|
} |
|
|
|
|
|
.tile-bottom { |
|
|
background:var(--tile-background-color); |
|
|
border-top:1px solid var(--tile-border-color); |
|
|
width:100%; |
|
|
padding:1rem 1.5rem 0.6rem |
|
|
} |
|
|
|
|
|
.tile-bottom.link-button { |
|
|
align-self:flex-end; |
|
|
padding:0 |
|
|
} |
|
|
|
|
|
.tile-bottom.link-button a { |
|
|
display:block; |
|
|
text-align:center; |
|
|
padding:0.75em 1.5em 0.8em; |
|
|
text-decoration:none |
|
} |
|
} |
|
}} |
|
}} |
|
|
|
|
|
<div class="row"> |
|
<div class="mainpage-contents tile-row"> |
|
<div class="column"> |
|
<div class=" contents-vocations tile-halves"> |
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Vocations" title="Vocations"><img src="https://static.miraheze.org/dragonquestxwiki/c/c0/Dqx_warrior.png" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
<div class="card"> |
|
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Vocations"><a href="https://ethene.wiki/wiki/Vocations" title="Vocations">Vocations</a></span></h2></div> |
|
<h3>Card 1</h3> |
|
|
<p>Some text</p> |
|
|
<p>Some text</p> |
|
|
</div> |
|
</div> |
|
|
<div class="contents-equipment tile-halves"> |
|
</div> |
|
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Armor" title="Equipment"><img src="https://static.miraheze.org/dragonquestxwiki/1/14/Sizable_scissors.png" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
|
|
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Equipment"><a href="https://ethene.wiki/wiki/Armor" title="Equipment">Equipment</a></span></h2></div> |
|
<div class="column"> |
|
|
<div class="card"> |
|
</div> |
|
|
<div class="contents-quests tile-halves"> |
|
<h3>Card 2</h3> |
|
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Quests_sorted_by_number" title="Quests"><img src="https://static.miraheze.org/dragonquestxwiki/7/76/Clauge.png" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
<p>Some text</p> |
|
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Quests"><a href="https://ethene.wiki/wiki/Quests_sorted_by_number" title="Quests">Quests</a></span></h2></div> |
|
<p>Some text</p> |
|
|
|
</div> |
|
|
<div class="contents-bestiary tile-halves"> |
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Monster_List" title="Bestiary"><img src="https://static.miraheze.org/dragonquestxwiki/0/01/Monster_slime.jpg" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Bestiary"><a href="https://ethene.wiki/wiki/Monster_List" title="Bestiary">Bestiary</a></span></h2></div> |
|
</div> |
|
</div> |
|
|
<div class="contents-battle-content tile-halves"> |
|
</div> |
|
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Book_of_Bosses" title="Battle Content"><img src="https://static.miraheze.org/dragonquestxwiki/0/0c/Battle_of_Twilight.jpg" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
|
|
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Battle Content"><a href="https://ethene.wiki/wiki/Book_of_Bosses" title="Battle Content">Battle Content</a></span></h2></div> |
|
<div class="column"> |
|
|
<div class="card"> |
|
|
<h3>Card 3</h3> |
|
|
<p>Some text</p> |
|
|
<p>Some text</p> |
|
|
</div> |
|
</div> |
|
|
<div class="contents-skills-spells tile-halves"> |
|
</div> |
|
|
|
<div class="tile-top tile-image"><span class="mw-default-size" typeof="mw:File"><a href="https://ethene.wiki/wiki/Skill_List" title="Skills/Spells"><img src="https://static.miraheze.org/dragonquestxwiki/c/c2/Monster_apeckalypse.jpg" decoding="async" loading="lazy" width="500" height="500" class="mw-file-element" data-file-width="500" data-file-height="500"></a></span></div> |
|
|
|
|
|
<div class="tile-bottom link-button"><h2><span class="mw-headline" id="Skills/Spells"><a href="https://ethene.wiki/wiki/Skill_List" title="Skills/Spells">Skills/Spells</a></span></h2></div> |
|
<div class="column"> |
|
|
<div class="card"> |
|
|
<h3>Card 4</h3> |
|
|
<p>Some text</p> |
|
|
<p>Some text</p> |
|
|
</div> |
|
</div> |
|
</div> |
|
|
</div> |
|
</div> |
