Main Page: Difference between revisions
PhantomCaleb (talk | contribs) (Added flexbox CSS feature so tiles wrap in reverse. This singles out newest games at the top instead of oldest games at the bottom, almost like a "splotlight feature". Only added it for remakes and main series, more work will be required for the spin-offs) |
PhantomCaleb (talk | contribs) mNo edit summary |
||
| Line 94: | Line 94: | ||
{{TMC}} | {{TMC}} | ||
[[File:TMC Tile.png|link=]] | [[File:TMC Tile.png|link=]] | ||
</div><!-- | |||
--><div class="game"> | |||
<span class=year>2006</span> | |||
{{TP}} | |||
[[File:TP Tile.png|link=]] | |||
</div><!-- | </div><!-- | ||
| Line 100: | Line 106: | ||
[[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. --> | [[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. --> | ||
[[File:PH Tile.png|link=]] | [[File:PH Tile.png|link=]] | ||
</div><!-- | </div><!-- | ||
Revision as of 01:38, 22 May 2015
__NOCACHE__ <htmlet>main-page font</htmlet>
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.
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
|
Latest News
|
Did You Know...
|
|
Latest News
|
|
Did You Know...
|
<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;} }
- 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; }
- 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%; display:inline-block; font-style:normal; color:white; padding-top:48px; padding-bottom:48px; position:absolute; text-align:center; line-height:29px; font-size:25px; text-decoration:none; background-color:rgba(0,0,0, 0.6); }
.twoline a { padding-top:34px; padding-bottom:33px; }
.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+ */ 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 #################### */
- NIWAnav {
margin:30px auto 0; border:none; border-radius:2px; }
- NIWAnav .cell {width:175px; border-radius:5px}
</css>