forked from mapbox/maki
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (147 loc) · 6.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
---
title: maki
layout: default
---
<link rel='stylesheet' href='{{site.baseurl}}/site.css' type='text/css'/>
<link rel='stylesheet' href='{{site.baseurl}}/maki-sprite.css' type='text/css'/>
<div id='maki'>
<div id='maki-hero'>
<div class='limiter clearfix content'>
<div class='col-1 bordered-centered'>
<h1><a href='{{site.url}}/maki' class='icon maki'>Maki Icons</a></h1>
<a href='{{site.baseurl}}/maki-icon-source/maki.zip' class='download'>
<span class='fr icon download'> </span>
<span class='filename'>Maki.zip</span><br />
<small>225kb</small>
</a>
</div>
<div class='col-3'>
<h2 class='tagline'>A clean point of interest icon set made for web cartography.</h2>
</div>
</div>
</div>
<!-- /#maki-hero-->
<div id='maki-subtitle'>
<div class='limiter clip'>
<script type='text-template' id='count'>
<strong><%= setcount %></strong> different symbols at <strong>3</strong> sizes each. <strong><%= totalcount %></strong> total icons and growing.
</script>
Maki includes <span class='count'></span>
</div>
</div>
<div class='canvas'>
<div class='limiter clearfix content'>
<script type='text/template' id='icon-collection'>
<ul class='icon-set clearfix'>
<li class='icon <%= icon%>'>Icon</li>
<li class='title-box'><%= title%><small><%= icon %></small></li>
</ul>
</script>
<div id='maki-set' class='clearfix'></div>
<script type='text/template' id='search-icons'>
<li>
<ul class='icon-set clearfix'>
<li class='icon <%=icon %>'><%=name %> icon</li>
</ul><span class='title-box'><%=name %><small><%= icon %></small></span>
</li>
</script>
<div id='search-results' class='limiter title clearfix'>
<a href='#' class='icon close' title='Press ESC to close'>X</a>
<div class='empty active'>No results found.</div>
<ul id='results'></ul>
<a href='{{site.baseurl}}/maki-icon-source/maki.zip' class='search-download'>Download maki.zip</a>
</div>
<div class='canvas-controls'>
<form id='search'>
<input type='text' placeholder='e.g Golf or Bank'>
</form>
</div>
</div>
</div>
<div class='overview'>
<div class='limiter clip'>
<div class='content prose clearfix'>
<div class='clearfix maki-details'>
<div class='col maki-thesis'>
<h2>Designed pixel-by-pixel to look great at small sizes but scale up elegantly.</h2>
<p>We designed Maki with the goal of creating an international, comprehensive, and stylistically unified point of interest icon set. In order to maximize crispness and clarity, we've made three size variations of each symbol. Use all three sizes to scale the icons with the map as you zoom in and out.</p>
</div>
<div id='maki-icon-preview' class='col'>
<ul>
<li><a href='#size-24' class='size-24 active'><span class="icon size-24">24px</span></a></li>
<li><a href='#size-18' class='size-18'><span class="icon size-18">18px</span></a></li>
<li><a href='#size-12' class='size-12'><span class="icon size-12">12px</span></a></li>
</ul>
<div class='preview-screen'>
<img style='display: block;' class='size-24 active' src='{{site.baseurl}}/images/maki-preview-24.png' alt='' />
<img style='display: none;' class='size-18' src='{{site.baseurl}}/images/maki-preview-18.png' alt='' />
<img style='display: none;' class='size-12' src='{{site.baseurl}}/images/maki-preview-12.png' alt='' />
</div>
</div>
</div>
<div id='map'>
<div id='controls'></div>
</div>
<div class='clearfix'>
<div class='col-1'>
<div class='box tall'>
<img src='{{site.baseurl}}/images/maki-universal.png' alt='' />
<h3>Universal</h3>
<p>Before beginning each icon, we look for a common symbol that has recognition across cultures.</p>
</div>
</div>
<div class='col-1'>
<div class='box tall'>
<img src='{{site.baseurl}}/images/maki-madeformapping.png' alt='' />
<h3>Made for Mapping</h3>
<p>Size and simplicity are the top design priorities for Maki, so the icons will look clear but won't crowd your map.</p>
</div>
</div>
<div class='col-1'>
<div class='box tall'>
<img src='{{site.baseurl}}/images/maki-legible.png' alt='' />
<h3>Legible</h3>
<p>All the icons include a subtle border so they stand out against complex or dark backgrounds.</p>
</div>
</div>
<div class='col-1'>
<div class='box tall'>
<img src='{{site.baseurl}}/images/maki-opensource.png' alt='' />
<h3>Open Source</h3>
<p><a href='https://github.com/mapbox/maki'>Visit the GitHub repository</a> to fork, contribute, and provide feedback on Maki.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='limiter clip'>
<div class='content prose clearfix'>
<div class='clearfix'>
<div class='col-2'>
<h3>Need help using Maki?</h3>
<div class='helpnav clearfix'>
<a href='http://mapbox.com/tilemill/docs/guides/using-maki-icons/'>Using Maki in TileMill</a>
<a href='http://mapbox.com/tilemill/docs/guides/adding-colors-to-maki-icons/'>Recoloring Maki icons</a>
</div>
</div>
<div class='col-2'>
<h3>Download now</h3>
<a href='{{site.baseurl}}/maki-icon-source/maki.zip' class='footerdownload clearfix'>
<div class='download'>
<span class='fr icon download'> </span>
<span class='filename'>Maki.zip</span><br />
<small>225kb</small>
</div>
<div class="description">Includes .PNG icons and the .SVG source</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='{{site.baseurl}}/wax/modestmaps.min.js'></script>
<script src='{{site.baseurl}}/wax/wax.mm.min.js'></script>
<script src='{{site.baseurl}}/wax/deadsea.min.js'></script>
<script src='{{site.baseurl}}/site.js'></script>