Main Page: Difference between revisions
From Zelda Wiki, the Zelda encyclopedia
Further use of flexboxes to make code less fragile.
PhantomCaleb (talk | contribs) (solved issue of shadow not stretching across the whole tile.) |
PhantomCaleb (talk | contribs) (Further use of flexboxes to make code less fragile.) |
||
| Line 24: | Line 24: | ||
<div class="main-series"><!--*************** MAIN SERIES *************** | <div class="main-series"><!--*************** MAIN SERIES *************** | ||
--><div class="game | --><div class="game"> | ||
<span class=year>1987</span> | <span class=year>1987</span> | ||
{{TLoZ}} | {{TLoZ}} | ||
| Line 30: | Line 30: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>1988</span> | <span class=year>1988</span> | ||
{{TAoL}} | {{TAoL}} | ||
| Line 84: | Line 84: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2004</span> | <span class=year>2004</span> | ||
{{FSA}} | {{FSA}} | ||
| Line 102: | Line 102: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2007</span> | <span class=year>2007</span> | ||
{{PH}} | |||
[[File:PH Tile.png|link=]] | [[File:PH Tile.png|link=]] | ||
</div><!-- | </div><!-- | ||
| Line 120: | Line 120: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2013</span> | <span class=year>2013</span> | ||
{{ALBW}} | {{ALBW}} | ||
| Line 137: | Line 137: | ||
<div class=remakes><!--*************** REMAKES *************** | <div class=remakes><!--*************** REMAKES *************** | ||
--><div class="game | --><div class="game"> | ||
<span class=year>1998</span> | <span class=year>1998</span> | ||
{{LADX}} | {{LADX}} | ||
| Line 143: | Line 143: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2002</span> | <span class=year>2002</span> | ||
{{ALttP&FS}} | {{ALttP&FS}} | ||
| Line 149: | Line 149: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2003</span> | <span class=year>2003</span> | ||
[[The Legend of Zelda: Ocarina of Time Master Quest|Ocarina of Time Master Quest]] | [[The Legend of Zelda: Ocarina of Time Master Quest|Ocarina of Time Master Quest]] | ||
| Line 161: | Line 161: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2011</span> | <span class=year>2011</span> | ||
{{FSAE}} | {{FSAE}} | ||
| Line 167: | Line 167: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>2013</span> | <span class=year>2013</span> | ||
{{TWWHD}} | |||
[[File:TWWHD Tile.png|link=]] | [[File:TWWHD Tile.png|link=]] | ||
</div><!-- | </div><!-- | ||
| Line 177: | Line 177: | ||
{{MM3D}} | {{MM3D}} | ||
[[File:MM3D Tile.png|link=]] | [[File:MM3D Tile.png|link=]] | ||
</div> | </div><!-- | ||
--> | |||
</div> | </div> | ||
| Line 189: | Line 192: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">2007</span> | <span class="year">2007</span> | ||
{{LCT}} | {{LCT}} | ||
| Line 195: | Line 198: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">1989</span> | <span class="year">1989</span> | ||
[[Zelda (Game & Watch)|Game & Watch Zelda]] | [[Zelda (Game & Watch)|Game & Watch Zelda]] | ||
| Line 204: | Line 207: | ||
<div class="spin-off-logo">[[File:MainPage Tingle.png|link=Tingle (Series)]]</div><!-- | <div class="spin-off-logo">[[File:MainPage Tingle.png|link=Tingle (Series)]]</div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">2009 [[File:JPflag.png|x12px|link=|Japan only]]</span> | <span class="year">2009 [[File:JPflag.png|x12px|link=|Japan only]]</span> | ||
{{TBToL}} | {{TBToL}} | ||
| Line 210: | Line 213: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">2007 [[File:JPflag.png|x12px|link=|Japan only]]</span> | <span class="year">2007 [[File:JPflag.png|x12px|link=|Japan only]]</span> | ||
{{TBF}} | {{TBF}} | ||
| Line 216: | Line 219: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">2007 [[File:EUflag.png|x12px|link=|Japan and Europe only]]</span> | <span class="year">2007 [[File:EUflag.png|x12px|link=|Japan and Europe only]]</span> | ||
{{TRR}} | {{TRR}} | ||
| Line 228: | Line 231: | ||
--><div class="empty-tile">[[File:Tile Empty.png|link=]]</div><!--Easiest way to center this row | --><div class="empty-tile">[[File:Tile Empty.png|link=]]</div><!--Easiest way to center this row | ||
--><div class="game | --><div class="game"> | ||
<span class="year">1997 [[File:JPflag.png|x12px|link=|Japan only]]</span> | <span class="year">1997 [[File:JPflag.png|x12px|link=|Japan only]]</span> | ||
{{AST}} | {{AST}} | ||
| Line 234: | Line 237: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class=year>1995 [[File:JPflag.png|x12px|link=|Japan only]]</span> | <span class=year>1995 [[File:JPflag.png|x12px|link=|Japan only]]</span> | ||
{{BSLoZ}} | {{BSLoZ}} | ||
| Line 251: | Line 254: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">1993</span> | <span class="year">1993</span> | ||
{{TWoG}} | {{TWoG}} | ||
| Line 257: | Line 260: | ||
</div><!-- | </div><!-- | ||
--><div class="game | --><div class="game"> | ||
<span class="year">1993</span> | <span class="year">1993</span> | ||
{{FoE}} | {{FoE}} | ||
| Line 431: | Line 434: | ||
.game a { | .game a { | ||
width:100%; | width:100%; | ||
height: | height:101%; | ||
clip:rect(0px,230px,125px,0px); | |||
/* Overdoing the height by 1% and clipping it off prevents the bug on certain browsers/OSes/screen-zoom-ins where the shadow falls short by a few pixels and doesn't cover the whole image. */ | |||
display:inline-block; | display:inline-block; | ||
font-style:normal; | font-style:normal; | ||
color:white; | color:white; | ||
position:absolute; | position:absolute; | ||
text-align:center; | text-align:center; | ||
| Line 443: | Line 447: | ||
text-decoration:none; | text-decoration:none; | ||
background-color:rgba(0,0,0, 0.6); | background-color:rgba(0,0,0, 0.6); | ||
. | /* Vertically centers game title text. -Webkit- vendor prefix is for Safari compatibility. Flexboxes are not compatible with IE 10 and lower. */ | ||
display: -webkit-flex; | |||
-webkit-justify-content:center; | |||
-webkit-flex-direction:column; | |||
display:flex; | |||
flex-direction:column; | |||
justify-content:center; | |||
} | } | ||
| Line 464: | Line 471: | ||
display: -webkit-flex; /* Safari */ | display: -webkit-flex; /* Safari */ | ||
-webkit-flex-flow: row-reverse wrap-reverse; /* Safari 6.1+ */ | -webkit-flex-flow: row-reverse wrap-reverse; /* Safari 6.1+ */ | ||
-webkit-justify-content:center; | |||
display:flex; | display:flex; | ||
flex-flow:row-reverse wrap-reverse; | flex-flow:row-reverse wrap-reverse; | ||
| Line 523: | Line 532: | ||
} | } | ||
#NIWAnav .cell {width: | #NIWAnav .cell { | ||
width:12em; | |||
padding:1em | |||
border-radius:5px; | |||
} | |||
</css> | </css> | ||
