From 71a5e148996720271d2e607cd786194e79942b80 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Thu, 21 Aug 2014 12:42:04 -0300
Subject: Adding link to top on logo and headers and sizes

---
 web-ui/app/scss/style-guide.scss | 17 +++++++++++++----
 web-ui/app/style-guide.html      | 23 ++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index d0ecd3aa..c9791ea3 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -16,6 +16,10 @@ nav {
   opacity: 0.95;
 }
 
+a.logo-anchor {
+  color: white;
+}
+
 ul li {
   display: inline;
 }
@@ -87,11 +91,11 @@ section.guide-section {
 
 .color-grid {
   #primary-color-card { background-color: $primary_color; }
-  #secondary-color-card { background-color: $secondary;}
-  #top-pane-card { background-color: $top_pane;}
-  #contrast-card { background-color: $contrast;}
+  #secondary-color-card { background-color: $secondary; }
+  #top-pane-card { background-color: $top_pane; }
+  #contrast-card { background-color: $contrast; }
   #action-buttons-card { background-color: $action_buttons; }
-  #success-card { background-color: $success;}
+  #success-card { background-color: $success; }
   #attention-card { background-color: $attention; }
   #warning-card { background-color: $warning; }
   #error-card { background-color: $error; }
@@ -103,4 +107,9 @@ ul.typography li h2 {
   &.bold-header { font-weight: bold; }
   &.extra-bold-header { font-weight: 800; }
   &.lighter-header { font-weight: lighter; }
+}
+
+ul.headers-and-sizes {
+  margin: 32px 100px 0 0;
+  display: inline-block;
 }
\ No newline at end of file
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index ee6b89fd..adf72bfe 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -16,7 +16,7 @@
 	<div id="style-guide-wrap" data-offcanvas>
 		<nav class="top-bar" data-topbar>
 		    <ul class="left">
-		      <li><span>Pixelated Style Guide</span></li>
+		      <li><a class="logo-anchor" href="#guidelines">Pixelated Style Guide</a></li>
 		    </ul>
 
 		    <ul class="right">
@@ -142,6 +142,27 @@
 					<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>
+			</ul>
 		</section>
 		<section id="components" class="guide-section" name="components">
 			<h2>Components</h2>
-- 
cgit v1.2.3