Changed appearance of Homepage headlines and toolbox image captions

diff --git a/styles.css b/styles.css
index f49c6ee..e791ee0 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -182,7 +182,7 @@ body {
     }
 .imagecaption {
     padding: 10px;
-    font-size: 12px;
+    font-size: 13px;
     font-style: italic;
     }
 /* Block / Home Page Headlines */
@@ -192,10 +192,26 @@ body {
     }
 #hHlines img {
     display: block;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
     }
 #hHlines li {
     /* float: left; */
     }
+.hHlinesItem i {
+    font-style: normal;
+    padding: 5px;
+    font-size: 14px;
+    display: block;
+    }
+
+.hHlinesItem a {
+    display: block;
+    }
+.hHlinesItem a:hover {
+    /* background: rgba(241, 235, 205, .5); */
+    /* text-shadow: 1px 1px rgba(0, 0, 0, .2); */
+    color: black;
+    }
 /* Footer */
 #footer {
     background: #f1ebcd;

diff --git a/templates/template.html b/templates/template.html
index 90eb022..fbb5219 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -97,10 +97,10 @@
                         <section id="hHlines" class="opensearchserver.ignore">
                             <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
                                 <li class="hHlinesItem" flexy:foreach="headlines,v">
-                                    <a href="{v[href]:h}" class="hHlinesImageLink" target="_blank">
-                                        <img src="{v[img]:h}" alt="Home page headline image">
+                                    <a href="{v[href]:h}">
+                                        <img src="{v[img]:h}" alt="">
+                                        <i>{v[header]:h}</i>
                                     </a>
-                                    <a href="{v[href]:h}" class="hHlinesHeaderLink">{v[header]:h}</a>
                                 </li><!-- /.hHlinesItem -->
                             </ul>
                         </section>