From d8e85736d2a989ae75d2467955871e63c86d8da2 Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Thu, 4 Jun 2015 00:29:47 +1200 Subject: [PATCH 1/7] default box-sizing to border-box --- src/assets/css/fonts.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index 3f75ffa..bd72de9 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -22,3 +22,7 @@ html, body { font-family: 'Roboto', sans-serif; font-weight: 300; } + +* { + box-sizing: border-box; +} From ab1ddbf79429bcf5176ae9d702ef639b379660c3 Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Thu, 4 Jun 2015 00:30:13 +1200 Subject: [PATCH 2/7] continue to flush out landing page content and styles --- src/views/index.js | 67 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 56 insertions(+), 11 deletions(-) diff --git a/src/views/index.js b/src/views/index.js index 453d3e1..4ace89e 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -20,19 +20,26 @@ var style = Stylesheet.create({ padding: vars.gutterWidth }, introBlock: { - backgroundImage: 'linear-gradient(top, #6f27ff, rgba(0,0,0,0));' + backgroundColor: '#6f27ff', + //backgroundImage: '-webkit-linear-gradient(top, #6f27ff, rgba(0,0,0,0));', + display: 'flex', + flexDirection: 'column', + alignItems: 'center' }, introH1: { - fontSize: vars.fontBase * 3, + marginBottom: 0, + fontSize: vars.fontBase * 3.8, fontWeight: 700, - lineHeight: 1.1 + lineHeight: 1.1, + color: 'white' }, introH2: { fontSize: vars.fontBase * 2, fontWeight: 300, - lineHeight: 1.1 + lineHeight: 1.1, + width: '75%' }, - about: { + aboutBlock: { }, aboutH1: { @@ -41,16 +48,33 @@ var style = Stylesheet.create({ aboutP: { }, - value: { + aboutCarousel: { }, - who: { + whoBlock: { + + }, + actionBlock: { }, actionButton: { + height: vars.fontBase * 4, + width: vars.fontBase * 24, + fontSize: vars.fontBase * 1.6, + border: '2px solid black', + borderRadius: 10, + color: 'black', outline: 0, + fontWeight: 300 + }, + button: { 'WebkitAppearance': 'button', - cursor: 'pointer' + cursor: 'pointer', + alignItems: 'flex-start', + textAlign: 'center', + color: 'buttontext', + backgroundColor: 'buttonface', + textDecoration: 'none' } }) @@ -74,10 +98,31 @@ module.exports = React.createClass({ r.a({ className: style.actionButton, href: props.callToAction.url - }, props.callToAction.text) + }, [ + r.button({ + className: style.button + ' ' + style.actionButton, + }, props.callToAction.text) + ]) ]), - r.section({}, [ - + r.section({ + className: style.block + ' ' + style.aboutBlock + }, [ + r.h1({ + className: style.aboutH1 + }, "What is " + props.name + "?"), + r.p({ + className: style.aboutP + }, props.description) + ]), + r.section({ + className: style.block + ' ' + style.whoBlock + }), + r.section({ + className: style.block + ' ' + style.actionBlock + }, [ + r.p({ + className: style.actionP + }, props.callToAction.text) ]) ]) ]) From 974aa4aece460f30818be1276067d7c62a5364fc Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Thu, 4 Jun 2015 16:45:54 +1200 Subject: [PATCH 3/7] minor updates to pitch and description props --- src/props.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/props.js b/src/props.js index d3a03a9..8a708c4 100644 --- a/src/props.js +++ b/src/props.js @@ -1,8 +1,8 @@ module.exports = { name: "Holodex", pitchPhrase: "People and Groups", - pitchSentence: "Holodex empowers you to find people, understand relationships, and manage roles in your groups.", - description: "Holodex is a web-based directory to search, visualize, and organize networks of people. The system is built around you, so everyone can come together.", + pitchSentence: "Holodex empowers you to discover people, understand relationships, and organize roles as they emerge in your groups.", + description: "Holodex is a web-based directory to search, visualize, and manage groups of people. The system is built around you, so everyone can come together.", valueProps: [], callToAction: { text: "Request an invite", From 99fe3bc94b578615fbe6a57743378f6550ceece7 Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Thu, 4 Jun 2015 16:46:06 +1200 Subject: [PATCH 4/7] don't display who block --- src/views/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/index.js b/src/views/index.js index 4ace89e..3917bcb 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -52,7 +52,7 @@ var style = Stylesheet.create({ }, whoBlock: { - + display: 'none' }, actionBlock: { From e27afff30719696636f84e882e8c09a0b4615ae0 Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Thu, 4 Jun 2015 16:46:19 +1200 Subject: [PATCH 5/7] material design colors yo --- src/views/index.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/views/index.js b/src/views/index.js index 3917bcb..041da28 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -8,6 +8,23 @@ var Layout = require('../partials/layout') var vars = { fontBase: 14, gutterWidth: 60, +// colors chosen from https://www.google.com/design/spec/style/color.html#color-color-palette +// +// primary Purple +// 500 #9C27B0 +// 100 #E1BEE7 +// 800 #6A1B9A +// +// secondary Teal +// A700 #00BFA5 + } +var colors = { + primary: '#9C27B0', + primaryLight: '#E1BEE7', + primaryDark: '#6A1B9A', + secondary: '#00BFA5', + secondaryLight: '', + secondaryDark: '' } var style = Stylesheet.create({ @@ -20,7 +37,7 @@ var style = Stylesheet.create({ padding: vars.gutterWidth }, introBlock: { - backgroundColor: '#6f27ff', + backgroundColor: colors.primary, //backgroundImage: '-webkit-linear-gradient(top, #6f27ff, rgba(0,0,0,0));', display: 'flex', flexDirection: 'column', @@ -31,16 +48,17 @@ var style = Stylesheet.create({ fontSize: vars.fontBase * 3.8, fontWeight: 700, lineHeight: 1.1, - color: 'white' + color: colors.primaryLight }, introH2: { fontSize: vars.fontBase * 2, fontWeight: 300, lineHeight: 1.1, - width: '75%' + width: '75%', + color: colors.primaryLight }, aboutBlock: { - + backgroundColor: colors.primaryLight }, aboutH1: { @@ -55,6 +73,7 @@ var style = Stylesheet.create({ display: 'none' }, actionBlock: { + backgroundColor: colors.primaryDark }, actionButton: { From 6d1d4ffbd69d61729a482919176625d62638be87 Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Mon, 8 Jun 2015 13:11:47 +1200 Subject: [PATCH 6/7] deploy staging with NODE_ENV=production --- Gulpfile.js | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Gulpfile.js b/Gulpfile.js index c3896f1..6a43746 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -12,7 +12,7 @@ var env = process.env var nodeEnv = env.NODE_ENV var isDeploy = function (env) { - return env === 'production' || env === 'staging' + return env === 'production' } var lr diff --git a/package.json b/package.json index be26f67..27ca3e4 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "start": "npm run build && npm run server", "develop": "NODE_ENV=development npm run watch-start", "prod": "NODE_ENV=production npm start", - "stage": "(export NODE_ENV=staging; gulp branch && git push origin gh-pages -f)", - "deploy": "(export NODE_ENV=production; gulp branch && git push deploy gh-pages:master -f)" + "stage": "(export NODE_ENV=production; gulp build && gulp branch && git push origin gh-pages -f)", + "deploy": "(export NODE_ENV=production; gulp build && gulp branch && git push deploy gh-pages:master -f)" }, "repository": { "type": "git", From 4995052f23beb6648febb197d3e7ac47c068f26a Mon Sep 17 00:00:00 2001 From: Michael Williams Date: Mon, 8 Jun 2015 13:26:10 +1200 Subject: [PATCH 7/7] oh wow, i wanna click that action button --- src/views/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/views/index.js b/src/views/index.js index 041da28..01af79e 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -84,7 +84,14 @@ var style = Stylesheet.create({ borderRadius: 10, color: 'black', outline: 0, - fontWeight: 300 + backgroundColor: 'transparent', + transition: 'background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, color 0.4s ease-in-out', + fontWeight: 300, + ':hover': { + color: colors.secondary, + backgroundColor: 'white', + borderColor: colors.secondary + } }, button: { 'WebkitAppearance': 'button',