@situs-include(./layouts/header.html)
@situs-data({
    "title": "Customize Your Icons Set - Marka"
})

		<div id="custom" class="page">
			<div id="generate" class="hide">Generating your file...</div>
			<div class="nav">
				<h1><a href="./getting-started.html">Marka</a></h1>
				<p>Beautiful transformable icons <br> built for the web.</p>
				<p>(v0.3.1)</p>

				<div class="compile">
					<h4><span id="iconsCount">No icon</span> selected</h4>
					<h4><a id="download" class="button">Download</a></h4>
				</div>
			</div>
			<div class="content">

				<h1>Customize</h1>
				<p>
					All Marka icons make your site heavy to load? 
					Don't worry. You can customize Marka.css and download the icons based on your needs. Let's choose the icons!
				</p>

				<h2>Shape</h2>

				<div class="iconList">
					<div class="item" data-type="circle">
						<i class="icons"></i>
						Circle
					</div>
					<div class="item" data-type="square">
						<i class="icons"></i>
						Square
					</div>
					<div class="item" data-type="triangle">
						<i class="icons"></i>
						Triangle
					</div>
				</div>
				<div class="clear"></div>

				<h2>Sign & Form</h2>
				<div class="iconList">
					<div class="item" data-type="minus">
						<i class="icons"></i>
						Minus
					</div>
					<div class="item" data-type="plus">
						<i class="icons"></i>
						Plus
					</div>
					<div class="item" data-type="times">
						<i class="icons"></i>
						Times
					</div>
					<div class="item" data-type="check">
						<i class="icons"></i>
						Check
					</div>
					<div class="item" data-type="asterisk">
						<i class="icons"></i>
						Asterisk
					</div>

					<div class="clear"></div>

					<div class="item" data-type="circle-minus">
						<i class="icons"></i>
						Circle Minus
					</div>
					<div class="item" data-type="circle-plus">
						<i class="icons"></i>
						Circle Plus
					</div>
					<div class="item" data-type="circle-times">
						<i class="icons"></i>
						Circle Times
					</div>

					<div class="clear"></div>

					<div class="item" data-type="circle-o-minus">
						<i class="icons"></i>
						Circle-O Minus
					</div>
					<div class="item" data-type="circle-o-plus">
						<i class="icons"></i>
						Circle-O Plus
					</div>
					<div class="item" data-type="circle-o-times">
						<i class="icons"></i>
						Circle-O Times
					</div>

					<div class="clear"></div>

					<div class="item" data-type="square-minus">
						<i class="icons"></i>
						Square Minus
					</div>
					<div class="item" data-type="square-plus">
						<i class="icons"></i>
						Square Plus
					</div>
					<div class="item" data-type="square-times">
						<i class="icons"></i>
						Square Times
					</div>
					<div class="item" data-type="square-check">
						<i class="icons"></i>
						Square Check
					</div>

					<div class="clear"></div>

					<div class="item" data-type="square-o-minus">
						<i class="icons"></i>
						Square-O Minus
					</div>
					<div class="item" data-type="square-o-plus">
						<i class="icons"></i>
						Square-O Plus
					</div>
					<div class="item" data-type="square-o-times">
						<i class="icons"></i>
						Square-O Times
					</div>
					<div class="item" data-type="square-o-check">
						<i class="icons"></i>
						Square-O Check
					</div>

					<div class="clear"></div>

					<div class="item" data-type="circle-o">
						<i class="icons"></i>
						Circle-O
					</div>
					<div class="item" data-type="circle-o-filled">
						<i class="icons"></i>
						Circle-O (filled)
					</div>
					<div class="item" data-type="square-o">
						<i class="icons"></i>
						Square-O
					</div>
					<div class="item" data-type="square-o-filled">
						<i class="icons"></i>
						Square-O (filled)
					</div>

				</div>
				<div class="clear"></div>

				<h2>Application</h2>
				<div class="iconList">
					<div class="item" data-type="sort">
						<i class="icons"></i>
						Sort
					</div>
					<div class="item" data-type="sort-half">
						<i class="icons"></i>
						Sort Half
					</div>
					<div class="item" data-type="signal-three">
						<i class="icons"></i>
						Signal 3 Bars
					</div>
					<div class="item" data-type="signal-five">
						<i class="icons"></i>
						Signal 5 Bars
					</div>
				</div>
				<div class="clear"></div>

				<h2>Audio</h2>
				<div class="iconList">
					<div class="item" data-type="pause">
						<i class="icons"></i>
						Pause
					</div>
				</div>
				<div class="clear"></div>

				<h2>Navigation</h2>
				<div class="iconList">
					<div class="item" data-type="angle">
						<i class="icons"></i>
						Angle
					</div>
					<div class="item" data-type="angle-double">
						<i class="icons"></i>
						Double Angles
					</div>
					<div class="item" data-type="arrow">
						<i class="icons"></i>
						Arrow
					</div>
					<div class="item" data-type="bars">
						<i class="icons"></i>
						Bars
					</div>
					<div class="item" data-type="chevron">
						<i class="icons"></i>
						Chevron
					</div>
				</div>
				<div class="clear"></div>

				<div id="compilePopup" class="hide">
					<div class="wrapper"></div>
					<div class="box">
						<div class="header">
							<h2>CSS</h2>
							<div class="option">
								<a class="button selected choose" data-type="normal">Normal</a>
								<a class="button choose" data-type="minified">Minified</a>
							</div>
						</div>
						<textarea class="text normal"></textarea>
						<textarea class="text minified hide"></textarea>
						<p class="text-center">
							<a class="button close">Close</a>
						</p>
					</div>
				</div>

				<div class="footer">
					2014 &copy; <a href="http://fian.my.id/">Alfiana E. Sibuea</a>. All right reserved.
				</div>
			</div>
		</div>

		<script type="text/javascript" src="./static/marka/js/marka.js"></script>
		<script type="text/javascript" src="./static/js/cssmin.js"></script>
		<script type="text/javascript" src="./static/js/jquery.min.js"></script>
		<script type="text/javascript" src="./static/js/customize.js"></script>

	</body>
</html>