Automoderated users, autopatrol, Interface administrators
99
edits
WiKirby:Sandbox: Difference between revisions
→Other tests
m (Cleaning out this part of the sandbox, and adding the help navbox.) |
|||
| Line 22: | Line 22: | ||
==Other tests== | ==Other tests== | ||
===Responsive=== | |||
<!-- box start --> | |||
<div class="evolutions-box" style="border: 1px solid #A00; background-color: #DE8; {{Round}}; text-align: center; max-width: 660px; margin: auto"> | |||
<div style="background-color: #6C9; {{Round}}; padding: 2px; margin: 2px">'''Cutter Evolutions'''</div> | |||
<div class="row"> | |||
<div class="col"> | |||
[[File:CutterKTDX.png|x96px]]<br>'''[[Cutter]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col"> | |||
[[File:KatFL Chakram Cutter Kirby artwork.png|x96px]]<br>'''[[Chakram Cutter]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col" > | |||
[[File:KatFL Buzz-Saw Cutter Kirby artwork.png|x96px]]<br>'''[[Buzz-Saw Cutter]]''' | |||
</div> | |||
</div> | |||
</div> | |||
<!-- box end --> | |||
<!-- box start --> | |||
<div class="evolutions-box" style="border: 1px solid #A00; background-color: #DE8; {{Round}}; text-align: center; max-width: 800px; margin: auto"> | |||
<div style="background-color: #6C9; {{Round}}; padding: 2px; margin: 2px">'''Hammer Evolutions'''</div> | |||
<div class="row"> | |||
<div class="col"> | |||
[[File:KF2 Hammer artwork.png|x96px]]<br>'''[[Hammer]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col"> | |||
[[File:KatFL Toy Hammer Kirby artwork.png|x96px]]<br>'''[[Toy Hammer]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col" > | |||
[[File:KatFL Wild Hammer Artwork.png|x96px]]<br>'''[[Wild Hammer]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col" > | |||
[[File:KatFL Masked Hammer Render.png|x96px]]<br>'''[[Masked Hammer]]''' | |||
</div> | |||
</div> | |||
</div> | |||
<!-- box end --> | |||
<!-- box start --> | |||
<div class="evolutions-box" style="border: 1px solid #A00; background-color: #DE8; {{Round}}; text-align: center; max-width: 350px; margin: auto"> | |||
<div style="background-color: #6C9; {{Round}}; padding: 2px; margin: 2px">'''Sleep Evolutions'''</div> | |||
<div class="row"> | |||
<div class="col"> | |||
[[File:KatFL Sleep Kirby artwork.png|x96px]]<br>'''[[Sleep]]''' | |||
</div> | |||
<div class="col-12 col-md-1" style="align-self: center"> | |||
<div class="d-none d-md-block">{{large|⇿}}</div> | |||
<div class="d-block d-md-none" style="transform: rotate(90deg);">{{large|⇿}}</div> | |||
</div> | |||
<div class="col"> | |||
[[File:KatFL Deep Sleep Artwork.png|x96px]]<br>'''[[Deep Sleep]]''' | |||
</div> | |||
</div> | |||
</div> | |||
<!-- box end --> | |||
The only caveat of this responsive style is that it needs the CSS extension tag to adapt the width specifically better when the screen is smaller. | |||
<pre> | |||
<!-- | |||
-->{{#css: @media (max-width: 768px) { .evolutions-box { width: 200px } } }}<!-- | |||
--> | |||
</pre> | |||
TL;DR: when the screen is smaller than 768px width, the boxes (which have a class called <code>evolutions-box</code> will have a fixed width of 200px. If this is not applied, the responsive behaviour is not lost, but the boxes will fill 100% of the width left. | |||
<!-- | |||
-->{{#css: @media (max-width: 768px) { .evolutions-box { width: 200px } } }}<!-- | |||
--> | |||
====Table boxes==== | |||
{|width="30%" style="border: 1px solid #A00; text-align: center; margin:auto; background-color: #DE8; {{Round}}" | {|width="30%" style="border: 1px solid #A00; text-align: center; margin:auto; background-color: #DE8; {{Round}}" | ||
! colspan="7" style="background-color: #6C9; {{Round}}" | Cutter Evolutions | ! colspan="7" style="background-color: #6C9; {{Round}}" | Cutter Evolutions | ||