Main Page

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

 

Zelda Wiki is a The 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:Main Page TP Listings.png

---

Latest News

Announcement archives

Did You Know...

• ... that Dark Link possesses the same amount of health as Link in Ocarina of Time, and that the number of hits required to defeat him equals the number of Heart Containers Link has?
• ... that Purlo was designed to look like a realistic version of Tingle?
• ... that The Legend of Zelda on NES was the first video game to include a backup battery in its cartridge?

Template:NIWAnav

<css>

/* These media queries handle how the main page behaves at different screen sizes. In particular, they assure that floating items (i.e. games and categories) are listed neatly in even "rows".

* Without these styles, these lists may look off at certain screen sizes.
* These styles may 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 (possibly with JQuery).

• /

.empty-tile {display:none} .spin-off-logo{display:block} @media screen and (min-width: 950px) {

 .categories {max-width:750px;} 

} @media screen and (min-width: 1180px) {

 .categories, {max-width:950px;} 
 .spin-off-logo, .empty-tile {display:inline-block} 

} @media screen and (max-width: 1350px) {

 .infoblock#dyk {
   order:3;
   width:100% !important;
   margin-top:2em;
 }
 #cdm-zone-02 {order:2;}
 .infoblock-container {flex-wrap: wrap;}

} @media screen and (min-width: 1650px) {

 .categories, .main-series {max-width:1415px;} 

} @media screen and (min-width: 2355px) {

 .main-series, .infoblocks, {max-width:2130px;}

} @media screen and (min-width: 3000px) { .categories {max-width:2750px;} }

1. content {

text-align:center; }

1. siteNotice, .main-page{

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

.main-page{ font-size:15px; margin:2em auto; width:98%; }

1. mf-zw-logo {

margin:0 auto; }

/* #################### SEARCH BAR #################### */

.bodySearchWrap { height:40px; margin-top:30px; font-size:18px; }

.mw-ui-input { max-width: 600px; width: 100%;

height:100%; padding:2px 2px 2px 10px; border-radius:3px; border:1px solid #999; }

/* Custom search button styling */ .mw-ui-button { -webkit-appearance: none; -moz-appearance: none;

height: 100%; 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;

} ​ .mw-ui-button:hover{

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

} ​ .mw-ui-button:focus{

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

} ​ .mw-ui-button:active{

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

}

/* #################### WELCOME TEXT #################### */

1. mf-welcome-text {

 margin:3em 0;

}

/* #################### 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:.5em; left:1em; font-size:12px; z-index:10; }

.game { display:inline-block; position:relative; 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; line-height:29px; font-size:25px; text-decoration:none; background-color:rgba(0,0,0, 0.6);

/* Vertically centers game title text. Flexboxes are not compatible with IE. */ display:flex; flex-direction:column; justify-content:center; }

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

.game-container{ margin:0 auto 3em; }

.main-series, .remakes { margin:0 auto; display:flex; flex-flow:row-reverse wrap-reverse; justify-content:center; }

.remakes { max-width:1000px; }

.categories{ margin:0 auto; text-align:center; }

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

.infoblock-container{ margin:3em auto; display:flex; justify-content:center; }

.infoblock {

 text-align:left;
 margin: 0 1em;
 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#dyk {width:60%;}

.infoblock#news {

 width:40%;

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

.infoblock.curse-ad { flex-shrink:0; }

1. cdm-zone-02 {

vertical-align:middle; }

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

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

1. mf-NIWAnav {

max-width:1650px; border:none; border-radius:2px; }

1. mf-NIWAnav .cell {

 width:12em; 
 border-radius:5px; 

} </css>