Www.wikivoyage.org template/temp/sandbox
Appearance
<!DOCTYPE html>
<html lang="mul" dir="ltr">
<head>
<!-- {{colophon}} -->
<meta charset="utf-8">
<title>Wikivoyage</title>
<meta name="description" content="Wikivoyage, the free, worldwide travel guide that anyone can edit.">
<meta name="robots" content="index, follow">
<!-- [if lt IE 7]><meta http-equiv="imagetoolbar" content="no"><![endif] -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/static/favicon/wikivoyage.ico">
<link rel="copyright" href="//creativecommons.org/licenses/by-sa/3.0/">
<link rel="copyright" href="//www.gnu.org/copyleft/fdl.html">
<link rel="license" href="//creativecommons.org/licenses/by-sa/3.0/">
<link rel="license" href="//www.gnu.org/copyleft/fdl.html">
<!-- See https://meta.wikimedia.org/wiki/MediaWiki:Gadget-wm-portal.js -->
<script async src="//meta.wikimedia.org/w/load.php?debug=false&lang=en&modules=ext.gadget.wm-portal&only=scripts&skin=vector&*"></script>
<!-- TODO: separate into mobile specific stylesheet -->
<style type="text/css">
html {
height: 100%;
}
body {
background: #074A81 url('//upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Sea_and_sky_light.jpg/1024px-Sea_and_sky_light.jpg') no-repeat;
background-size: 102% 102%;
background-size: cover;
background-position: bottom;
font: 13px/1.5 sans-serif;
margin: 0;
overflow-x: hidden;
}
a,
a:active,
a:focus {
unicode-bidi: embed;
white-space: nowrap;
outline: 0;
color: #00235B;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
vertical-align: middle;
}
/*******************
* Central logo area for wiki-project portals
* (e.g. where the globe is on www.wikipedia.org)
*/
.central-featured {
position: relative;
text-align: center;
vertical-align: middle;
max-width: 100%;
width: 42em;
margin: 0 auto;
height: 31em;
}
.central-featured-lang {
position: absolute;
width: 13em;
}
/* Make entire block clickable, suppress hover underline */
.central-featured-lang .link-box {
display: block;
padding: 0;
text-decoration: none;
}
/* Restore underline on main label */
.central-featured-lang .link-box:hover strong {
text-decoration: underline;
}
/* Suppress blue color */
.central-featured-lang .link-box em {
color: black;
text-decoration: none;
text-shadow: 0.1em 0.1em 0.2em white;
line-height: 1ex;
}
.central-featured-lang strong {
font-size: larger;
text-shadow: 0.1em 0.1em 0.2em white;
}
.central-featured-lang em {
font-style: italic;
font-size: larger;
}
.central-featured-lang .emNonItalicLang {
font-style: normal;
}
.lang1 {
top: 0%;
right: 52%;
}
.lang2 {
top: 0%;
left: 52%;
}
.lang3 {
top: 20%;
right: 67%;
}
.lang4 {
top: 20%;
left: 67%;
}
.lang5 {
top: 40%;
right: 72%;
}
.lang6 {
top: 40%;
left: 72%;
}
.lang7 {
top: 60%;
right: 67%;
}
.lang8 {
top: 60%;
left: 67%;
}
.lang9 {
top: 80%;
right: 52%;
}
.lang10 {
top: 80%;
left: 52%;
}
/*******************
* Search bar below the central logo area
*/
.search-container {
float: none;
margin: 0 auto 1.5em auto;
max-width: 95%;
padding: 0 0.3em;
text-align: center;
vertical-align: top;
width: 540px;
}
.search-form fieldset {
border: none;
margin: 0;
padding: 0;
width: auto;
}
#searchInput {
vertical-align: middle;
border: solid thin lightblue;
border-radius: 2px 0 0px 2px;
font-size: 20px;
margin: 0;
padding: 6px 2px 5px 8px;
}
.formBtn {
vertical-align: middle;
height: 38px;
border: solid thin lightblue;
border-left: none;
border-radius: 0 2px 2px 0;
background-color: #0067BB;
color: white;
margin:0 0 0 -4px;
padding:4px 5px 6px 6px;
cursor:pointer;
}
#searchLanguage {
vertical-align: middle;
height: 38px;
border: solid thin lightblue;
border-radius: 2px;
background-color: #0067BB;
color: white;
font-size: 20px;
padding: 4px;
margin: 0 0 0 8px;
}
/**
* Style for horizontal lists (separator following item).
* @note Support for unused tags like <dt> has been stripped out, and the
* dependency on :last-child and JavaScript has been removed in favor of
* :before.
* @source mediawiki.org/wiki/Snippets/Horizontal_lists
* @revision 6 (2014-05-09)
* @author [[User:Edokter]]
*/
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist li {
display: inline;
}
/* Display nested lists inline */
.hlist ul ul {
display: inline;
}
/* Generate interpuncts */
.hlist li:before {
content: " · ";
font-weight: bold;
}
.hlist li:first-child:before {
content: none;
}
/* Add parentheses around nested lists */
.hlist li + ul:before {
content: "\00a0(";
}
.hlist li + ul:after {
content: ") ";
}
/*******************
* Language lists, etc.
*/
.langlist {
font-size: larger;
text-align: center;
margin: 0.5em 3em 2.5em 3em;
clear: both;
}
.langlist a {
white-space: nowrap;
}
/* .langlist-large {
font-size: larger;
}
.langlist-tiny {
margin: 0.5em 3em 3em 3em;
}
.langlist-others {
margin: 0 3em 2em 3em;
font-weight: bold;
} */
.otherprojects {
white-space: nowrap;
overflow:hidden;
font-weight: bold;
margin: 0;
padding: 0.6em 0.5em 0.5em 0.5em;
vertical-align: middle;
width: 100%;
background: #2D2D2D;
color: white;
border: gray thin solid;
}
.otherprojects a {
color: #bbb;
padding: 0.3em;
}
.otherprojects table {
height: auto;
width: 100%;
border-style: none;
}
.wm-site-info {
clear: both;
margin: 3.5em 4em 0.5em 4em;
text-align: right;
}
/******************
* Print stylesheet
*/
@media print {
body {
background-color: transparent;
}
a {
color: black !important;
background: none !important;
padding: 0 !important;
}
a:link,
a:visited {
color: #520;
background: transparent;
}
img {
border: none;
}
}
.central-featured-logo {
background-image: url('//upload.wikimedia.org/wikipedia/commons/b/b7/Wikivoyage-Logo-v3-en-highlight.png');
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('//upload.wikimedia.org/wikipedia/commons/d/d1/Wikivoyage-Logo-v3-en.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('//upload.wikimedia.org/wikipedia/commons/d/d1/Wikivoyage-Logo-v3-en.svg');
background-position: center center;
background-repeat: no-repeat;
width:100%;
height:100%;
left:0;
top:0;
}
/****************
* Mobile specific media queries
*/
@media all and (max-width:480px) {
.otherprojects {
display: none;
}
.central-featured {
width: auto;
height: auto;
padding-top: 4em;
text-align: left;
font-size: 0.8em;
margin-top: 8em;
}
.central-featured-logo {
position: absolute;
right: 0;
left: 12%;
top: -5em;
width: 130px;
height: 130px;
background-size: 130px auto;
}
.central-featured-lang {
right: auto;
top: auto;
position: relative;
left: auto;
text-align: left;
margin-left: 1em;
display: block;
float: left;
width: 45%;
}
.search-container {
white-space: nowrap;
left: 8px;
top: 4px;
text-align: center;
position: absolute;
}
.search-form #searchInput {
max-width: 8em;
}
.langlist {
font-size: 1.1em;
margin: 0.7em;
text-align: left;
width: auto;
}
}
@media all and (max-width:240px) {
.central-featured-lang {
width: 100%;
}
}
</style>
</head>
<body id="www-wikivoyage-org">
<!-- Other Projects -->
<div class="otherprojects">
<table>
<tr>
<td><a href="//www.wikipedia.org/" title="The encyclopedia anyone can edit">Wikipedia</a></td>
<td><a href="//www.wiktionary.org/" title="The dictionary you can edit">Wiktionary</a></td>
<td><a href="//www.wikinews.org/" title="Collaboratively written news">Wikinews</a></td>
<td><a href="//www.wikiquote.org/" title="Free quotes">Wikiquote</a></td>
<td><a href="//www.wikibooks.org/" title="Collaboratively written books">Wikibooks</a></td>
<td><a href="//www.wikidata.org/" title="Free data">Wikidata</a></td>
<td><a href="//species.wikimedia.org/" title="All about species">Wikispecies</a></td>
<td><a href="//www.wikisource.org/" title="Free library">Wikisource</a></td>
<td><a href="//www.wikiversity.org/" title="To learn">Wikiversity</a></td>
<td><a href="//commons.wikimedia.org/" title="Free image & media repository">Commons</a></td>
<td><a href="//www.mediawiki.org/" title="About our wiki software">MediaWiki</a></td>
<td><a href="//meta.wikimedia.org/" title="Wikimedia project coordination">Meta-Wiki</a></td>
</tr>
</table>
</div>
<br>
<div class="central-featured"><!-- Central Featured: container div for the central logo and the links to the largest language editions -->
<!-- Logo -->
<div class="central-featured-logo"></div>
<!-- Languages -->
{{topn|10|views}}
</div><!-- end Central Featured -->
<!-- Search form -->
<div class="search-container">
<form class="search-form" action="//www.wikipedia.org/search-redirect.php">
<fieldset>
<input type="hidden" name="family" value="wikivoyage">
<input id="searchInput" name="search" size="20" autofocus="autofocus" accesskey="F" dir="auto">
<button class="formBtn" type="submit" name="button" title="Search Wikivoyage" id="searchButton">
<img src="//upload.wikimedia.org/wikipedia/meta/thumb/8/86/Search-icon-white.png/16px-Search-icon-white.png" alt="Search" width="16" height="16">
</button>
<select id="searchLanguage" name="language">
{{wikis|option|≥100}}
</select>
<input type="hidden" value="Go" name="go">
</fieldset>
</form>
</div>
<!-- More languages -->
<div class="langlist hlist">
{{morewikis|ul|≥100}}
</div>
<!-- Credit & Disclaimers -->
<div class="wm-site-info">
<a href="//wikimediafoundation.org/" title="A Wikimedia Project"><img src="//upload.wikimedia.org/wikipedia/meta/b/bd/Wikimedia-button-transparent.png" width="88" height="31" alt="Wikimedia" title="A Wikimedia Project"></a><br>
<a href="//meta.wikimedia.org/wiki/www.wikivoyage.org/Photo_credit">photo credit</a> |
<a href="//wikimediafoundation.org/wiki/Privacy_policy">privacy policy</a> |
<a href="//wikimediafoundation.org/wiki/Terms_of_Use">terms of use</a>
</div>
</body>
</html>