commit d7c1d06bf28ff485ee68d9347745840f83d2e1e4
parent 9fb74418f3274fb416462022c573de4a8751de20
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Wed, 17 Sep 2014 16:57:00 +0400
Update home page and navigation
Diffstat:
8 files changed, 60 insertions(+), 24 deletions(-)
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -11,7 +11,7 @@ var Navbar = React.createClass({
return (
<div className="navbar-top">
<div className="container">
- <a className="navbar-brand" href="/"><img src="/images/logo-small.png" width="38" height="38" alt="" /> React Seed</a>
+ <a className="navbar-brand" href="/"><img src="/images/logo-small.png" width="38" height="38" alt="" /> Facebook React Starter Kit</a>
</div>
</div>
);
diff --git a/src/layouts/Default.jsx b/src/layouts/Default.jsx
@@ -13,10 +13,17 @@ var DefaultLayout = React.createClass({
return (
<div>
<Navbar />
+ <div className="jumbotron">
+ <div className="container text-center">
+ <h1>React</h1>
+ <p>Complex web apps made easy</p>
+ </div>
+ </div>
<this.props.activeRouteHandler />
<div className="navbar-footer">
<div className="container">
- <p className="text-muted">© KriaSoft • <Link to="home">Home</Link> • <Link to="privacy">Privacy</Link></p>
+ <p className="text-muted">
+ © KriaSoft • <Link to="home">Home</Link> • <Link to="privacy">Privacy</Link></p>
</div>
</div>
</div>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -10,22 +10,34 @@ var HomePage = React.createClass({
render: () => {
return (
<div className="container">
- <h2>Facebook React Starter Kit</h2>
- <p>This is a single-page application (SPA) project template based on Facebook React.</p>
- <h4>Runtime Components:</h4>
- <ul>
- <li><a href="https://facebook.github.io/react/">React</a> - A JavaScript library for building user interfaces, developed by Facebook</li>
- <li><a href="https://github.com/rackt/react-router">React-Router</a> - A complete routing library for React</li>
- <li><a href="http://getbootstrap.com/">Bootstrap</a> - CSS framework for developing responsive, mobile first interfaces</li>
- </ul>
- <h4>Development Tools:</h4>
- <ul>
- <li><a href="http://gulpjs.com">Gulp</a> - JavaScript streaming build system and task automation</li>
- <li><a href="http://webpack.github.io/">Webpack</a> - Compiles front-end source code into modules / bundles</li>
- <li><a href="http://www.browsersync.io/">BrowserSync</a> - A lightweight HTTP server for development</li>
- </ul>
- <h3>Fork me on GitHub</h3>
- <p><a href="https://github.com/kriasoft/react-starter-kit">https://github.com/kriasoft/react-starter-kit</a></p>
+ <div className="row">
+ <div className="col-sm-4">
+ <h3>Runtime Components</h3>
+ <dl>
+ <dt><a href="https://facebook.github.io/react/">React</a></dt>
+ <dd>A JavaScript library for building user interfaces, developed by Facebook</dd>
+ <dt><a href="https://github.com/rackt/react-router">React-Router</a></dt>
+ <dd>A complete routing library for React</dd>
+ <dt><a href="http://getbootstrap.com/">Bootstrap</a></dt>
+ <dd>CSS framework for developing responsive, mobile first interfaces</dd>
+ </dl>
+ </div>
+ <div className="col-sm-4">
+ <h3>Development Tools</h3>
+ <dl>
+ <dt><a href="http://gulpjs.com">Gulp</a></dt>
+ <dd>JavaScript streaming build system and task automation</dd>
+ <dt><a href="http://webpack.github.io/">Webpack</a></dt>
+ <dd>Compiles front-end source code into modules / bundles</dd>
+ <dt><a href="http://www.browsersync.io/">BrowserSync</a></dt>
+ <dd>A lightweight HTTP server for development</dd>
+ </dl>
+ </div>
+ <div className="col-sm-4">
+ <h3>Fork me on GitHub</h3>
+ <p><a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a></p>
+ </div>
+ </div>
</div>
);
}
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title></title>
+ <title>Facebook React Starter Kit</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
diff --git a/src/styles/bootstrap.less b/src/styles/bootstrap.less
@@ -32,7 +32,7 @@
@import "../../node_modules/bootstrap/less/pager.less";
@import "../../node_modules/bootstrap/less/labels.less";
@import "../../node_modules/bootstrap/less/badges.less";
-@import "../../node_modules/bootstrap/less/jumbotron.less";
+@import "jumbotron.less";
@import "../../node_modules/bootstrap/less/thumbnails.less";
@import "../../node_modules/bootstrap/less/alerts.less";
@import "../../node_modules/bootstrap/less/progress-bars.less";
diff --git a/src/styles/jumbotron.less b/src/styles/jumbotron.less
@@ -0,0 +1,17 @@
+// =============================================================================
+// Jumbotron
+// =============================================================================
+
+@jumbotron-heading-color: #61DAFB;
+@jumbotron-color: #E9E9E9;
+@jumbotron-bg: #2d2d2d;
+@jumbotron-font-size: 1em;
+
+@import "../../node_modules/bootstrap/less/jumbotron.less";
+
+.jumbotron {
+ p {
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ }
+}
diff --git a/src/styles/navbar.less b/src/styles/navbar.less
@@ -21,9 +21,9 @@ html {
font-size: 24px;
}
-// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+//
// Navigation Footer
-// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// -----------------------------------------------------------------------------
.navbar-footer {
&:extend(.navbar);
diff --git a/src/styles/utilities.less b/src/styles/utilities.less
@@ -4,9 +4,9 @@
@import "../../node_modules/bootstrap/less/utilities.less";
-// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+//
// Browse Happy prompt
-// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// -----------------------------------------------------------------------------
.browsehappy {
margin: 0.2em 0;
