From 2a24e36f1db9e814b89cf0aa8fb671624c1d795d Mon Sep 17 00:00:00 2001
From: carloluis <carloluisr@gmail.com>
Date: Tue, 26 Dec 2017 01:30:36 -0300
Subject: [PATCH] example code updates..

---
 example/components/ExUpdate.js |  5 +----
 example/components/Example.js  |  1 +
 example/components/Section.js  | 19 ++++---------------
 example/index.html             |  7 ++++---
 4 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/example/components/ExUpdate.js b/example/components/ExUpdate.js
index addda7a..1e8c8bd 100644
--- a/example/components/ExUpdate.js
+++ b/example/components/ExUpdate.js
@@ -61,10 +61,7 @@ class ExUpdate extends React.Component {
 
 		return (
 			<div style={{ padding: '10px 0 160px' }}>
-				<Section
-					title="Suggestor Props"
-					description="Updating props (value, suggestions list)"
-				>
+				<Section title="Suggestor Props" description="Updating props (value, suggestions list)">
 					<SSuggestor
 						value={value}
 						list={suggestions}
diff --git a/example/components/Example.js b/example/components/Example.js
index a670cb9..b1beadd 100644
--- a/example/components/Example.js
+++ b/example/components/Example.js
@@ -13,6 +13,7 @@ const Example = () => (
 	<div>
 		<Section title="Code Example">
 			<pre>{`<Suggestor list={['list', 'of', 'suggestions', ...]} style={{width:'100%'}} />`}</pre>
+			<a href="https://codepen.io/carloluis/pen/rjpLYw">CodePen</a>
 		</Section>
 
 		<Section
diff --git a/example/components/Section.js b/example/components/Section.js
index d44c66a..c86014c 100644
--- a/example/components/Section.js
+++ b/example/components/Section.js
@@ -1,22 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PADDING_STYLE = { padding: '10px 0' };
-
 const Section = ({ title, description = '', children }) => (
-	<div style={PADDING_STYLE}>
-		<h4>
-			{title}
-		</h4>
-		<div>
-			{children}
-		</div>
-		{
-			!!description &&
-			<p style={PADDING_STYLE}>
-				{description}
-			</p>
-		}
+	<div style={{ padding: '10px 0' }}>
+		<h4>{title}</h4>
+		<div>{children}</div>
+		{!!description && <p style={{ padding: '10px' }}>{description}</p>}
 	</div>
 );
 
diff --git a/example/index.html b/example/index.html
index 2f7fea4..2983136 100644
--- a/example/index.html
+++ b/example/index.html
@@ -12,6 +12,7 @@
 	<style>
 		:root {
 			--light-blue: #5EBDF7;
+			--blue: #1187B9;
 			--grey: #eaeaea;
 			--white: #FFF;
 		}
@@ -23,7 +24,7 @@
 		}
 
 		header {
-			background-color: var(--light-blue);
+			background-color: var(--blue);
 		}
 
 		header .container {
@@ -39,10 +40,10 @@
 			padding: 10px;
 		}
 
-		@media only screen and (max-width: 640px) {
+		@media only screen and (max-width: 720px) {
 			.container {
 				padding: 24px 4px 0;
-				max-width: 95%;
+				max-width: 90%;
 			}
 		}
 	</style>