<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixelated Style Guide</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/opensans.css" rel="stylesheet" type="text/css">
<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/>
<link href="css/style-guide.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
	<div id="style-guide-wrap" data-offcanvas>
		<nav class="top-bar" data-topbar>
		    <ul class="left">
		      <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li>
		    </ul>

		    <ul class="right">
		      <li><a href="#welcome">Home</a></li>
		      <li><a href="#colors">Colors</a></li>
		      <li><a href="#typography">Typography</a></li>
		      <li><a href="#icons">Icons</a></li>
		    </ul>
		</nav>
		<section id="welcome" class="guide-section" name="welcome">
			<h2>Welcome to the Pixelated Style Guide</h2>
			<p>
			Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components. 
			</p>
			<p>
			This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves.
			</p>
			<img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" />
		</section>
		<section id="colors" class="guide-section">
			<h2>Color Palette</h2>
			</br>
			<div class="color-grid">
				<div id="primary-color-card" class="color-card">
					<p class="color-label">
						<span class="color-name">PRIMARY COLOR</span>
						<br>#EF4E2F
					</p>
				</div>
				<div id="secondary-color-card" class="color-card">
					<p class="color-label">
						<span class="color-name">SECONDARY COLOR</span>
						<br>#3E3A37
					</p>
				</div>
				<div id="top-pane-card" class="color-card">
					<p class="color-label">
						<span class="color-name">TOP PANE</span>
						<br>#EAEAEA
					</p>
				</div>
				<div id="contrast-card" class="color-card">
					<p class="color-label">
						<span class="color-name">CONTRAST</span>
						<br>#F2F3ED
					</p>
				</div>
				<div id="action-buttons-card" class="color-card">
					<p class="color-label">
						<span class="color-name">ACTION BUTTONS</span>
						<br>#2ba6cb
					</p>
				</div>
			</div>
			<br>

			<div class="color-grid">
				<div id="success-card" class="color-card">
					<p class="color-label">
						<span class="color-name">SUCCESS</span>
						<br>#2DAB49
					</p>
				</div>
				<div id="attention-card" class="color-card">
					<p class="color-label">
						<span class="color-name">ATTENTION</span>
						<br>#F6A40A
					</p>
				</div>
				<div id="warning-card" class="color-card">
					<p class="color-label">
						<span class="color-name">WARNING</span>
						<br>#F7E8AF
					</p>
				</div>
				<div id="error-card" class="color-card">
						<p class="color-label">
							<span class="color-name">ERROR</span>
							<br>#D72A25
						</p>
				</div>
				<div id="search-highlight-card" class="color-card">
					<p class="color-label">
						<span class="color-name">SEARCH HIGHLIGHT</span>
						<br>#FFEF29
					</p>
				</div>
				<div id="count-background-card" class="color-card">
					<p class="color-label">
						<span class="color-name">COUNT BACKGROUND</span>
						<br>#C0B9B9
					</p>
				</div>
			</div>
		</section>
		<section id="typography" class="guide-section">
			<h2>Typography</h2>

			</br>
			Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson.
			</br>
			<ul class="typography">
				<li>
					<h2>Aa</h2>
					<span>Regular</span>
				</li>
				<li>
					<h2 class="bold-header">Aa</h2>
					<span>Bold</span>
				</li>
				<li>
					<h2 class="extra-bold-header">Aa</h2>
					<span>Extra Bold</span>
				</li>
				<li>
					<h2 class="lighter-header">Aa</h2>
					<span>Lighter</span>
				</li>
			</ul>
			<ul class="headers-and-sizes">
				<li>
					<h1>Header 1</h1>
				</li>
				<li>
					<h2>Header 2</h2>
				</li>
				<li>
					<h3>Header 3</h3>
				</li>
				<li>
					<h4>Header 4</h4>
				</li>
				<li>
					<h5>Header 5</h5>
				</li>
				<li>
					<h6>Header 6</h6>
				</li>
				<li>
					<i>Italics</i><br>
				</li>
				<li>
					<strong>Strong / Emphasized</strong><br>
				</li>
				<li>
					<small>Small Text</small>
				</li>
			</ul>
		</section>
		<section id="icons" class="guide-section" name="icons">
			<h2>Icons</h2>
			<p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a>
			<p>Here are some of the icons we're currently using on Pixelated</p>
			<i class="fa fa-inbox"></i>
			<i class="fa fa-send"></i>
			<i class="fa fa-pencil"></i>
			<i class="fa fa-trash-o"></i>
			<i class="fa fa-archive"></i>
			<i class="fa fa-tags"></i>
			<i class="fa fa-navicon"></i>
			<i class="fa fa-refresh"></i>
		</section>
	</div>

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/js/style_guide/main.js"></script>
</body>
</html>