Main Page: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
(solved issue of shadow not stretching across the whole tile.)
(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 twoline">  
--><div class="game">  
<span class=year>1987</span>
<span class=year>1987</span>
{{TLoZ}}
{{TLoZ}}
Line 30: Line 30:
</div><!--
</div><!--


--><div class="game twoline">
--><div class="game">
<span class=year>1988</span>
<span class=year>1988</span>
{{TAoL}}
{{TAoL}}
Line 84: Line 84:
</div><!--
</div><!--


--><div class="game twoline">
--><div class="game">
<span class=year>2004</span>
<span class=year>2004</span>
{{FSA}}
{{FSA}}
Line 102: Line 102:
</div><!--
</div><!--


--><div class="game twoline">
--><div class="game">
<span class=year>2007</span>
<span class=year>2007</span>
[[The Legend of Zelda: Phantom Hourglass|Phantom<br>Hourglass]] <!-- DON'T CHANGE THIS. The text wraps to two lines on some platforms and not on others. This is forcing it to two lines so the code doesn't break. -->
{{PH}}
[[File:PH Tile.png|link=]]
[[File:PH Tile.png|link=]]
</div><!--
</div><!--
Line 120: Line 120:
</div><!--
</div><!--


--><div class="game twoline">
--><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 twoline">
--><div class="game">
<span class=year>1998</span>
<span class=year>1998</span>
{{LADX}}
{{LADX}}
Line 143: Line 143:
</div><!--
</div><!--


--><div class="game twoline">
--><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 twoline">
--><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 twoline">
--><div class="game">
<span class=year>2011</span>
<span class=year>2011</span>
{{FSAE}}
{{FSAE}}
Line 167: Line 167:
</div><!--
</div><!--


--><div class="game twoline">
--><div class="game">
<span class=year>2013</span>
<span class=year>2013</span>
[[The Legend of Zelda: The Wind Waker HD|The Wind Waker<br>HD]] <!-- DON'T CHANGE THIS. The text wraps to two lines on some platforms and not on others. This is forcing it to two lines so the code doesn't break. -->
{{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 twoline">
--><div class="game">
<span class="year">2007</span>
<span class="year">2007</span>
{{LCT}}
{{LCT}}
Line 195: Line 198:
</div><!--
</div><!--


--><div class="game twoline">
--><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 twoline">
--><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 twoline">
--><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 twoline">
--><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 twoline">
--><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 twoline">
--><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 twoline">
--><div class="game">
<span class="year">1993</span>
<span class="year">1993</span>
{{TWoG}}
{{TWoG}}
Line 257: Line 260:
</div><!--
</div><!--


--><div class="game twoline">
--><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:100%;
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;
padding-top:48px;
padding-bottom:48px;
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);
clip:rect(0px,230px,125px,0px);
}


.twoline a {
/* Vertically centers game title text. -Webkit- vendor prefix is for Safari compatibility. Flexboxes are not compatible with IE 10 and lower. */
padding-top:34px;
display: -webkit-flex;
padding-bottom:33px;
-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:175px; border-radius:5px}
#NIWAnav .cell {
  width:12em;  
  padding:1em
  border-radius:5px;
}
</css>
</css>

Revision as of 00:02, 23 May 2015

__NOCACHE__ <htmlet>main-page font</htmlet>

ZW Logo White.png
 

Zelda Wiki is a Legend of Zelda encyclopedia that anyone can edit and is maintained by fans just like you.

Learn how you can become a part of the Zelda Wiki community.

Template:Tab2

Categories

File:MainPage Bosses MM3D.png File:MainPage Characters MM3D.png File:MainPage Dungeons MM3D.png File:MainPage Enemies MM3D.png File:MainPage Events MM3D.png File:MainPage Items MM3D.png File:MainPage Locations MM3D.png File:MainPage Merchandise MM3D.png File:MainPage Mini Games MM3D.png File:MainPage Races MM3D.png File:MainPage Side Quests MM3D.png File:MainPage Songs MM3D.png

File:MainPage Listings MM3D.png

Latest News

It's November!
We've listed pages that need some love. Take a look!
It's Halloween!
We've listed pages that need some love. Take a look!
Link's Awakening for Nintendo Switch just released!
We've listed pages that need updating, think you're up for the task? Take a look!
We're less than 3 weeks away from the release of Link's Awakening for Nintendo Switch! Let's contribute on pages related to that! Take a look!
It's the back to school period! Let's contribute on pages related to that! Take a look!
The sealife of The Legend of Zelda series is pretty diversified, let's contribute on those pages! Take a look!
A bunch of Outfits exist in The Legend of Zelda series, let's contribute on those pages! Take a look!

Announcement archives

Did You Know...

Latest News

It's November!
We've listed pages that need some love. Take a look!
It's Halloween!
We've listed pages that need some love. Take a look!
Link's Awakening for Nintendo Switch just released!
We've listed pages that need updating, think you're up for the task? Take a look!
We're less than 3 weeks away from the release of Link's Awakening for Nintendo Switch! Let's contribute on pages related to that! Take a look!
It's the back to school period! Let's contribute on pages related to that! Take a look!
The sealife of The Legend of Zelda series is pretty diversified, let's contribute on those pages! Take a look!
A bunch of Outfits exist in The Legend of Zelda series, let's contribute on those pages! Take a look!

