From 27ebf2d416df50513c19d83472e999530c9ce568 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Wed, 20 Aug 2014 17:37:03 -0300
Subject: Adding typography information

---
 web-ui/app/scss/style-guide.scss | 20 +++++++++++++-------
 web-ui/app/style-guide.html      | 29 +++++++++++++++++++----------
 2 files changed, 32 insertions(+), 17 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index 77efdfa8..f1b31ddd 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -18,13 +18,16 @@ nav {
 
 ul li {
   display: inline;
+}
 
-  a {
-    color: $primary_color;
-  }
-  a:hover {
-    color: lighten($primary_color, 15%);
-  }
+ul.typography li {
+  display: inline-block;
+  text-align: center;
+  margin: 20px 10px 0 0;
+  padding: 30px;
+  min-height: 125px;
+  min-width: 130px;
+  border: 1px solid #EEE;
 }
 
 ul.left, ul.right {
@@ -43,7 +46,7 @@ section.guide-section {
   display: block;
   height: 100%;
   overflow-y: auto;
-  padding: 82px 32px;
+  padding: 66px 32px;
 }
 
 .color-swatch {
@@ -58,6 +61,9 @@ section.guide-section {
 .color-label {
   position: relative;
   top: 173px;
+}
+
+.color-label, .typeface-sample {
   background-color: white;
   border: 1px solid #eee;
   text-align: center;
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index 35a3797b..39a4cdfe 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -124,16 +124,25 @@
 			<h2>Typography</h2>
 
 			</br>
-			Typography. Basic references to typefaces and sizes.
-			</br>
-			Typography. Basic references to typefaces and sizes.
-			</br>
-			Typography. Basic references to typefaces and sizes.
-			</br>
-			Typography. Basic references to typefaces and sizes.
-			</br>
-			Typography. Basic references to typefaces and sizes.
-			 </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 style="font-weight: bold;">Aa</h2>
+					<span>Bold</span>
+				</li>
+				<li>
+					<h2 style="font-weight: 800;">Aa</h2>
+					<span>Extra Bold</span>
+				</li>
+				<li>
+					<h2 style="font-weight: lighter;">Aa</h2>
+					<span>Lighter</span>
+				</li>
 		</section>
 		<section id="components" class="guide-section" name="components">
 			<h2>Components</h2>
-- 
cgit v1.2.3