Main Page: Difference between revisions
PhantomCaleb (talk | contribs) mNo edit summary |
CodyDaviesTV (talk | contribs) No edit summary |
||
Line 327: | Line 327: | ||
</div> | </div> | ||
<css> | <css> | ||
/* These media queries handle how the main page behaves at different screen sizes. It will need to be modified with each new game. | /* 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. | * This is not ideal responsive design by any means. It'll have to do until a more elegant solution presents itself. | ||
Line 362: | Line 361: | ||
.categories {width:2750px;} | .categories {width:2750px;} | ||
} | } | ||
| |||
| |||
#siteNotice, .main-page{ | #siteNotice, .main-page{ | ||
font-family: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; | font-family: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; | ||
} | } | ||
| |||
.main-page{ | .main-page{ | ||
font-size:14px; | font-size:14px; | ||
Line 374: | Line 373: | ||
width:98%; | width:98%; | ||
} | } | ||
| |||
/* #################### SEARCH BAR #################### */ | /* #################### SEARCH BAR #################### */ | ||
.bodySearchWrap { | |||
height:40px; | |||
} | |||
| |||
.bodySearch{ | .bodySearch{ | ||
margin:30px 0 60px; | margin:30px 0 60px; | ||
} | } | ||
| |||
.bodySearch input:first-of-type{ | |||
width:100%; | width:100%; | ||
max-width:600px; | max-width:600px; | ||
font-size:18px; | font-size:18px; | ||
height: | height:100%; | ||
padding:2px 2px 2px 10px; | padding:2px 2px 2px 10px; | ||
border-radius:3px; | border-radius:3px; | ||
border:1px solid #999; | border:1px solid #999; | ||
} | } | ||
| |||
/* Custom search button styling | /* Custom search button styling */ | ||
. | .bodySearch input:last-of-type{ | ||
-webkit-appearance: none; | -webkit-appearance: none; | ||
-moz-appearance: none; | -moz-appearance: none; | ||
appearance: none; | appearance: none; | ||
| |||
font-size:18px; | font-size:18px; | ||
height: | height: 100%; | ||
background-color:#ebebeb; | background-color:#ebebeb; | ||
border-radius: 3px; | border-radius: 3px; | ||
Line 409: | Line 412: | ||
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; | ||
} | } | ||
| |||
. | .bodySearch input:last-of-type:hover{ | ||
box-shadow: 0 2px rgba(0,0,0,0.1),inset 0 -4px rgba(0,0,0,0.2); | box-shadow: 0 2px rgba(0,0,0,0.1),inset 0 -4px rgba(0,0,0,0.2); | ||
} | } | ||
| |||
. | .bodySearch input:last-of-type:focus{ | ||
border:2px solid rgba(0,0,0,0.3); | border:2px solid rgba(0,0,0,0.3); | ||
border-radius: 4px; | border-radius: 4px; | ||
Line 420: | Line 423: | ||
box-shadow:none; | box-shadow:none; | ||
} | } | ||
| |||
. | .bodySearch input:last-of-type:active{ | ||
box-shadow: 0 0 3px rgba(0,0,0,0.2); | box-shadow: 0 0 3px rgba(0,0,0,0.2); | ||
background-color:#ccc; | background-color:#ccc; | ||
} | } | ||
| |||
| |||
| |||
/* #################### GAME NAV #################### */ | /* #################### GAME NAV #################### */ | ||
.tab{ | .tab{ | ||
Line 436: | Line 439: | ||
border-radius: 2px !important; | border-radius: 2px !important; | ||
} | } | ||
| |||
.tab:hover{background-color:#214b71 !important;} | .tab:hover{background-color:#214b71 !important;} | ||
| |||
.tab.active{background-color:#153f63 !important;} | .tab.active{background-color:#153f63 !important;} | ||
| |||
.year{ | .year{ | ||
color:rgba(255, 255, 255, 0.9); !important; | color:rgba(255, 255, 255, 0.9); !important; | ||
Line 449: | Line 452: | ||
z-index:10; | z-index:10; | ||
} | } | ||
| |||
.game { | .game { | ||
display:inline-block; | display:inline-block; | ||
Line 457: | Line 460: | ||
margin:2px; | margin:2px; | ||
} | } | ||
| |||
/* "Stretches" the game link over the tile image. | /* "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. | * 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. | ||
Line 466: | Line 469: | ||
clip:rect(0px,230px,125px,0px); | 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. */ | /* 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; | ||
Line 476: | Line 479: | ||
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. Flexboxes are not compatible with IE. */ | /* Vertically centers game title text. Flexboxes are not compatible with IE. */ | ||
display:flex; | display:flex; | ||
Line 482: | Line 485: | ||
justify-content:center; | justify-content:center; | ||
} | } | ||
| |||
.game a:hover { | .game a:hover { | ||
background-color:rgba(0,0,0, 0.3); | background-color:rgba(0,0,0, 0.3); | ||
} | } | ||
| |||
.game-container{ | .game-container{ | ||
margin:50px auto 0; | margin:50px auto 0; | ||
} | } | ||
| |||
.main-series, .remakes { | .main-series, .remakes { | ||
margin:0 auto; | margin:0 auto; | ||
Line 497: | Line 500: | ||
justify-content:center; | justify-content:center; | ||
} | } | ||
| |||
.remakes { | .remakes { | ||
max-width:1000px; | max-width:1000px; | ||
} | } | ||
| |||
.categories{ | .categories{ | ||
margin:30px auto 50px; | margin:30px auto 50px; | ||
} | } | ||
| |||
/* #################### NEWS AND DID YOU KNOW BLOCKS #################### */ | /* #################### NEWS AND DID YOU KNOW BLOCKS #################### */ | ||
| |||
.infoblock-container{ | .infoblock-container{ | ||
margin:50px auto 0; | margin:50px auto 0; | ||
Line 513: | Line 516: | ||
justify-content:center; | justify-content:center; | ||
} | } | ||
| |||
.infoblock { | .infoblock { | ||
text-align: left; | text-align: left; | ||
Line 522: | Line 525: | ||
vertical-align:top; | vertical-align:top; | ||
} | } | ||
| |||
.infoblock-header { | .infoblock-header { | ||
font-family:'Bowlby One'; | font-family:'Bowlby One'; | ||
Line 532: | Line 535: | ||
text-transform:uppercase; | text-transform:uppercase; | ||
} | } | ||
| |||
.infoblock#dyk {width:60%;} | .infoblock#dyk {width:60%;} | ||
| |||
.infoblock#news { | .infoblock#news { | ||
width:40%; | width:40%; | ||
} | } | ||
.infoblock#news dl{display:none;} /* Removes the main text from the announcements (otherwise the block is too bulky) */ | .infoblock#news dl{display:none;} /* Removes the main text from the announcements (otherwise the block is too bulky) */ | ||
| |||
.infoblock.curse-ad { | .infoblock.curse-ad { | ||
flex-shrink:0; | flex-shrink:0; | ||
} | } | ||
| |||
#cdm-zone-02 { | #cdm-zone-02 { | ||
vertical-align:middle; | vertical-align:middle; | ||
} | } | ||
| |||
.infoblock#news ul li {margin-bottom: 10px;} | .infoblock#news ul li {margin-bottom: 10px;} | ||
.infoblock#dyk ul li {margin-bottom: 20px;} | .infoblock#dyk ul li {margin-bottom: 20px;} | ||
| |||
/* #################### NIWA NAV #################### */ | /* #################### NIWA NAV #################### */ | ||
| |||
#NIWAnav { | #NIWAnav { | ||
margin:3em 1em 0; | margin:3em 1em 0; | ||
Line 558: | Line 561: | ||
border-radius:2px; | border-radius:2px; | ||
} | } | ||
| |||
#NIWAnav .cell { | #NIWAnav .cell { | ||
width:12em; | width:12em; |
Revision as of 10:24, 7 May 2016
__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.
Categories
File:Main Page TP Bosses.png File:Main Page TP Characters.png File:Main Page TP Dungeons.png File:Main Page TP Enemies.png File:Main Page TP Events.png File:Main Page TP Items.png File:Main Page TP Locations.png File:Main Page TP Merchandise.png File:Main Page TP Mini Games.png File:Main Page TP Races.png File:Main Page TP Side Quests.png File:Main Page TP Songs.png
Latest News
- November 4th, 2019: 🕒 Wiki Weekly #25! 🕑
- It's November!
We've listed pages that need some love. Take a look!
- October 24th, 2019: 🎃 Wiki Weekly #24! 👻
- It's Halloween!
We've listed pages that need some love. Take a look!
- September 20th, 2019: 🏝️ Wiki Weekly #23! ⛵
- 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!
- September 2nd, 2019: 💤 Wiki Weekly #22! 🛌
- 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!
- August 12th, 2019: 🚌 Wiki Weekly #21! 📚
- It's the back to school period! Let's contribute on pages related to that! Take a look!
- July 22nd, 2019: 🐟 Wiki Weekly #20! 🦑
- The sealife of The Legend of Zelda series is pretty diversified, let's contribute on those pages! Take a look!
- May 20th, 2019: 👗 Wiki Weekly #17! 👕
- A bunch of Outfits exist in The Legend of Zelda series, let's contribute on those pages! Take a look!
Did You Know...
- ... that Anju's Grandmother from Majora's Mask was one of Mayor Dotour's schoolteachers?
- ... that in Tri Force Heroes, Link is randomly assigned a voice from one of four prior Zelda games?
- ... that Ganon's laugh in The Adventure of Link was originally used for Punch-Out!!'s Soda Popinski?
<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.
- /
.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;} .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 {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;} }
- siteNotice, .main-page{
font-family: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; } .main-page{ font-size:14px; text-align:center; margin:2em auto; width:98%; } /* #################### SEARCH BAR #################### */ .bodySearchWrap {
height:40px;
} .bodySearch{ margin:30px 0 60px; } .bodySearch input:first-of-type{ width:100%; max-width:600px; font-size:18px; height:100%; padding:2px 2px 2px 10px; border-radius:3px; border:1px solid #999; } /* Custom search button styling */ .bodySearch input:last-of-type{ -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size:18px; 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;
} .bodySearch input:last-of-type:hover{
box-shadow: 0 2px rgba(0,0,0,0.1),inset 0 -4px rgba(0,0,0,0.2);
} .bodySearch input:last-of-type:focus{
border:2px solid rgba(0,0,0,0.3); border-radius: 4px; outline:none; box-shadow:none;
} .bodySearch input:last-of-type: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. 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:50px auto 0; } .main-series, .remakes { margin:0 auto; 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 #################### */ .infoblock-container{ margin:50px auto 0; display:flex; justify-content:center; } .infoblock {
text-align: left; padding: 1em; margin: 0 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; }
- cdm-zone-02 {
vertical-align:middle; } .infoblock#news ul li {margin-bottom: 10px;} .infoblock#dyk ul li {margin-bottom: 20px;} /* #################### NIWA NAV #################### */
- NIWAnav {
margin:3em 1em 0; border:none; border-radius:2px; }
- NIWAnav .cell {
width:12em; border-radius:5px;
} </css>