Develop nav and header styling

Reconfigure imports to match scss directory

.gitignore

@@ -16,3 +16,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+src/**/*.css

package.json

@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.9.0"
+    "node-sass": "^4.5.0",
+    "react-scripts": "0.9.0",
+    "sass-loader": "^6.0.1",
+    "webpack": "^2.2.1"
   },
   "dependencies": {
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
   },
   "scripts": {
+    "build-css": "node-sass src/ -o src/",
+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

src/components/app.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import Header from './header.jsx';
+import Nav from './nav.jsx';
+import '../stylesheets/App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="container">
+        <Header />
+        <Nav />
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/header.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import logo from '../wheel.svg';
+import '../stylesheets/App.css';
+
+class Header extends Component {
+  render() {
+    return (
+      <article className="header">
+        <img src={logo} className="header-logo" alt="logo" />
+        <h2>Spoken</h2>
+        <img src={logo} className="header-logo" alt="logo" />
+      </article>
+    );
+  }
+}
+
+export default Header;

src/components/nav.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import '../stylesheets/App.css';
+
+class Nav extends Component {
+  render() {
+    return (
+      <article className="nav">
+        <ul>
+          <li><a href="#">The Trip</a></li>
+          <li><a href="#">Podcast Episodes</a></li>
+          <li><a href="#">Map</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </article>
+    );
+  }
+}
+
+export default Nav;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
+import App from './components/app.jsx';
+import './stylesheets/App.css';
 
 ReactDOM.render(
   <App />,

src/stylesheets/App.css

@@ -1,24 +1,48 @@
-.App {
-  text-align: center;
-}
+@import url(./reset.css);
+@import url("https://fonts.googleapis.com/css?family=Raleway|Josefin+Sans");
+body, ul {
+  font-family: "Josefin Sans", sans-serif; }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Raleway", serif; }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
+a {
+  text-decoration: none;
+  color: #5399FF; }
+  a:hover {
+    font-weight: bold;
+    color: #FFB72E; }
 
-.App-intro {
-  font-size: large;
-}
+.header {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FFF; }
+  .header h2 {
+    color: #003307;
+    font-size: 3em; }
+  .header .header-logo {
+    animation: header-logo-spin infinite 20s linear;
+    height: 80px;
+    padding: 10px 20px; }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+@keyframes header-logo-spin {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(360deg); } }
+
+article.nav {
+  background-color: #003307; }
+  article.nav ul {
+    margin: 20px auto;
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.5em; }
+    article.nav ul li a {
+      color: #fff; }
+      article.nav ul li a:hover {
+        color: #FFB72E; }

src/stylesheets/App.scss

@@ -0,0 +1,6 @@
+@import "./reset.css";
+@import "./base.scss";
+@import "./skeleton.scss";
+@import "./components/header.scss";
+@import "./components/nav.scss";
+

src/stylesheets/base.scss

@@ -0,0 +1,10 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway|Josefin+Sans');
+
+$heading-font: "Raleway", serif;
+$body-font: "Josefin Sans", sans-serif;
+
+$green: #003307;
+$yellow: #FFB72E;
+$brown: #B2782F;
+$blue: #5399FF;
+$lilac: #98B4F5;

src/stylesheets/components/header.scss

@@ -0,0 +1,20 @@
+.header {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FFF;
+  h2 {
+    color: $green;
+    font-size: 3em;
+  }
+  .header-logo {
+    animation: header-logo-spin infinite 20s linear;
+    height: 80px;
+    padding: 10px 20px;
+  }
+  @keyframes header-logo-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+}

src/stylesheets/components/nav.scss

@@ -0,0 +1,19 @@
+article.nav {
+  background-color: $green;
+  ul {
+    margin: 20px auto;
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.5em;
+    li {
+      a {
+        color: #fff;
+        &:hover {
+          color: $yellow;
+        }
+      }
+    }
+  }
+}

src/stylesheets/skeleton.scss

@@ -0,0 +1,16 @@
+body, ul {
+  font-family: $body-font;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font;
+}
+
+a {
+  text-decoration: none;
+  color: $blue;
+  &:hover {
+    font-weight: bold;
+    color: $yellow;
+  }
+}