update suggestor example app (markup/styles)

- clean up index.html

example/components/app/App.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Example from '../example/Example';
+import styles from './app.css';
+
+const App = () => (
+	<React.Fragment>
+		<header className={styles.header}>
+			<div className={styles.title}>
+				<h1>{'<ssuggestor>'}</h1>
+				<h2>React Simple Suggestor</h2>
+			</div>
+			<a
+				className={styles.link}
+				href="https://github.com/carloluis/ssuggestor"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Code and Docs on GitHub
+			</a>
+		</header>
+		<section className={styles.container}>
+			<Example />
+		</section>
+		<footer className={styles.footer}>
+			<span>
+				MIT &copy;{' '}
+				<a href="https://twitter.com/carloluis_" target="_blank" rel="noopener noreferrer">
+					Carloluis
+				</a>{' '}
+				2017
+			</span>
+		</footer>
+	</React.Fragment>
+);
+
+export default App;

example/components/app/app.css

@@ -0,0 +1,72 @@
+@import '../../styles/palette.css';
+
+.header {
+	background-color: var(--blue);
+	text-align: center;
+	padding: 24px 24px 0;
+	margin-bottom: 24px;
+	position: sticky;
+	top: -50px;
+	z-index: 11;
+}
+
+.header::after {
+	position: absolute;
+	content: '';
+	display: block;
+	left: 0;
+	bottom: -24px;
+	border-style: solid;
+	border-width: 0 100vw 24px 0;
+	border-color: transparent var(--blue) transparent transparent;
+}
+
+.title {
+	padding: 16px 0;
+	text-align: center;
+	color: var(--white);
+	margin: 0 auto;
+}
+
+.title h2 {
+	font-size: 24px;
+}
+
+.link {
+	display: inline-block;
+	background-color: var(--grey);
+	color: var(--blue);
+	text-align: center;
+	padding: 8px 16px;
+	transition: all 0.3s ease-in-out;
+}
+
+.link:hover {
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.container {
+	max-width: 640px;
+	width: 90%;
+	margin: 0 auto;
+	padding: 16px;
+}
+
+.footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 11;
+	text-align: center;
+	background-color: var(--grey);
+	padding: 8px 16px;
+	color: var(--blue);
+}
+
+.footer a:hover {
+	text-decoration: none;
+	color: var(--blue);
+	font-weight: 500;
+}

example/components/example/Example.jsx

@@ -3,6 +3,7 @@ import Suggestor from '../../../src';
 import Section from '../section/Section';
 import Update from '../update/Update';
 import { countries, suggestions, numbers } from '../../data';
+import './example.css';
 
 const valueSelected = (value, item) => console.info('select: %s -> %o', value, item);
 const valueChanged = value => console.info('change to:', value);

example/components/example/example.css

@@ -0,0 +1,15 @@
+:global .suggestor input {
+	font-weight: 600;
+	font-size: 20px;
+	height: 40px;
+}
+
+:global .suggestor li {
+	font-size: 16px;
+	height: 26px;
+}
+
+:global .suggestor ::-webkit-input-placeholder {
+	font-weight: normal;
+	font-size: 18px;
+}

example/components/index.js

@@ -1,3 +1,3 @@
-import Example from './example/Example';
+import App from './app/App';
 
-export default Example;
+export default App;

example/index.css

@@ -1,19 +1,12 @@
+@import './styles/palette.css';
+
 * {
 	box-sizing: border-box;
 }
 
-:global .suggestor input {
-	font-weight: 600;
-	font-size: 20px;
-	height: 40px;
-}
-
-:global .suggestor li {
-	font-size: 16px;
-	height: 26px;
-}
-
-:global .suggestor ::-webkit-input-placeholder {
-	font-weight: normal;
-	font-size: 18px;
+body {
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 14px;
+	line-height: 1.42857143;
+	overflow-x: hidden;
 }

example/index.html

@@ -10,67 +10,10 @@
 	<meta name="description" content="ssuggestor - React Simple Suggestor">
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 	 crossorigin="anonymous">
-	<style>
-		:root {
-			--light-blue: #5EBDF7;
-			--blue: #1187B9;
-			--grey: #eaeaea;
-			--white: #FFF;
-		}
-
-		.container {
-			padding: 24px 0 0;
-			margin: 0 auto;
-			max-width: 640px;
-		}
-
-		header {
-			background-color: var(--blue);
-		}
-
-		header .container {
-			padding: 20px 0 40px;
-			text-align: center;
-			color: var(--white);
-		}
-
-		.info {
-			background-color: var(--grey);
-			height: 40px;
-			text-align: center;
-			padding: 10px;
-		}
-
-		@media only screen and (max-width: 720px) {
-			.container {
-				padding: 24px 4px 0;
-				max-width: 90%;
-			}
-		}
-	</style>
 </head>
 
 <body>
-	<header>
-		<div class="container">
-			<h1>&LeftAngleBracket; ssuggestor &RightAngleBracket;</h1>
-			<h3>React Simple Suggestor</h3>
-		</div>
-		<div class="info">
-			<span>
-				<a href="https://github.com/carloluis/ssuggestor" target="_blank">Code and Docs on GitHub</a>
-			</span>
-		</div>
-	</header>
-	<section class="container">
-		<div id="example">Loading...</div>
-	</section>
-	<footer>
-		<div class="info">
-			<span>Copyright &copy;
-				<a href="https://twitter.com/carloluis_" target="_blank">Carloluis</a> 2017. MIT Licensed.</span>
-		</div>
-	</footer>
+	<div id="app">loading...</div>
 </body>
 
 </html>

example/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Example from './components';
+import App from './components';
 import './index.css';
 
-ReactDOM.render(<Example />, document.getElementById('example'));
+ReactDOM.render(<App />, document.getElementById('app'));

example/styles/palette.css

@@ -0,0 +1,6 @@
+:root {
+	--light-blue: #5ebdf7;
+	--blue: #1187b9;
+	--grey: #eaeaea;
+	--white: #fff;
+}