Announcement archives

Did You Know...

Template:NIWAnav

<css>

/* These media queries handle how the main page behaves at different screen sizes. It will need to be modified with each new game. 

*  This is not ideal responsive design by any means. It'll have to do until a more elegant solution presents itself.
  • /

.largeres, .empty-tile {display:none} .spin-off-logo{display:block} @media screen and (min-width: 950px) {.categories, .main-series {width:750px;} } @media screen and (min-width: 1180px) {.categories, .main-series {width:950px;} .lowres {display:none} .largeres {display:block} .spin-off-logo, .empty-tile {display:inline-block} } @media screen and (min-width: 1650px) {.categories, .main-series {width:1415px;} } @media screen and (min-width: 1720px) {#NIWAnav .body {width:1500px;} } @media screen and (min-width: 2355px) {.main-series, .infoblocks, #NIWAnav {width:2130px;} #NIWAnav .body{width:auto} } @media screen and (min-width: 3000px) {.categories {width:2750px;} }

  1. siteNotice, .main-page{

font-family: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; }

.main-page{ font-size:14px; text-align:center; margin:30px auto; width:98%; }


/* #################### SEARCH BAR #################### */ .bodySearch{ margin:30px 0 60px; }

  1. bodySearchInput{

width:100%; max-width:600px; font-size:18px; height:35px; padding:2px 2px 2px 10px; border-radius:3px; border:1px solid #999; }

/* Custom search button styling. Based on the button styling from MediaWiki 1.23+ (iirc) */ .bodySearchBtnGo{ -webkit-appearance: none; -moz-appearance: none; appearance: none;

font-size:18px; height: 41px; background-color:#ebebeb; border-radius: 3px; border: 1px solid #999; padding: 2px; width:130px; cursor:pointer; 

 -webkit-transition: background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
 -moz-transition: background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
 -o-transition: background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
 transition: background .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;

}

.bodySearchBtnGo:hover{ 

 box-shadow: 0 2px rgba(0,0,0,0.1),inset 0 -4px rgba(0,0,0,0.2);

}

.bodySearchBtnGo:focus{ 

 border:2px solid rgba(0,0,0,0.3);
 border-radius: 4px;
 outline:none;
 box-shadow:none;

}

.bodySearchBtnGo:active{ 

box-shadow: 0 0 3px rgba(0,0,0,0.2);
background-color:#ccc;

}


/* #################### GAME NAV #################### */ .tab{ font-size:18px; font-weight:bold; padding:0.5em 1em !important; background-image:none !important; /* It was decided the tab gradient is outdated and tacky. */ border-radius: 2px !important; }

.tab:hover{background-color:#214b71 !important;}

.tab.active{background-color:#153f63 !important;}

.year{ color:rgba(255, 255, 255, 0.9); !important; position:absolute; bottom:1em; left:1em; font-size:12px; z-index:10; }

.game { display:inline-block; position:relative; text-align:center; font-size:0; margin:2px; }

/* "Stretches" the game link over the tile image. 

* Relying on pixel sizes is not ideal and makes the design very delicate. Again, it'll have to do until a more elegant solution comes up.
*/

.game a { width:100%; 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; font-style:normal; color:white; position:absolute; text-align:center; line-height:29px; font-size:25px; text-decoration:none; 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; }

.game a:hover { background-color:rgba(0,0,0, 0.3); }

.game-container{ margin:50px auto 0; }

.main-series, .remakes { margin:0 auto;

display: -webkit-flex; /* Safari */ -webkit-flex-flow: row-reverse wrap-reverse; /* Safari 6.1+ */ -webkit-justify-content:center;

display:flex; flex-flow:row-reverse wrap-reverse; justify-content:center; }

.remakes { max-width:1000px; }

.categories{ margin:30px auto 50px; }

/* #################### NEWS AND DID YOU KNOW BLOCKS #################### */

.infoblocks{ margin:50px auto 0; }

.infoblocks td { text-align: left; padding: 1em; border-radius:5px; 

       background: #1d578b; 
       vertical-align:top;

}

.infoblock-header { 

       font-family:'Bowlby One';
       letter-spacing:1px;

display: block; font-size: 3em; 

       line-height:1em;
       padding:0 .5em .2em .5em;

text-transform:uppercase; }

.infoblock-news {width:39%} .infoblock-news dl{display:none;} /* Removes the main text from the announcements (otherwise the block is too bulky) */

.infoblock-separator { width:1%; background:transparent !important; }

.infoblock-dyk {width:60%}

.infoblock-news ul li {margin-bottom: 10px;} .infoblock-dyk ul li {margin-bottom: 20px;}


/* #################### NIWA NAV #################### */

  1. NIWAnav {

margin:30px auto 0; border:none; border-radius:2px; }

  1. NIWAnav .cell {
 width:12em; 
 padding:1em 
 border-radius:5px;

} </css>

Retrieved from "https://zeldawiki.wiki/w/index.php?title=Main_Page&oldid=442775"