Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Col adjustments icon preview box and icons

  • Loading branch information...
commit 98e8eaf7335cfdeecb737bfa8ee45f9df251a703 1 parent 7a7f7d3
@tristen tristen authored
Showing with 85 additions and 56 deletions.
  1. +52 −49 index.html
  2. +32 −6 site.css
  3. +1 −1  site.js
View
101 index.html
@@ -23,8 +23,9 @@ <h1 class='icon maki'>Maki Icons</h1>
<div class='col-3'>
<h2 class='tagline'>An unobtrusive point of interest icon set made especially for MapBox.</h2>
</div>
- </div> <!-- /.limiter-->
- </div> <!-- /.maki-branding-->
+ </div>
+ </div> <!-- /#maki-hero-->
+
<div class='canvas'>
<div class='limiter clearfix content'>
<h3 class='title'>68 different symbols at 3 sizes each. 204 total icons and growing.</h3>
@@ -34,59 +35,61 @@ <h3 class='title'>68 different symbols at 3 sizes each. 204 total icons and grow
</form>
</div>
</div>
- </div>
+ </div> <!-- /.canvasi--->
- <div class='limiter clip'><div class='content prose clearfix'>
- <div id='map'>
- <h3 class='title'>Uniquely crafted to make your TileMill maps beautiful and meaningful.</h3>
- </div>
- <div class='clearfix'>
- <div class='col maki-thesis'>
- <h3>Designed pixel-by-pixel to look great at small sizes but scale up elegantly</h3>
- <p>We designed Maki specifically for TileMill with goal of creating an international, comprehensive, and stylistically unified point of interest icon set. Each symbol is drawn three times at different sizes to maximize crispness and readability. Maki symbols are based on international recognized symbols, following precedents set by AIGA and other international symbol systems, but preserving a unique look at feel.</p>
- <p>Use Maki for everything from adding context to the base map of your mobile app to highlighting critical data on your disaster map.</p>
+ <div class='limiter clip'>
+ <div class='content prose clearfix'>
+ <div id='map'>
+ <h3 class='title'>Uniquely crafted to make your TileMill maps beautiful and meaningful.</h3>
</div>
- <div class='col maki-icon-preview'>
- <div class='preview-screen'>
+ <div class='clearfix'>
+ <div class='col maki-thesis'>
+ <h3>Designed pixel-by-pixel to look great at small sizes but scale up elegantly</h3>
+ <p>We designed Maki specifically for TileMill with goal of creating an international, comprehensive, and stylistically unified point of interest icon set. Each symbol is drawn three times at different sizes to maximize crispness and readability. Maki symbols are based on international recognized symbols, following precedents set by <a href='http://www.aiga.org/symbol-signs'>AIGA</a> and other international symbol systems, but preserving a unique look at feel.</p>
+ <p>Use Maki for everything from adding context to the base map of your mobile app to highlighting critical data on your disaster map.</p>
+ </div>
+ <div class='col maki-icon-preview'>
+ <div class='preview-screen'>
+ </div>
+ <ul>
+ <li><a href='#' class='icon size-24'>24px</a></li>
+ <li><a href='#' class='icon size-18'>18px</a></li>
+ <li><a href='#' class='icon size-12'>12px</a></li>
+ </ul>
</div>
- <ul>
- <li><a href='#' class='icon size-24'>24px</a></li>
- <li><a href='#' class='icon size-18'>18px</a></li>
- <li><a href='#' class='icon size-12'>12px</a></li>
- </ul>
- </div>
- </div>
- <hr />
- <div class='clearfix'>
- <div class='col-2'>
- <img src='{{site.baseurl}}/images/maki-illustration-1.png' alt='' />
- <h3>Maki and MapBox give you more control</h3>
- <p>Maki icons are easy to use with MapBox. Just reference the icons in TileMill with Carto to include exactly as little or as much context as you want in your map. For detailed instructions, <a href='#'>check out the documentation.</a></p>
- </div>
- <div class='col-2'>
- <img src='{{site.baseurl}}/images/maki-illustration-2.png' alt='' />
- <h3>Open source and actively developed</h3>
- <p>Maki icons are licensed under BSD, which means you're free to use, modify, and share these icons. If you'd like to make requests or suggest changes, <a href='#'>create an issue on Github</a> or <a href='#'>send us an E-mail.</a></p>
- <p>View the public repository at <a href='github.com/mapbox/maki'>github.com/mapbox/maki</a></p>
</div>
- </div>
- <hr />
- <div class='clearfix'>
- <div class='col-2'>
- <a href='#' class='download clearfix'>
- <span class='fr icon download'>&nbsp;</span>
- <span class='title'>Download Complete Icon Set</span><br />
- <span class='filename'>maki.zip</span>
- </a>
+ <hr />
+ <div class='clearfix'>
+ <div class='col-2'>
+ <img src='{{site.baseurl}}/images/maki-illustration-1.png' alt='' />
+ <h3>Maki and MapBox give you more control</h3>
+ <p>Maki icons are easy to use with MapBox. Just reference the icons in TileMill with Carto to include exactly as little or as much context as you want in your map. For detailed instructions, <a href='#'>check out the documentation.</a></p>
+ </div>
+ <div class='col-2'>
+ <img src='{{site.baseurl}}/images/maki-illustration-2.png' alt='' />
+ <h3>Open source and actively developed</h3>
+ <p>Maki icons are licensed under BSD, which means you're free to use, modify, and share these icons. If you'd like to make requests or suggest changes, <a href='#'>create an issue on Github</a> or <a href='#'>send us an E-mail.</a></p>
+ <p>View the public repository at <a href='github.com/mapbox/maki'>github.com/mapbox/maki</a></p>
+ </div>
</div>
- <div class='col-2 includes'>
- <strong>Includes:</strong>
- <ul>
- <li><strong>204</strong> total icons and growing</li>
- <li><strong>24px/18px/12px</strong> .png and the .svg source</li>
- </ul>
+ <hr />
+ <div class='clearfix'>
+ <div class='col-2'>
+ <a href='#' class='download clearfix'>
+ <span class='fr icon download'>&nbsp;</span>
+ <span class='title'>Download Complete Icon Set</span><br />
+ <span class='filename'>maki.zip</span>
+ </a>
+ </div>
+ <div class='col-2 includes'>
+ <strong>Includes:</strong>
+ <ul>
+ <li><strong>204</strong> total icons and growing</li>
+ <li><strong>24px/18px/12px</strong> .png and the .svg source</li>
+ </ul>
+ </div>
</div>
</div>
</div>
-</div></div>
+</div>
View
38 site.css
@@ -120,6 +120,7 @@ a.download span.download {
#maki .canvas .limiter {
position: relative;
height: 421px;
+ width: 920px;
}
.canvas-controls {
position: absolute;
@@ -181,18 +182,43 @@ a.zoomer {
}
.col.maki-thesis {
- width: 580px;
- margin-right: 20px;
+ width: 560px;
+ margin-right: 40px;
+ margin-left: 20px;
}
.col.maki-icon-preview {
- width: 240px;
- margin-left: 40px;
+ width: 280px;
+ margin-left: 0;
+ margin-right: 0;
}
.preview-screen {
- background: #afc975 url(images/bg.png) repeat 0 0;;
+ background: #AFC975;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
- width: 280px;
+ width: 210px;
height: 210px;
+ margin: auto;
}
+ .maki-icon-preview ul {
+ width: 105px;
+ margin: 20px auto;
+ }
+ .maki-icon-preview ul li {
+ float: left;
+ margin-right: 5px;
+ margin-left: 0;
+ }
+ .maki-icon-preview ul li a {
+ background: #afc975;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ display: block;
+ width: 30px;
+ height: 30px;
+ }
+ .maki-icon-preview ul li a.active,
+ .maki-icon-preview ul li a:active {
+ background-color: #839065;
+ }
View
2  site.js
@@ -11,7 +11,7 @@ wax.tilejson(url, function(tilejson) {
]
);
- m.setCenterZoom(new mm.Location(38.9005,-77.0255), 16);
+ m.setCenterZoom(new mm.Location(38.9010,-77.0250), 16);
wax.mm.zoomer(m).appendTo(m.parent);
wax.mm.interaction(m);
});
Please sign in to comment.
Something went wrong with that request. Please try again.