archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Added styles for different squares

Browse source
This commit is contained in:
Jake Howard 2015-11-11 14:24:13 +00:00
parent 5e17a54875
commit 8bd405af9b
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/src/js/components/project-image.js
View file

@ -8,8 +8,8 @@ var projectImage = React.createClass({
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut'; var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
return ( return (
<Col sm={4}> <Col sm={4}>
<div className="wrapper" > <div className={"wrapper " + this.props.data.className}>
<div className={"project " + this.props.data.className} <div className="project"
onMouseOver={this.props.onHover} onMouseOver={this.props.onHover}
onMouseLeave={this.props.onLeave} > onMouseLeave={this.props.onLeave} >
<div className={"animated " + animationClass}> <div className={"animated " + animationClass}>

16
static/src/less/style.less
View file

@ -112,14 +112,26 @@ ol , ul{
.wrapper { .wrapper {
color: white; color: white;
margin: 0 auto; margin: 0 auto;
background-color: red;
.box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
cursor: pointer; cursor: pointer;
background-size: contain;
.box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
&:hover .project { &:hover .project {
opacity: 1; opacity: 1;
} }
&.college {
background-color: red;
}
&.personal {
background-color: red;
}
&.work {
background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
}
& .project { & .project {
padding: 25px; padding: 25px;
.transition(~"opacity 0.5s ease-in"); .transition(~"opacity 0.5s ease-in");