add klickable service boxes

2 files changed, 29 insertions, 8 deletions

diff --git a/index.html b/index.html
index e441695..9f331d8 100644
--- a/index.html
+++ b/index.html
@@ -34,16 +34,21 @@
   {% for page in site.pages|sort(attribute='title') %}
     {% if page.path.startswith('services/') %}
       <li class="grid_8 {{ loop.cycle('omega', 'alpha') }}">
-        <div class="grid_2 alpha">
-          <img src="{{page.logo_url}}" alt="{{page.title}}" />
-        </div>
+        <div class="link">
+          <div class="grid_2 alpha">
+            <img src="{{page.logo_url}}" alt="{{page.title}}" />
+          </div>
 
-        <div class="gird_6 omega">
-          <a href="{{page.get_url()}}">{{page.title}}</a>
+          <div class="gird_6 omega">
+            <a href="{{page.get_url()}}">
+              <span class="link"></span>
+              {{page.title}}
+            </a>
 
-          <p>
-            {{page.description}}
-          </p>
+            <p>
+              {{page.description}}
+            </p>
+          </div>
         </div>
       </li>
     {% endif %}
diff --git a/static/css/main.css b/static/css/main.css
index 0572bc5..437f20d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -53,3 +53,19 @@ a:hover {
     color: #F00;
 }
 
+div.link {
+    position: relative;
+}
+
+div.link:hover {
+    background-color: lightblue;
+}
+
+span.link {
+    position:absolute;
+    width:100%;
+    height:100%;
+    top:0;
+    left: 0;
+    z-index: 1;
+}