From b3595f70fd50575655eabb4a82f51a2885566712 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Tue, 2 Sep 2014 20:50:38 -0300
Subject: Adding icons section and removing (currently) empty components
 section on the style guide

---
 web-ui/app/scss/style-guide.scss | 10 +++++++++-
 web-ui/app/style-guide.html      | 38 +++++++++++---------------------------
 2 files changed, 20 insertions(+), 28 deletions(-)

(limited to 'web-ui/app')

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index 689f32a2..7370aac6 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -69,13 +69,16 @@ ul.right {
 section.guide-section {
   display: block;
   height: 100%;
-  min-height: 666px;
   overflow-y: auto;
   padding: 66px 32px;
 
   &:nth-child(even) {
     background-color: $top_pane;  
   }
+
+  &:last-child {
+    min-height: 666px;
+  }
 }
 
 .color-card {
@@ -131,4 +134,9 @@ ul.typography li h2 {
 ul.headers-and-sizes {
   margin: 20px 100px 0 0;
   display: inline-block;
+}
+
+section#icons i {
+  font-size: xx-large;
+  margin-right: 20px;
 }
\ No newline at end of file
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index 4e038822..3c464ed6 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -20,10 +20,9 @@
 		    </ul>
 
 		    <ul class="right">
-		      <li><a href="#welcome">Welcome</a></li>
+		      <li><a href="#welcome">Home</a></li>
 		      <li><a href="#colors">Colors</a></li>
 		      <li><a href="#typography">Typography</a></li>
-		      <li><a href="#components">Components</a></li>
 		      <li><a href="#icons">Icons</a></li>
 		    </ul>
 		</nav>
@@ -167,33 +166,18 @@
 				</li>
 			</ul>
 		</section>
-		<section id="components" class="guide-section" name="components">
-			<h2>Components</h2>
-			</br>
-			Example of components, such as warnings, modals, buttons, etc..
-			</br>
-			Example of components, such as warnings, modals, buttons, etc..
-			</br>
-			Example of components, such as warnings, modals, buttons, etc..
-			</br>
-			Example of components, such as warnings, modals, buttons, etc..
-			</br>
-			Example of components, such as warnings, modals, buttons, etc..
-			 </br>
-		</section>
 		<section id="icons" class="guide-section" name="icons">
 			<h2>Icons</h2>
-			</br>
-			Icons - style and usage.
-			</br>
-			Icons - style and usage.
-			</br>
-			Icons - style and usage.
-			</br>
-			Icons - style and usage.
-			</br>
-			Icons - style and usage.
-			 </br>
+			<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>
 
-- 
cgit v1.2.3