diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less index 7fa54a0..bbae294 100644 --- a/static/src/less/homepage.less +++ b/static/src/less/homepage.less @@ -41,11 +41,12 @@ background-size: cover; .container { text-align: center; - margin-top: 20px; + margin-top: 27px; margin-bottom: 35px; font-size: 16px; h1 { margin-top: 0; + margin-bottom: 30px; color: white; font-size: 40px; } @@ -68,29 +69,6 @@ /* @group project-images */ .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 { color: white; margin: 0 auto; @@ -113,19 +91,60 @@ 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 { - padding: 15px; - padding-top: 20%; + padding: 10%; .transition(~"opacity 0.5s ease-in"); opacity: 0; background-color: rgba(0,0,0,0.6); text-align: center; - p, a.btn { - font-size: 12px; + @media screen and (max-width: @screen-xs-max) { + p, a.btn { + font-size: 15px; + margin-bottom: 13px; + } + h4 { + font-size: 33px; + } } - h4 { - font-size: 23px; + @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; + } } } }