Main Page: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
mNo edit summary
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;
}
}
 
#bodySearchInput{
.bodySearch input:first-of-type{
width:100%;
width:100%;
max-width:600px;
max-width:600px;
font-size:18px;
font-size:18px;
height:35px;
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. Based on the button styling from MediaWiki 1.23+ (iirc) */
/* Custom search button styling */
.bodySearchBtnGo{
.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: 41px;
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;
}
}
 
.bodySearchBtnGo:hover{
.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);
}
}
 
.bodySearchBtnGo:focus{
.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;
}
}
 
.bodySearchBtnGo:active{
.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>

ZW Logo White.png
 

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.

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...

<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;} } ​ ​

  1. 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; } ​

  1. cdm-zone-02 {

vertical-align:middle; } ​ .infoblock#news ul li {margin-bottom: 10px;} .infoblock#dyk ul li {margin-bottom: 20px;} ​ /* #################### NIWA NAV #################### */ ​

  1. NIWAnav {

margin:3em 1em 0; border:none; border-radius:2px; } ​

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

} </css>