Permalink
Browse files

added vintage italy showcase

  • Loading branch information...
gka committed Feb 27, 2012
1 parent d125168 commit 436fa21c70ce10d7ee666eedf70aebcc6c7da9fb
Showing with 277 additions and 30 deletions.
  1. +1 −0 .gitignore
  2. +25 −0 _layouts/core.html
  3. +18 −30 _layouts/default.html
  4. +25 −0 css/k.css
  5. BIN img/logotype.png
  6. +4 −0 index.html
  7. +53 −0 showcase/index.html
  8. +46 −0 showcase/italy/index.html
  9. +6 −0 showcase/italy/italy.svg
  10. +99 −0 showcase/italy/style.css
View
@@ -2,3 +2,4 @@ update
update_remote
old/
_site/
+demos/shp/
View
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>{{ page.title }}</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
+ <link rel="stylesheet" href="/css/k.css" type="text/css" />
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="/images/favicon.ico">
+ <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
+ <script type="text/javascript" src="http://assets.kartograph.org/vendor/jquery.min.js"></script>
+</head>
+<body>
+
+ {{ content }}
+
+</body>
+</html>
+
View
@@ -1,30 +1,20 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>{{ page.title }}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
-
- <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
- <link rel="stylesheet" href="css/k.css" type="text/css" />
- <!-- Le fav and touch icons -->
- <link rel="shortcut icon" href="images/favicon.ico">
- <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
- <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
- <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
-</head>
-<body>
-
+---
+layout: core
+---
<div class="container">
<div class="row">
- <div class="span12">
- <h1>Header</h1>
+ <div class="span6 offset6">
+ <ul class="nav nav-tabs">
+ <li>Contact</li>
+ </ul>
</div>
</div>
<div class="row">
- <div class="span9 offset3">
+ <div class="span3 k-about">
+ <a href="/"><img src="/img/logotype.png" alt="Kartograph" /></a>
+ <p class="tagline">A simple and lightweight framework for creating beautiful, interactive vector maps.</p>
+ </div>
+ <div class="span9">
<div class="hero-unit">
<h1>{{ page.headline }}</h1>
<p>{{ page.tagline }}</p>
@@ -34,17 +24,15 @@ <h1>{{ page.headline }}</h1>
<div class="row">
<div class="span3 k-menu">
<ul class="nav nav-tabs nav-stacked">
- <li><a href="index.html">Hello Kartograph</a></li>
- <li><a href="showcase.html">Showcase</a></li>
- <li><a href="http://github.com/kartograph/">Download</a></li>
+ <li><a href="/">Hello Kartograph</a></li>
+ <li><a href="/showcase/">Demonstration</a></li>
+ <li><a href="/tech.html">How does is work?</a></li>
+ <li><a href="http://github.com/kartograph/">Fork on Github</a></li>
+ <li><a href="http://twitter.com/#!/kartographjs/">Say Hi on Twitter</a></li>
</ul>
</div>
<div class="span9">
{{ content }}
</div>
</div>
- </div> <!-- /container -->
-
-</body>
-</html>
-
+ </div>
View
@@ -0,0 +1,25 @@
+.k-about .tagline {
+ font-style: italic;
+ font-size: 14px;
+ margin-left: 55px;
+ color: #888;
+}
+
+.k-menu ul.nav {
+ margin-left: 0;
+}
+
+.k-menu ul.nav li {
+ list-style: none;
+ font-size: 18px;
+ line-height: 20px;
+ margin-bottom: 1em;
+}
+
+.hero-unit h1 {
+ font-weight: 100;
+}
+
+.hero-unit p {
+ margin-left: 0.4em;
+}
View
Binary file not shown.
View
@@ -20,6 +20,10 @@ <h1>What’s in the box?</h1>
<li>Symbol maps</li>
<li>Hell, it even works in Internet Explorer 7 (at least 90%)</li>
</ul>
+ <h2>And what's not in it?</h2>
+ <ul>
+ <li>Sorry, but no tile maps. If you really need street-level details in your map, try <a href="http://leaflet.cloudmade.com">other</a> <a href="http://polymaps.org">great</a> <a href="http://openlayers.org">mapping</a> <a href="http://developers.cartodb.com/">frameworks</a>.</li>
+ </ul>
</div>
</div>
View
@@ -0,0 +1,53 @@
+---
+layout: default
+title: Kartograph
+headline: See it in action
+---
+
+ <ul class="thumbnails">
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/260x180" alt="" />
+ </a>
+ </li>
+ </ul>
View
@@ -0,0 +1,46 @@
+---
+layout: demo
+title: Vintage Map of Italy
+---
+
+<link rel="stylesheet" href="style.css" type="text/css" />
+
+<script>
+ $(function() {
+
+ // import some classes
+ window.map = $K.map('#map');
+
+ var resize = function() {
+ var c = $('#map');
+ var ratio = map.viewAB.width / map.viewAB.height;
+ c.height( c.width() / ratio );
+ map.resize();
+ };
+
+ $(window).resize(resize);
+
+ map.loadMap('italy.svg', function(map) {
+
+ map.addLayer('graticule', 'g1');
+ map.addLayer('land', 'bg');
+ map.addLayer('land', 'bgstroke');
+ map.addLayer('context');
+ map.addLayer('ITA', 'fg');
+
+ map.addFilter('glow', 'glow', { size: 4, color: '#D1BEB0', inner: true });
+ map.applyFilter('bg', 'glow');
+
+ resize();
+
+ }, { padding: -10 });
+
+
+ });
+</script>
+
+
+<div id="map">
+
+</div>
+
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,99 @@
+body,html { background: #fff; height:100%; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0; margin: 0;}
+
+#head {
+ margin: 20px auto 5px;
+ width: 1000px;
+}
+#map {
+ margin: 0 auto 30px;
+ width: 100%;
+ border: 6px solid #D1BEB0;
+ height: 50%;
+ position: relative;
+}
+.city2 .label {
+ font-family: Georgia;
+ font-size: 12px;
+ text-transform: uppercase;
+ font-style: italic;
+ color: #000;
+ opacity: 1;
+ padding-left: 1px;
+ text-shadow: 1px 1px 1px #fff;
+ display: inline;
+}
+.city .label {
+ font-family: Georgia;
+ font-size: 12px;
+ color: #411;
+ opacity: .8;
+ padding-left: 1px;
+ text-shadow: 1px 1px 1px #fff;
+ display: none;
+ background: #fff;
+}
+.city:hover .label {
+ display: inline;
+}
+svg .flight {
+ stroke-width: .4px;
+ stroke: #922;
+}
+svg path { stroke-linejoin: round }
+svg .sea { fill: #fff;stroke-width: .25px; }
+svg .g1 {
+ fill: none;
+ stroke-width: .2px;
+}
+svg .g2 {
+ fill: none;
+ stroke-width: .2px;
+ stroke-opacity: .1;
+}
+svg .bg {
+ stroke: none;
+ fill: #fff;
+ fill-opacity: 0.75;
+}
+svg .bgstroke {
+ stroke: #7C5B27;
+ stroke-width:.7px;
+ fill:none;
+}
+svg .context {
+ stroke: #D1BEB0;
+ stroke-opacity: .3;
+ fill: #D1BEB0;
+ fill-opacity: .2;
+}
+svg .fg {
+ stroke: #cbb;
+ stroke-opacity: 1;
+ stroke-dasharray: 3,5;
+ fill: #fff;
+ fill-opacity: 0;
+}
+svg .polygon.fg:hover {
+ fill: #fca;
+ fill-opacity: .5;
+}
+
+svg .dotMarker {
+ stroke: #330;
+ stroke-opacity: .8;
+ fill: #ff7;
+ fill-opacity: .2;
+}
+svg .dotMarker:hover {
+ stroke: #000;
+ fill: #ff3;
+ fill-opacity: .7;
+}
+#tutorial {
+ margin: 20px auto 30px;
+ width: 1000px;
+ padding: 30px;
+}
+#map svg .sea {
+ background: lightblue;
+}

0 comments on commit 436fa21

Please sign in to comment.