tobib_services-hover.diff patch

3 files changed, 35 insertions, 20 deletions

diff --git a/index.html b/index.html
index edb373e..e6bc8d0 100644
--- a/index.html
+++ b/index.html
@@ -34,20 +34,15 @@
   {% for page in site.pages|sort(attribute='title') %}
     {% if page.path.startswith('services/') %}
       <li class="grid_8 {{ loop.cycle('omega', 'alpha') }} link">
-        <div class="grid_2 alpha">
+        <a href="{{page.get_url()}}" class="box">
           <img src="{{page.logo_url}}" alt="{{page.title}}" />
-        </div>
 
-        <div class="grid_6 omega">
-          <a href="{{page.get_url()}}">
-            <span class="link"></span>
-            {{page.title}}
-          </a>
+          <h4>{{page.title}}</h4>
 
           <p>
             {{page.description}}
           </p>
-        </div>
+        </a>
       </li>
     {% endif %}
   {% endfor %}
diff --git a/static/css/main.css b/static/css/main.css
index 57a993a..bdfb5b1 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -20,6 +20,10 @@ body {
     font-size: 120%;
 }
 
+#header * a {
+    text-decoration: none;
+}
+
 #content-top .about {
   text-align: right;
 }
@@ -44,7 +48,7 @@ footer {
 }
 
 a {
-    text-decoration: none;
+    text-decoration: underline;
     font-weight: bold;
     color: #000;
 }
@@ -53,15 +57,32 @@ a:hover {
     color: #F00;
 }
 
-li.link {
-    position: relative;
+a.box {
+    display: block;
+    /* reset */
+    color: black;
+    font-weight: normal;
+    text-decoration: none;
+    /* end reset */
+    float: left;
+    width: 90%;
+    height: 4em;
+    padding: 3%;
+    border-radius: 0.3em;
+    overflow: hidden;
 }
-
-span.link {
-    position:absolute;
-    width:100%;
-    height:100%;
-    top:0;
-    left: 0;
-    z-index: 1;
+a.box:hover {
+    background-color: lightblue;
+}
+a.box img {
+    width: 4em;
+    max-height: 4em;
+    margin: 0 1em 1em 0;
+    float: left;
+}
+a.box h4 {
+    font-weight: bold;
+    font-size: 1em;
+    margin: 0;
+    padding: 0;
 }
diff --git a/static/css/reset.css b/static/css/reset.css
index be9688f..b1bac14 100644
--- a/static/css/reset.css
+++ b/static/css/reset.css
@@ -134,7 +134,6 @@ strong {
 
 img {
   color: transparent;
-  font-size: 0;
   vertical-align: middle;
 /*
   For IE.