blob: 5b3ba3b8d034e6bcf13784aabaaaad8bdaf05364 [file] [log] [blame]
// ==========================================================================
// projects
// ==========================================================================
@import "common.less";
.projects {
max-width: 460px;
margin: 0 auto 2em;
position: relative;
@media @break-medium {
width: 960px;
max-width: 100%;
.clearfix;
}
}
.project {
background: white;
.box-shadow(rgba(0,0,0,.3) 0 0 6px);
position: relative;
margin: 0 0 3em 0;
text-align: center;
.no-boxshadow & {
border: 1px solid #ccc;
}
&:hover {
.box-shadow(rgba(0,0,0,.6) 0 0 6px);
}
.no-boxshadow &:hover {
border-color: #aaa;
}
h2 {
color: @link-color;
}
a:hover h2 {
color: @link-color-hover;
}
@media @break-medium {
float: left;
width: 460px;
margin: 10px;
}
a {
display: block;
width: 100%;
height: 100%;
}
}
.project-button {
font-size: 1.125em;
line-height: 1.25em;
margin: 0 auto .5em;
width: 65px;
&:before {
content:"";
float:left;
background: url('@{images_soc_location}/house-icon.svg');
width: 18px;
height: 18px;
padding: 0;
margin-right: 8px;
}
.no-svg &:before {
background-image: url('@{images_soc_location}/house-icon.png');
}
.active & {
color: @google-orange;
&:before {
background-position: 100%;
}
}
a:hover & {
&:before {
background: url('@{images_soc_location}/house-icon.svg');
background-position: 100%;
}
}
.no-svg a:hover &:before {
background-image: url('@{images_soc_location}/house-icon.png');
}
.active a:hover & {
color: @google-blue;
&:before {
background: url('@{images_soc_location}/house-icon.svg');
}
}
.no-svg .active a:hover &:before {
background-image: url('@{images_soc_location}/house-icon.png');
}
}
.project-info {
padding: 20px;
}
.project-description {
color: @web-black;
margin: 0 20px 2em;
font-size: .8em;
}
.project-image {
background: url('@{images_soc_location}/non-bg.png');
.background-size(cover);
padding: 20px;
height: 275px;
.box-sizing(border-box);
img {
max-height: 100%;
}
.active & {
background: url('@{images_soc_location}/active-bg.jpg');
.background-size(cover);
}
a:hover & {
background: url('@{images_soc_location}/non-bg-hover.png');
.background-size(cover);
.active & {
background: url('@{images_soc_location}/active-bg-hover.png');
.background-size(cover);
}
}
}
.active-banner {
display: none;
position: absolute;
top: 0;
right: 20px;
width: 100px;
background: #F19906;
.background-image(linear-gradient(top, #FFBD1F, #F19906));
color: white;
text-align: center;
margin: -10px 0 0 0;
p {
font-size: .55em;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 600;
margin: 10px 0 0 0;
}
.triangle-top {
background: url('@{images_soc_location}/arrow-top.svg');
position: absolute;
left: 0;
top: 0;
margin: 0 0 0 -12px;
width: 12px;
height: 10px;
}
.no-svg & .triangle-top {
background-image: url('@{images_soc_location}/arrow-top.png');
}
.triangle-bottom {
background: url('@{images_soc_location}/arrow-bottom.svg');
position: absolute;
left: 0;
bottom: 0;
margin: 0 0 -19px 0;
width: 100px;
height: 19px;
}
.no-svg & .triangle-bottom {
background-image: url('@{images_soc_location}/arrow-bottom.png');
}
.active & {
display: block;
}
}
.unactive-description {
display: none;
margin: 5px 0 0 0;
}
// special only one of them is active styles
.one-active {
@media @break-medium {
// this makes all projects the size of the small one
/////////////////////////////////////////////////////
.project {
width: 300px;
float: right;
margin-top: 70px;
min-height: 360px;
}
.project-image {
height: 190px;
}
.project-title {
padding: 0 10px;
}
.project-info {
padding: 20px 35px 0;
}
.project-description {
margin: 0 0 1.5em 0;
p {
display: none;
&.unactive-description {
display: block;
}
}
}
.project-button {
font-size: .9em;
width: 50px;
&:before {
background: url('@{images_soc_location}/house-icon-small.svg');
width: 14px;
height: 14px;
}
}
.no-svg & .project-button:before {
background-image: url('@{images_soc_location}/house-icon-small.png');
}
a:hover .project-button:before {
background: url('@{images_soc_location}/img/house-icon-small.svg');
width: 14px;
height: 14px;
background-position: 100%;
}
.no-svg & a:hover .project-button:before {
background-image: url('@{images_soc_location}/house-icon-small.png');
}
// this makes the active project look big
/////////////////////////////////////////////////////
.active {
&.project {
width: 660px;
z-index: 100;
height: 400px;
position: absolute;
left: 0;
top: 0;
margin-top: 10px;
a {
.clearfix;
}
}
.project-image {
float: left;
width: 400px;
height: 100%;
padding: 50px 40px;
}
.project-info {
text-align: left;
padding: 50px 20px 20px 420px;
}
.project-title {
padding: 0;
font-size: 1.95em;
}
.project-description {
margin: 0 0 1.5em 0;
p {
display: block;
&.unactive-description {
display: none;
}
}
}
.active-banner {
right: 140px;
}
.project-button {
position: absolute;
bottom: 20px;
font-size: 1em;
width: 60px;
&:before {
background: url('@{images_soc_location}/house-icon.svg');
width: 18px;
height: 18px;
background-position: 100%;
}
}
.no-svg & .project-button:before {
background-image: url('@{images_soc_location}/house-icon.png');
}
a:hover .project-button:before {
background: url('@{images_soc_location}/house-icon.svg');
width: 18px;
height: 18px;
background-position: 0;
}
.no-svg & a:hover .project-button:before {
background-image: url('@{images_soc_location}/house-icon.png');
}
}
}
}