<div id="app"></div>

@import 'https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto';

// Colors
$spacecadet: #2C2C54;
$jazzberryjam: #A40E4C;
$cambridgeblue: #ACC3A6;
$peachpuff: #F5D6BA;
$sandybrown: #F49D6E;

@mixin mq($width) {
	@media screen and (max-width: $width) {
		@content;
	}
}

.App {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	font-family: 'Roboto';
	display: flex;
	
	@include mq(980px) {
		flex-direction: column;
	}
	
	.Image {
		width: 50vw;
		position: relative;
		background-size: cover;
		background-position: center;
		
		@include mq(980px) {
			width: 100vw;
			height: 70vh;
		}
	}
	
	.Profile {
		width: 50vw;
		padding: 5vw 10vw;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		color: $spacecadet;
		
		@include mq(980px) {
			width: 100vw;
			height: 30vh;
		}
		
		.Name {
			font-size: 6vw;
			font-family: 'Abril Fatface';
			margin-bottom: 4vw;
		}
		
		.Bio {
			font-size: 15px;
			line-height: 1.8;
			margin-bottom: 3vw;
			opacity: .4;
		}
		
		.Quote {
			margin-top: auto;
			blockquote{
				font-size: 36px;
				font-family: 'Abril Fatface';
				font-style: italic;
				line-height: 1.4;
				margin-bottom: .6em;
			}
			
			.byline {
				font-family: 'Times', serif;
				text-align: right;
				font-size: 22px;	
				font-style: italic;
				opacity: .25;
			}
		}
	}
}

var App = React.createClass({
	getDefaultProps: function() {
		return({
			person: {
				name: 'Jack-Edward Oliver',
				biography: '26 year old Designer / Developer living in Stockholm. Originally from Oxford, England. Love to make stuff.',
			},
			image: 'http://static1.squarespace.com/static/55acc005e4b098e615cd80e2/t/57b057398419c2c454f09924/1471025851733/',
			quote: {
				content: 'Beautiful things don\'t ask for attention',
				source: 'The Secret Life of Walter Mitty'
			}
			
		})
	},
	render: function() {
		return(
			<div className="App">
				<Image src={this.props.image} />
				<Profile person={this.props.person} quote={this.props.quote} />
			</div>
		);
	}
});

var Image = React.createClass({
	render: function() {
		return (
			<div className="Image" style={{backgroundImage: 'url(' + this.props.src + ')'}}></div>
		);
	}
});

var Profile = React.createClass({
	render: function() {
		return (
			<div className="Profile">
				<h1 className="Name">{this.props.person.name}</h1>
				<p className="Bio">{this.props.person.biography}</p>
				<div className="Quote">
					<blockquote>&ldquo; {this.props.quote.content} &rdquo;</blockquote>
					<div className="byline">&mdash; {this.props.quote.source}</div>
				</div>
				
			</div>
		);
	}
});

ReactDOM.render(<App/>,document.getElementById('app'));