From b5760a9313e2007ab6785344c8b7f6aab79c6ff0 Mon Sep 17 00:00:00 2001
From: Gabriel Albo <gabriel@albo.com.br>
Date: Tue, 2 Sep 2014 20:08:39 -0300
Subject: Adding screenshot, modifying welcome session and cleaning up color
 grid on style guide.

---
 web-ui/app/images/pixelated-screenshot.png | Bin 0 -> 345279 bytes
 web-ui/app/scss/style-guide.scss           |  15 +++++++++++++++
 web-ui/app/style-guide.html                |  28 +++++++++++-----------------
 3 files changed, 26 insertions(+), 17 deletions(-)
 create mode 100644 web-ui/app/images/pixelated-screenshot.png

diff --git a/web-ui/app/images/pixelated-screenshot.png b/web-ui/app/images/pixelated-screenshot.png
new file mode 100644
index 00000000..8baa9ee6
Binary files /dev/null and b/web-ui/app/images/pixelated-screenshot.png differ
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index 7d18109e..689f32a2 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -6,6 +6,20 @@ body {
   overflow: scroll !important; 
 }
 
+div#style-guide-wrap {
+  font-size: 1rem;
+}
+
+div#style-guide-wrap p {
+  font-size: 1rem;
+}
+
+img.screenshot {
+  max-width: 60%;
+  margin: 0 auto;   
+  display: block;
+}
+
 nav {
   position: fixed;    
   z-index: 10;
@@ -94,6 +108,7 @@ section.guide-section {
 /* Color Cards definition */
 
 .color-grid {
+  margin-bottom: 25px;
   #primary-color-card { background-color: $primary_color; }
   #secondary-color-card { background-color: $secondary; }
   #top-pane-card { background-color: $top_pane; }
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index c145bd9a..4e038822 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -16,32 +16,26 @@
 	<div id="style-guide-wrap" data-offcanvas>
 		<nav class="top-bar" data-topbar>
 		    <ul class="left">
-		      <li><a class="logo-anchor" href="#guidelines">Pixelated Style Guide</a></li>
+		      <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li>
 		    </ul>
 
 		    <ul class="right">
-		      <li><a href="#guidelines">Guidelines</a></li>
+		      <li><a href="#welcome">Welcome</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>
-		<section id="guidelines" class="guide-section" name="guidelines">
-			<h2>Basic Guidelines</h2>
-
-			Guidelines, guidelines, guidelines.
-			</br>
-			Guidelines, guidelines, guidelines.
-			</br>
-			Guidelines, guidelines, guidelines.
-			</br>
-			Guidelines, guidelines, guidelines.
-			</br>
-			Guidelines, guidelines, guidelines.
-			</br>
-			Guidelines, guidelines, guidelines.
-			 </br>
+		<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>
-- 
cgit v1.2.3