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

Restyled project images

Browse source
This commit is contained in:
Jake Howard 2015-11-21 21:30:16 +00:00
parent df78d39217
commit 73591633ba
1 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
static/src/less/homepage.less
View file

@ -41,11 +41,12 @@
background-size: cover; background-size: cover;
.container { .container {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 27px;
margin-bottom: 35px; margin-bottom: 35px;
font-size: 16px; font-size: 16px;
h1 { h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 30px;
color: white; color: white;
font-size: 40px; font-size: 40px;
} }
@ -68,29 +69,6 @@
/* @group project-images */ /* @group project-images */
.project-image { .project-image {
@media screen and (max-width: @screen-xs-max) {
.wrapper,
.wrapper .project {
height: 275px;
width: 275px;
}
}
@media screen and (min-width: @screen-sm-min) {
.wrapper,
.wrapper .project {
height: 200px;
width: 200px;
}
}
@media screen and (min-width: @screen-md-min) {
.wrapper,
.wrapper .project {
height: 280px;
width: 280px;
}
}
.wrapper { .wrapper {
color: white; color: white;
margin: 0 auto; margin: 0 auto;
@ -113,19 +91,60 @@
background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg); background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
} }
@media screen and (max-width: @screen-xs-max) {
&, & .project {
height: 240px;
width: 240px;
margin-bottom: 15px;
}
}
@media screen and (min-width: @screen-sm-min) {
&, & .project {
height: 210px;
width: 210px;
}
}
@media screen and (min-width: @screen-md-min) {
&, & .project {
height: 280px;
width: 280px;
}
}
& .project { & .project {
padding: 15px; padding: 10%;
padding-top: 20%;
.transition(~"opacity 0.5s ease-in"); .transition(~"opacity 0.5s ease-in");
opacity: 0; opacity: 0;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
text-align: center; text-align: center;
@media screen and (max-width: @screen-xs-max) {
p, a.btn { p, a.btn {
font-size: 12px; font-size: 15px;
margin-bottom: 13px;
} }
h4 { h4 {
font-size: 23px; font-size: 33px;
}
}
@media screen and (min-width: @screen-sm-min) {
p, a.btn {
font-size: 16px;
}
h4 {
font-size: 27px;
}
}
@media screen and (min-width: @screen-md-min) {
padding: 13%;
p, a.btn {
font-size: 17px;
margin-bottom: 15px;
}
h4 {
font-size: 38px;
margin-bottom: 15px;
}
} }
} }
} }