diff --git a/Makefile b/Makefile index 6ed6a1a81..1e200a439 100644 --- a/Makefile +++ b/Makefile @@ -41,7 +41,7 @@ watch: wait start: - node ./server/index.js + $(NODE) ./server/index.js # ------------------------------------ diff --git a/package.json b/package.json index 0259a3beb..715caa635 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "mustache": "2.1.3" }, "devDependencies": { + "autoprefixer-loader": "2.1.0", "css-loader": "0.17.0", "eslint": "1.3.1", "eslint-plugin-react": "3.3.1", diff --git a/server/template.html b/server/template.html index b6ce4c15f..327a3f373 100644 --- a/server/template.html +++ b/server/template.html @@ -1,5 +1,7 @@ - + + + @@ -9,7 +11,18 @@ Scratch - {{title}} + + + + + + + + + + + @@ -21,5 +34,9 @@ + + + + diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx index 5b5b3ddec..27b998905 100644 --- a/src/components/footer/footer.jsx +++ b/src/components/footer/footer.jsx @@ -5,8 +5,55 @@ require('./footer.scss'); module.exports = React.createClass({ render: function () { return ( -
-

Footer

+
+
+
+
About
+
About Scratch
+
For Parents
+
For Educators
+
Credits
+
Jobs
+
Press
+
+ +
+
Community
+
Community Guidelines
+
Discussion Forums
+
Scratch Wiki
+
Statistics
+
+ +
+
Support
+
Help Page
+
FAQ
+
Offline Editor
+
Contact Us
+
Donate
+
+ +
+
Legal
+
Terms of Use
+
Privacy Policy
+
DMCA
+
+ +
+
Scratch Family
+
ScratchEd
+
ScratchJr
+
Scratch Day
+
Scratch Conference
+
Scratch Foundation
+
+
+ +
+

Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab

+
); } diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss index afee1ebb2..059b2b08d 100644 --- a/src/components/footer/footer.scss +++ b/src/components/footer/footer.scss @@ -1,3 +1,43 @@ #footer { - background-color: yellow; + display: block; + padding: 10px 0; + color: #666; + background-color: #ececec; + + .lists { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + text-align: center; + + dl { + display: inline-block; + width: 130pt; + font-size: 0.85rem; + text-align: left; + vertical-align: top; + } + + dt { + display: block; + margin-bottom: 8px; + font-weight: bold; + } + + dd { + display: block; + margin: 5px 0; + } + } + + .copyright { + display: block; + width: 100%; + text-align: center; + + p { + font-size: 0.7rem; + } + } } diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx index bf76244b0..57bfc6b55 100644 --- a/src/components/navigation/navigation.jsx +++ b/src/components/navigation/navigation.jsx @@ -5,8 +5,28 @@ require('./navigation.scss'); module.exports = React.createClass({ render: function () { return ( -
-

Navigation

+
+
); } diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss index 50658be1e..a51e8f819 100644 --- a/src/components/navigation/navigation.scss +++ b/src/components/navigation/navigation.scss @@ -1,3 +1,121 @@ #navigation { - background-color: cyan; + position: fixed; + display: block; + top: 0; + left: 0; + width: 100%; + height: 35px; + + background-color: #0f8bc0; + + ul { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + + height: 35px; + margin: 0; + padding: 0; + list-style: none; + + li { + display: inline-block; + align-self: flex-start; + float: left; + height: 100%; + border-left: 1px solid rgb(20, 154, 203); + } + + .logo { + border-left: none; + + a { + display: block; + width: 80px; + height: 35px; + margin: 4px 6px 0 0; + + border: none; + background-image: url('/images/logo_sm.png'); + background-repeat: no-repeat; + + &:hover { + background-image: url('/images/logo_sm_highlight.png'); + } + } + } + + .link { + a { + display: block; + height: 28px; + padding: 7px 15px 0 15px; + + color: white; + text-decoration: none; + font-size: 0.95rem; + white-space: nowrap; + } + + a:hover { + background-color: rgb(1, 96, 135); + } + } + + .search { + flex-grow: 3; + border-right: none; + + form { + margin: 6px 0 0 15px; + } + + input { + display: inline-block; + height: 20px; + outline: none; + border: none; + } + + input[type=submit] { + position: absolute; + width: 30px; + height: 22px; + + background-color: white; + background-image: url(/images/nav-search-glass.png); + background-repeat: no-repeat; + background-position: center center; + border-right: 1px solid #efefef; + border-radius: 10px 0 0 10px; + } + + input[type=text] { + width: calc(100% - 50px); + padding-left: 36px; + border-radius: 10px; + font-size: 0.85em; + } + + .ie9 input[type=text] { + width: 70px; + } + } + + .right { + align-self: flex-end; + float: right; + margin-left: auto; + font-weight: bold; + + a:hover { + background-color: #f79231; + } + + &:last-child { + border-right: 1px solid rgb(20, 154, 203); + } + } + } } diff --git a/src/components/news/news.scss b/src/components/news/news.scss index 6270cc9be..77f858ca6 100644 --- a/src/components/news/news.scss +++ b/src/components/news/news.scss @@ -1,3 +1,3 @@ .news { - background-color: white; + } diff --git a/src/main.jsx b/src/main.jsx index b4ae23fa5..9845b0ad1 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,7 @@ var React = require('react'); +require('./main.scss'); + var Navigation = require('./components/navigation/navigation.jsx'); var Footer = require('./components/footer/footer.jsx'); diff --git a/src/main.sass b/src/main.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 000000000..ea9b94e54 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,50 @@ +/* Tags */ +html, body { + display: block; + margin: 0; + padding: 0; + + color: #322f31; + background-color: #fdfdfd; + + font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; +} + +/* Typography */ +h1, h2, h3, h4 { + margin: 0; + padding: 0; + border: 0; + + color: #554747; + font-weight: 700; +} + +h4 { + font-size: 1.0rem; + line-height: 1.1rem; +} + +/* Links */ +a:link, a:visited, a:active { + color: #1aa0d8; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* Classes */ +.inner { + width: 942px; + margin: 0 auto; +} + +#view { + min-height: 768px; + padding: 10px 0; + + /* Compensate for fixed navigation */ + margin-top: 35px; +} diff --git a/src/mixins/session.jsx b/src/mixins/session.jsx new file mode 100644 index 000000000..8df039b89 --- /dev/null +++ b/src/mixins/session.jsx @@ -0,0 +1,10 @@ +module.exports = { + getInitialState: function () { + return { + session: {} + }; + }, + componentWillMount: function () { + // @todo Fetch session from API + } +}; diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 9fdf49e03..7c9719004 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -1,17 +1,22 @@ var React = require('react'); var Api = require('../../mixins/api.jsx'); +var Session = require('../../mixins/session.jsx'); + var News = require('../../components/news/news.jsx'); require('./splash.scss'); var View = React.createClass({ mixins: [ - Api + Api, + Session ], getInitialState: function () { return { - news: [] + activity: [], + news: [], + featured: [] }; }, componentDidMount: function () { @@ -21,9 +26,11 @@ var View = React.createClass({ }, render: function () { return ( -
-

I am the splash page!

+
+
+
+
); } diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index a2915c31f..d40c56fb9 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -1,3 +1,3 @@ #view { - background-color: red; + } diff --git a/webpack.config.js b/webpack.config.js index bbc477df7..791c7e2d7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -36,7 +36,7 @@ module.exports = { }, { test: /\.scss$/, - loader: 'style!css!sass' + loader: 'style!css!sass!autoprefixer-loader?browsers=last 3 versions' } ] },