Anonymous

Main Page: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia

Main Page (view source)

Revision as of 21:38, 30 January 2016

354 bytes removed ,  30 January 2016
Added Curse ad, updated "infoblocks" design to something a little more elegant with flexboxes. The "news" block isn't always the right size but I should be able to fix that soon
VisualWikitext
m (Text replace - "''Tingle's Balloon Fight DS''" to "''Tingle's Balloon Fight DS''")
(Added Curse ad, updated "infoblocks" design to something a little more elegant with flexboxes. The "news" block isn't always the right size but I should be able to fix that soon)
Line 304: Line 304:
[[File:Main Page TP Listings.png|center|link=Category:Listings]]
[[File:Main Page TP Listings.png|center|link=Category:Listings]]
----
----
</div><!--
</div>


-->{{#vardefine:infoblock-news|
<div class="infoblock-container">
<div class="infoblock" id="news">
<span class="infoblock-header">Latest News</span>
<span class="infoblock-header">Latest News</span>
{{#section:Zelda Wiki:Latest Announcements|body}}
{{#section:Zelda Wiki:Latest Announcements|body}}
<span style="font-size:80%;">[[Zelda Wiki:Latest Announcements|Announcement archives]]</span>}}<!--
<span style="font-size:80%;">[[Zelda Wiki:Latest Announcements|Announcement archives]]</span>
 
</div>
-->{{#vardefine:infoblock-dyk|
<div class="infoblock" id="dyk">
<span class="infoblock-header">Did You Know...</span>
<span class="infoblock-header">Did You Know...</span>
{{DYK/A}}
{{DYK/A}}
{{DYK/B}}
{{DYK/B}}
{{DYK/C}}
{{DYK/C}}
}}
</div>
{| class="infoblocks largeres"
<div class="infoblock" id="cdm-zone-02"></div>
| class="infoblock-news" |
</div>
{{#var:infoblock-news}}
 
| class="infoblock-separator" |
<div class="niwabar">
| class="infoblock-dyk" |
{{#var:infoblock-dyk}}
|}
{| class="infoblocks lowres"
| class="infoblock-news" |
{{#var:infoblock-news}}
|-
| class="infoblock-separator" |
|-
| class="infoblock-dyk" |
{{#var:infoblock-dyk}}
|}
<div class=niwabar>
{{NIWAnav}}
{{NIWAnav}}
</div>
</div>
</div>
<css>
<css>
Line 342: Line 329:
  *  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.
*/  
*/  
.largeres, .empty-tile {display:none}
.empty-tile {display:none}
.spin-off-logo{display:block}
.spin-off-logo{display:block}
@media screen and (min-width: 950px) {.categories, .main-series {width:750px;} }
@media screen and (min-width: 950px) {
@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} }
  .categories, .main-series {width:750px;}  
@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: 1180px) {
@media screen and (min-width: 2355px) {.main-series, .infoblocks, #NIWAnav {width:2130px;} #NIWAnav .body{width:auto} }
  .categories, .main-series {width:950px;}  
@media screen and (min-width: 3000px) {.categories {width:2750px;} }
  .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{
#siteNotice, .main-page{
Line 361: Line 372:
width:98%;
width:98%;
}
}


/* #################### SEARCH BAR #################### */
/* #################### SEARCH BAR #################### */
Line 466: Line 475:
background-color:rgba(0,0,0, 0.6);
background-color:rgba(0,0,0, 0.6);


/* Vertically centers game title text. -Webkit- vendor prefix is for Safari compatibility. Flexboxes are not compatible with IE 10 and lower. */
/* Vertically centers game title text. Flexboxes are not compatible with IE. */
display: -webkit-flex;
-webkit-justify-content:center;
-webkit-flex-direction:column;
 
display:flex;
display:flex;
flex-direction:column;
flex-direction:column;
Line 486: Line 491:
.main-series, .remakes {
.main-series, .remakes {
margin:0 auto;
margin:0 auto;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap-reverse; /* Safari 6.1+ */
-webkit-justify-content:center;
display:flex;
display:flex;
flex-flow:row-reverse wrap-reverse;
flex-flow:row-reverse wrap-reverse;
Line 506: Line 506:
/* #################### NEWS AND DID YOU KNOW BLOCKS #################### */
/* #################### NEWS AND DID YOU KNOW BLOCKS #################### */


.infoblocks{
.infoblock-container{
margin:50px auto 0;
margin:50px auto 0;
display:flex;
justify-content:center;
}
}


.infoblocks td {
.infoblock {
text-align: left;
  text-align: left;
padding: 1em;
  padding: 1em;
border-radius:5px;
  margin: 0 1em;
        background: #1d578b;  
  border-radius:5px;
        vertical-align:top;
  background: #1d578b;  
  vertical-align:top;
}
}


Line 528: Line 531:
}
}


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


.infoblock-separator  {
.infoblock#news {
width:1%;
  width:40%;
background:transparent !important;
}
}
.infoblock#news dl{display:none;} /* Removes the main text from the announcements (otherwise the block is too bulky) */


.infoblock-dyk {width:60%}
#cdm-zone-02 {
 
vertical-align:middle;
.infoblock-news ul li {margin-bottom: 10px;}
}
.infoblock-dyk ul li {margin-bottom: 20px;}


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


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


#NIWAnav {
#NIWAnav {
margin:30px auto 0;
margin:3em 1em 0;
border:none;
border:none;
border-radius:2px;
border-radius:2px;
Retrieved from "https://zeldawiki.wiki/wiki/Special:MobileDiff/467349"