diff --git a/_config.yml b/_config.yml index c477424..dec84f2 100644 --- a/_config.yml +++ b/_config.yml @@ -13,16 +13,15 @@ # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on. # You can create any custom variable you would like, and they will be accessible # in the templates via {{ site.myvariable }}. -title: Your awesome title -email: your-email@domain.com +title: Draw My Life - A Perception of Migration Through Anonymised Children's Drawings & Data +email: drawmylife@empowerhack.com description: > # this means to ignore newlines until "baseurl:" - Write an awesome description for your new site here. You can edit this - line in _config.yml. It will appear in your document head meta (for - Google search results) and in your feed.xml site description. + Draw My Life is inspired by how children's art therapy in the field + can become a basis for better data around the needs and experience + of refugee children. baseurl: "" # the subpath of your site, e.g. /blog -url: "" # the base hostname & protocol for your site, e.g. http://example.com -twitter_username: jekyllrb -github_username: jekyll +url: "https://drawmylife.org" +twitter_username: drawmylifeteam # Build settings markdown: kramdown diff --git a/src/_sass/_helpers/_variables.scss b/src/_sass/_helpers/_variables.scss index 0b6835a..13dfef0 100644 --- a/src/_sass/_helpers/_variables.scss +++ b/src/_sass/_helpers/_variables.scss @@ -1,7 +1,12 @@ -@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700'); +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700'); // **** Fonts **** // $font-family: 'Josefin Sans', sans-serif; // **** Colours **** // $white: white; + +$button-fg: #222222; +$button-bg: #fddf50; +$button-fg-hover: #fddf50; +$button-bg-hover: #222222; diff --git a/src/_sass/button.scss b/src/_sass/button.scss new file mode 100644 index 0000000..39f7f1a --- /dev/null +++ b/src/_sass/button.scss @@ -0,0 +1,36 @@ +.dml-button { + background-color: $button-bg; + border-color: $button-bg; + border-radius: 2em; + margin: 3em 0; + padding: 1em; + width: 15em; + font-weight: bold; + font-size: 16px; + + @include breakpoint(small) { + margin: 1.5em 0; + } + + > a { + color: $button-fg; + background-color: $button-bg; + + &:hover { + color: $button-fg-hover; + background-color: $button-bg-hover; + text-decoration: none; + } + } + + &:hover { + background-color: $button-bg-hover; + border-color: $button-bg-hover; + + > a { + color: $button-fg-hover; + background-color: $button-bg-hover; + border-color: $button-bg-hover; + } + } +} diff --git a/src/_sass/coming_soon.scss b/src/_sass/coming_soon.scss new file mode 100644 index 0000000..814d856 --- /dev/null +++ b/src/_sass/coming_soon.scss @@ -0,0 +1,116 @@ +.coming-soon-wrapper { + background-image: url('../assets/images/coming_soon_large.jpg'); + background-position: top center; + background-repeat: no-repeat; + background-size: cover; + // background-size: 100% auto; + height: 100%; + min-width: 100%; + box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71); + z-index: 0; + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + padding-bottom: 40px; + + @include breakpoint(medium) { + background-image: url('../assets/images/coming_soon_medium.jpg'); + } + + @include breakpoint(small) { + background-image: url('../assets/images/coming_soon_small.jpg'); + } + +} + +.coming-soon-wrapper:after { + content: ''; + background: linear-gradient(135deg, #333, #000); + width: 100%; + height: 100%; + opacity: 0.7; + top: 0; + left: 0; + display: block; + z-index: 1; + position: absolute; +} + +.coming-soon-footer { + color: #c0c0c0; + background-color: #333333; + padding: 1em; +} + +.coming-soon-content { + display: block; + z-index: 2; + justify-content: center; + text-align: center; + height: 100%; + max-width: 65%; + font-family: $font-family; + color: #c0c0c0; + + h1 { + font-size: 6em; + font-weight: 100; + + @include breakpoint(medium) { + font-size: 4em; + } + + @include breakpoint(small) { + font-size: 3em; + } + } + + h2 { + font-size: 3em; + font-weight: 100; + margin: 1.5em 0; + + @include breakpoint(medium) { + font-size: 2em; + } + + @include breakpoint(small) { + font-size: 2em; + } + } + + .page-header { + border: 0; + } + + p { + font-size: 1.25em; + font-weight: 400; + } + + a { + color: #c5093b; + + &:hover { + text-decoration: none; + color: #ff558f; + } + } + + .dml-logo { + background-image: url('../assets/images/DML-Logo-web-150x-high.png'); + background-position: top center; + background-repeat: no-repeat; + background-size: cover; + height: 150px; + margin: 0 auto; + text-indent: -9999px; + width: 250px; + } + + .eh-logo { + background-color: #fff; + padding: 10px; + } +} diff --git a/src/assets/images/DML-Logo-web-150x-high.png b/src/assets/images/DML-Logo-web-150x-high.png new file mode 100644 index 0000000..30cdee8 Binary files /dev/null and b/src/assets/images/DML-Logo-web-150x-high.png differ diff --git a/src/assets/images/coming_soon_large.jpg b/src/assets/images/coming_soon_large.jpg new file mode 100644 index 0000000..340915f Binary files /dev/null and b/src/assets/images/coming_soon_large.jpg differ diff --git a/src/assets/images/coming_soon_medium.jpg b/src/assets/images/coming_soon_medium.jpg new file mode 100644 index 0000000..cc28a76 Binary files /dev/null and b/src/assets/images/coming_soon_medium.jpg differ diff --git a/src/assets/images/coming_soon_small.jpg b/src/assets/images/coming_soon_small.jpg new file mode 100644 index 0000000..5071f67 Binary files /dev/null and b/src/assets/images/coming_soon_small.jpg differ diff --git a/src/assets/images/empowerhack-logo.png b/src/assets/images/empowerhack-logo.png new file mode 100644 index 0000000..8c90e27 Binary files /dev/null and b/src/assets/images/empowerhack-logo.png differ diff --git a/src/css/main.scss b/src/css/main.scss index 2967fa4..861bca0 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -2,3 +2,5 @@ --- @import "background"; +@import "coming_soon"; +@import "button"; diff --git a/webpack/components/ComingSoonLayout.jsx b/webpack/components/ComingSoonLayout.jsx new file mode 100644 index 0000000..0b627f4 --- /dev/null +++ b/webpack/components/ComingSoonLayout.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { comingSoon } from '../copy/coming_soon.js'; + +export default class ComingSoonLayout extends React.Component { + static get propTypes() { + return { + children: React.PropTypes.any + }; + } + + render() { + return ( +
+
+ { this.props.children } +
+
+ { comingSoon.footerLine } +
+
+ ); + } +} diff --git a/webpack/components/Footer.jsx b/webpack/components/Footer.jsx index 621dd64..e7f28da 100644 --- a/webpack/components/Footer.jsx +++ b/webpack/components/Footer.jsx @@ -8,7 +8,7 @@ export default class Footer extends React.Component { render() { const _displayFooterItem = Object.keys(nav).map((key, index) => { return ( - { nav[key] } + { nav[key] } ); }); diff --git a/webpack/components/Nav.jsx b/webpack/components/Nav.jsx index a122501..8ed771c 100644 --- a/webpack/components/Nav.jsx +++ b/webpack/components/Nav.jsx @@ -8,7 +8,7 @@ export default class Nav extends React.Component { render() { const _displayNavItem = Object.keys(nav).map((key, index) => { return ( - { nav[key] } + { nav[key] } ); }); diff --git a/webpack/components/Root.jsx b/webpack/components/Root.jsx index eb3c064..2d249ba 100644 --- a/webpack/components/Root.jsx +++ b/webpack/components/Root.jsx @@ -1,6 +1,9 @@ import React from 'react'; import { Router, Route, IndexRoute, hashHistory } from 'react-router'; +import ComingSoonLayout from './ComingSoonLayout.jsx'; +import ComingSoon from './pages/ComingSoon.jsx'; + import Layout from './Layout.jsx'; import About from './pages/About.jsx'; import Contact from './pages/Contact.jsx'; @@ -16,8 +19,11 @@ module.exports = React.createClass({ render() { return ( - - + + + + + diff --git a/webpack/components/pages/ComingSoon.jsx b/webpack/components/pages/ComingSoon.jsx new file mode 100644 index 0000000..c4b292e --- /dev/null +++ b/webpack/components/pages/ComingSoon.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { PageHeader } from 'react-bootstrap-4'; + +import { comingSoon } from '../../copy/coming_soon.js'; +import DMLButton from '../shared/DMLButton.jsx'; + +export default class ComingSoon extends React.Component { + render() { + return ( +
+ { comingSoon.title } + +
+ +

{ comingSoon.tagline }

+ +
+ + + +
+ + +
+ ); + } +} diff --git a/webpack/components/shared/DMLButton.jsx b/webpack/components/shared/DMLButton.jsx new file mode 100644 index 0000000..03171a2 --- /dev/null +++ b/webpack/components/shared/DMLButton.jsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default class DMLButton extends React.Component { + static get propTypes() { + return { + buttonText: React.PropTypes.string, + buttonURL: React.PropTypes.string + }; + } + + render() { + return ( + + ); + } +} diff --git a/webpack/copy/coming_soon.js b/webpack/copy/coming_soon.js new file mode 100644 index 0000000..de0c736 --- /dev/null +++ b/webpack/copy/coming_soon.js @@ -0,0 +1,13 @@ +export const comingSoon = { + title: 'Coming Soon', + tagline: 'A Perception of Migration Through Anonymised Children\'s Drawings & Data', + callToActionText: 'Contact Us', + callToActionURL: 'mailto:drawmylife@empowerhack.com', + description: {__html: ` +

Draw My Life is inspired by how children's art therapy in the field can become a basis for better data around the needs and experience of refugee children.

+ `}, + moreInfo: {__html: ` +

More about Draw My Life and other projects at EmpowerHack

+ `}, + footerLine: 'Photo credit: Rachel Unkovic, International Rescue Committee (via Flickr)' +};