diff --git a/.gitignore b/.gitignore index 4fa4a53..98c6708 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +src/**/*.css diff --git a/package.json b/package.json index 4ffbedd..9ffca0a 100644 --- a/package.json +++ b/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", diff --git a/src/components/App.js b/src/components/App.js deleted file mode 100644 index d7d52a7..0000000 --- a/src/components/App.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; - -class App extends Component { - render() { - return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); - } -} - -export default App; diff --git a/src/components/app.jsx b/src/components/app.jsx new file mode 100644 index 0000000..9641487 --- /dev/null +++ b/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 ( +
+
+
+ ); + } +} + +export default App; diff --git a/src/components/header.jsx b/src/components/header.jsx new file mode 100644 index 0000000..3b39dca --- /dev/null +++ b/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 ( +
+ logo +

Spoken

+ logo +
+ ); + } +} + +export default Header; diff --git a/src/components/nav.jsx b/src/components/nav.jsx new file mode 100644 index 0000000..a3930a0 --- /dev/null +++ b/src/components/nav.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import '../stylesheets/App.css'; + +class Nav extends Component { + render() { + return ( +
+ +
+ ); + } +} + +export default Nav; diff --git a/src/index.js b/src/index.js index 54c5ef1..3427053 100644 --- a/src/index.js +++ b/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( , diff --git a/src/stylesheets/App.css b/src/stylesheets/App.css index 15adfdc..a059648 100644 --- a/src/stylesheets/App.css +++ b/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; } diff --git a/src/stylesheets/App.scss b/src/stylesheets/App.scss new file mode 100644 index 0000000..6e73d81 --- /dev/null +++ b/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"; + diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss new file mode 100644 index 0000000..db3855d --- /dev/null +++ b/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; diff --git a/src/stylesheets/components/header.scss b/src/stylesheets/components/header.scss new file mode 100644 index 0000000..4239fdf --- /dev/null +++ b/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); } + } +} diff --git a/src/stylesheets/components/nav.scss b/src/stylesheets/components/nav.scss new file mode 100644 index 0000000..15b1248 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/stylesheets/index.css b/src/stylesheets/index.css deleted file mode 100644 index b4cc725..0000000 --- a/src/stylesheets/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -} diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/stylesheets/skeleton.scss b/src/stylesheets/skeleton.scss new file mode 100644 index 0000000..ded5fba --- /dev/null +++ b/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; + } +} diff --git a/src/wheel.svg b/src/wheel.svg new file mode 100644 index 0000000..122171f --- /dev/null +++ b/src/wheel.svg @@ -0,0 +1 @@ + \ No newline at end of file