From 73591633baf380de75870d51926287622378c46a Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sat, 21 Nov 2015 21:30:16 +0000
Subject: [PATCH] Restyled project images

---
 static/src/less/homepage.less | 79 ++++++++++++++++++++++-------------
 1 file changed, 49 insertions(+), 30 deletions(-)

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;
+        }
       }
     }
   }