Main Page: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
mNo edit summary
(updating styles)
Line 3: Line 3:


<div class=main-page>
<div class=main-page>
[[File:ZW Logo White.png|400px|center]]
<div id="mf-zw-logo">[[File:ZW Logo White.png|400px|center]]</div>


<inputbox>
<inputbox>
Line 11: Line 11:
</inputbox>
</inputbox>


<div id="mf-welcome-text">
'''Zelda Wiki''' is a ''The Legend of Zelda'' encyclopedia that [[Help:Contents|anyone can edit]] and is [[Zelda Wiki:Staff|maintained by fans just like you]].
'''Zelda Wiki''' is a ''The Legend of Zelda'' encyclopedia that [[Help:Contents|anyone can edit]] and is [[Zelda Wiki:Staff|maintained by fans just like you]].


[[Zelda Wiki:Getting Involved|Learn how you can become a part of the Zelda Wiki community]].
[[Zelda Wiki:Getting Involved|Learn how you can become a part of the Zelda Wiki community]].
</div>


<div class="game-container">
<div class="game-container">
Line 306: Line 308:
</div>
</div>


<div class="infoblock-container">
<div id="mf-infoblocks" class="infoblock-container">
<div class="infoblock" id="news">
<div class="infoblock" id="news">
<span class="infoblock-header">Latest News</span>
<span class="infoblock-header">Latest News</span>
Line 322: Line 324:
</div>
</div>
</div>
</div>
<div class="niwabar">
{{NIWAnav}}
{{NIWAnav}}
</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. In particular, they assure that floating items (i.e. games and categories) are listed neatly in even "rows".
This is not ideal responsive design by any means. It'll have to do until a more elegant solution presents itself.
* 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}
.empty-tile {display:none}
.spin-off-logo{display:block}
.spin-off-logo{display:block}
@media screen and (min-width: 950px) {
@media screen and (min-width: 950px) {
   .categories, .main-series {width:750px;}  
   .categories {max-width:750px;}  
}
}
@media screen and (min-width: 1180px) {
@media screen and (min-width: 1180px) {
   .categories, .main-series {width:950px;}  
   .categories, {max-width:950px;}  
   .spin-off-logo, .empty-tile {display:inline-block}  
   .spin-off-logo, .empty-tile {display:inline-block}  
}
}
Line 350: Line 351:
}
}
@media screen and (min-width: 1650px) {
@media screen and (min-width: 1650px) {
   .categories, .main-series {width:1415px;}  
   .categories, .main-series {max-width:1415px;}  
}  
}  
@media screen and (min-width: 1720px) {
  #NIWAnav .body {width:1500px;}
}
@media screen and (min-width: 2355px) {
@media screen and (min-width: 2355px) {
   .main-series, .infoblocks, #NIWAnav {width:2130px;}
   .main-series, .infoblocks, {max-width:2130px;}
  #NIWAnav .body{width:auto}  
}
}
@media screen and (min-width: 3000px) {
@media screen and (min-width: 3000px) {
.categories {width:2750px;}  
.categories {max-width:2750px;}  
}
}


#content {
text-align:center;
}


#siteNotice, .main-page{
#siteNotice, .main-page{
Line 370: Line 370:
.main-page{
.main-page{
font-size:15px;
font-size:15px;
text-align:center;
margin:2em auto;
margin:2em auto;
width:98%;
width:98%;
}
#mf-zw-logo {
margin:0 auto;
}
}


Line 379: Line 382:
.bodySearchWrap {
.bodySearchWrap {
height:40px;
height:40px;
margin:30px 0 50px;
margin-top:30px;
font-size:18px;
font-size:18px;
}
}
Line 425: Line 428:
  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;
}
/* #################### WELCOME TEXT #################### */
#mf-welcome-text {
  margin:3em 0;
}
}


Line 452: Line 460:
display:inline-block;
display:inline-block;
position:relative;
position:relative;
text-align:center;
font-size:0;
font-size:0;
margin:2px;
margin:2px;
Line 470: Line 477:
color:white;
color:white;
position:absolute;
position:absolute;
text-align:center;
line-height:29px;
line-height:29px;
font-size:25px;
font-size:25px;
Line 487: Line 493:


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


Line 502: Line 508:


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


Line 508: Line 515:


.infoblock-container{
.infoblock-container{
margin:50px auto 0;
margin:3em auto;
display:flex;
display:flex;
justify-content:center;
justify-content:center;
Line 514: Line 521:


.infoblock {
.infoblock {
   text-align: left;
   text-align:left;
  margin: 0 1em;
   padding: 1em;
   padding: 1em;
  margin: 0 1em;
   border-radius:5px;
   border-radius:5px;
   background: #1d578b;  
   background: #1d578b;  
Line 552: Line 559:
/* #################### NIWA NAV #################### */
/* #################### NIWA NAV #################### */


#NIWAnav {
#mf-NIWAnav {
margin:3em 1em 0;
max-width:1650px;
border:none;
border:none;
border-radius:2px;
border-radius:2px;
}
}


#NIWAnav .cell {
#mf-NIWAnav .cell {
   width:12em;  
   width:12em;  
   border-radius:5px;  
   border-radius:5px;  
}
}
</css>
</css>

Revision as of 18:00, 23 May 2016

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

 

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