cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

website design update

Browse Source
This commit is contained in:
mourner 2011-04-06 17:47:11 +03:00
parent 7877a565ea
commit 8c3b7b77cc
4 changed files with 90 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/css/screen.css
View File

@ -20,8 +20,10 @@ h1 {
} }
h2 { h2 {
margin-top: 2.5em; margin-top: 2.5em;
padding: 0.3em 0.5em 0.2em; padding: 0.3em 20px 0.2em;
background: #eee; margin-left: -20px;
margin-right: -12px;
background: #edeeef;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -46,8 +48,8 @@ h4 {
margin-right: 160px; margin-right: 160px;
}*/ }*/
.alt { .alt {
color: #666; color: #999;
font-family: /*"Warnock Pro", "Goudy Old Style",*/"Palatino","Book Antiqua", Georgia, serif; font-family: Georgia, serif;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
@ -61,18 +63,64 @@ h4 {
} }
.nav { .nav {
margin-left: -5px; list-style: none;
line-height: 1em; padding: 0;
font-size: 1.2em;
margin-left: -15px;
margin-right: -15px;
margin-top: 2em;
margin-bottom: 2em;
border: 1px solid #dcddde;
overflow: hidden;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.3, white),color-stop(1, #eff0f1));
border-radius: 15px;
box-shadow: 0 0 8px #eee;
} }
.nav a, .nav span { .nav a {
margin: 0 5px; text-decoration: none;
color: #555657;
}
.nav li span {
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.3, #f8f9fa),color-stop(1, #d4d5d6));
color: #333;
}
.nav li a:hover {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.4, #f6f7f8),color-stop(1, #eff0f1));
color: black;
}
.nav li a, .nav li span {
float: left;
display: inline;
padding: 10px 15px;
border-right: 1px solid #ddd;
} }
.nav span a { .nav li a.github-link,
.nav li a.twitter-link {
padding-left: 35px;
font-weight: normal;
float: right;
border-right: none;
border-left: 1px solid #ddd;
}
.nav li a.cloudmade-link {
padding: 4px 8px;
opacity: 0.7;
}
.nav li a.cloudmade-link img {
margin: 0; margin: 0;
display: block;
} }
.nav li a.github-link {
background: url(https://github.com/favicon.png) 15px center no-repeat;
}
.nav li a.twitter-link {
background: url(http://twitter.com/phoenix/favicon.ico) 15px center no-repeat;
}
table { border-collapse: collapse; } table { border-collapse: collapse; }
th { background:#e5ecf9; } th { background:/*#e5ecf9;*/ #f3f3f3; }
th, td { th, td {
padding: 4px 5px; padding: 4px 5px;
@ -83,15 +131,10 @@ th, td {
top: 0; top: 0;
right: 0; right: 0;
border: 0; border: 0;
opacity: 0.4;
} }
a:hover #forkme {
a.github-link { opacity: 1;
background: url(https://github.com/favicon.png) left center no-repeat;
padding-left: 20px;
}
a.twitter-link {
background: url(http://twitter.com/phoenix/favicon.ico) left center no-repeat;
padding-left: 20px;
} }
.javascript .keyword { .javascript .keyword {

20
features.html
View File

@ -27,17 +27,15 @@
<h1>Leaflet</h1> <h1>Leaflet</h1>
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3> <h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
<hr /> <ul class="nav clearfix">
<p class="nav large quiet"> <li><a href="index.html">Home</a></li>
<a href="index.html">Home</a> | <li><span>Features</span></li>
<span>Features</span> | <li><a href="reference.html">Documentation</a></li>
<a href="reference.html">Documentation</a> | <li><a href="#">Examples</a></li>
<a href="#">Examples</a> | <li><a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a></li>
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> | <li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
<a class="github-link" href="http://github.com/CloudMade/Leaflet">Source on GitHub</a> | <li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
<a class="twitter-link" href="http://twitter.com/LeafletJS">Follow on Twitter</a> </ul>
</p>
<hr />
<h3>Leaflet features</h3> <h3>Leaflet features</h3>

24
index.html
View File

@ -27,17 +27,16 @@
<h1>Leaflet</h1> <h1>Leaflet</h1>
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3> <h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
<hr /> <ul class="nav clearfix">
<p class="nav large quiet"> <!-- <li><a class="cloudmade-link" href="http://cloudmade.com"><img src="http://cloudmade.com/images/layout/cloudmade-logo.png" width="32" /></a></li> -->
<span>Home</span> | <li><span>Home</span></li>
<a href="features.html">Features</a> | <li><a href="features.html">Features</a></li>
<a href="reference.html">Documentation</a> | <li><a href="reference.html">Documentation</a></li>
<a href="#">Examples</a> | <li><a href="#">Examples</a></li>
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> | <li><a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a></li>
<a class="github-link" href="http://github.com/CloudMade/Leaflet">Source on GitHub</a> | <li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
<a class="twitter-link" href="http://twitter.com/LeafletJS">Follow on Twitter</a> <li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
</p> </ul>
<hr />
<h3>About the library</h3> <h3>About the library</h3>
<p>Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for <em>both desktop and mobile</em> web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API.</p> <p>Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for <em>both desktop and mobile</em> web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API.</p>
@ -50,8 +49,6 @@
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcloudmade.github.com%2FLeaflet%2F&amp;layout=standard&amp;show_faces=false&amp;width=660&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcloudmade.github.com%2FLeaflet%2F&amp;layout=standard&amp;show_faces=false&amp;width=660&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
</p> </p>
<hr />
<h3>Basic usage example</h3> <h3>Basic usage example</h3>
<div id="map"></div> <div id="map"></div>
<script> <script>
@ -85,7 +82,6 @@ map.addLayer(marker);
marker.bindPopup("A pretty CSS3 popup.&lt;br /&gt;Easily customizable.").openPopup();</code></pre> marker.bindPopup("A pretty CSS3 popup.&lt;br /&gt;Easily customizable.").openPopup();</code></pre>
<hr /> <hr />
<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p> <p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
</div> </div>

21
reference.html
View File

@ -25,17 +25,15 @@
<h1>Leaflet</h1> <h1>Leaflet</h1>
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3> <h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
<hr /> <ul class="nav clearfix">
<p class="nav large quiet"> <li><a href="index.html">Home</a></li>
<a href="index.html">Home</a> | <li><a href="features.html">Features</a></li>
<a href="features.html">Features</a> | <li><span>Documentation</span></li>
<span>Documentation</span> | <li><a href="#">Examples</a></li>
<a href="#">Examples</a> | <li><a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a></li>
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> | <li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
<a class="github-link" href="http://github.com/CloudMade/Leaflet">Source on GitHub</a> | <li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
<a class="twitter-link" href="http://twitter.com/LeafletJS">Follow on Twitter</a> </ul>
</p>
<hr />
<div id="toc" class="clearfix"> <div id="toc" class="clearfix">
<div class="span-5 colborder"> <div class="span-5 colborder">
@ -118,7 +116,6 @@
</ul> </ul>
</div> </div>
</div> </div>
<hr />
<h2 id="map-class">L.Map</h2> <h2 id="map-class">L.Map</h2>