From fea20afc43eb35490dcd03f25e0430bae3bc6588 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Orsini <orsinije@fr.ibm.com>
Date: Sun, 15 Oct 2017 22:09:34 +0200
Subject: [PATCH] improved styling

---
 war/src/main/java/pnews/HTML.java | 13 +++++--
 war/src/main/resources/style.css  | 71 +++++++++++++++++++++++++--------------
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/war/src/main/java/pnews/HTML.java b/war/src/main/java/pnews/HTML.java
index 74df5e7..ee367dc 100644
--- a/war/src/main/java/pnews/HTML.java
+++ b/war/src/main/java/pnews/HTML.java
@@ -32,23 +32,32 @@ public class HTML {
 	private static void append(StringBuffer buf, Article a) {		
 		buf.append("<div class='article'>\n");
 		
-		buf.append("<h2>");
+		buf.append("<div class='article-image'>\n");
 		if (a.thumbnail != null) {
 		        buf.append("<img class='left' src='");
 		        buf.append(a.thumbnail);
 		        buf.append("'/>\n");
 		}
+		buf.append("</div>\n");
+		
+		buf.append("<div class='article-content'>\n");
+
+		buf.append("<div class='article-title'>\n");
 		appendA(buf, a.title, "redirect?url="+a.link, null);
-		buf.append("</h2>\n");
+		buf.append("</div>\n");
 		
 		buf.append("<div class='article-info'>" + a.website + " - " + a.publicationDate + "</div>");
 		
+		buf.append("<div class='article-description'>\n");
 		if (a.description != null) {
 		        buf.append("<p>");
 		        buf.append(a.description);
 		        buf.append("</p>");
 		}
+                buf.append("</div>\n");		
 		
+                buf.append("</div>\n");
+                
 		buf.append("</div>\n");		
 	}
 	
diff --git a/war/src/main/resources/style.css b/war/src/main/resources/style.css
index 85a880d..13369b5 100644
--- a/war/src/main/resources/style.css
+++ b/war/src/main/resources/style.css
@@ -6,8 +6,8 @@ a {
 body {
         margin: 0 0 0 0;
         padding: 1em 1em 1em 1em;
-        background-color: #eee;
-        font-family: sans-serif;
+        background-color: #fefefe;
+        font-family: Helvetica,Arial,sans-serif;
 }
 
 nav {
@@ -16,6 +16,18 @@ nav {
         padding: 0 0 0 0;
 }
 
+nav ul {
+        list-style-type: none;
+        padding: 0 0 0 0;
+}
+
+nav ul li {
+        display: inline;
+        margin: 0em 1em 0 0;
+        padding: 0 0 0 0;
+        text-transform: uppercase;
+}
+
 a.active {
         text-decoration: none;
         border-bottom: 4px solid black;
@@ -26,44 +38,51 @@ div {
         padding: 0 0 0 0;
 }
 
-div.article {
-        margin-bottom: 1em;
-}
-
 .article-info {
+        white-space: nowrap;
         font-size: 80%;
         color: #bbb;
-}
-
-img {
-        margin: 0em 1em 1em 0em;
-        padding: 0 0 0 0;
-        width: 8em;
+        margin: 0;
+        padding: 0;
 }
 
 p {
-        margin: 1em 1em 1em 1em;
+        margin: 0;
         padding: 0 0 0 0;
 }
 
-.left {
+.article-image img {
         float: left;
+        position: relative;
+        width: 10em;
+        padding: 0em;
+        margin: 0 1em 0 0;
 }
 
-h2 {
-        clear: left;
-        margin: 0 0 0 0;
-        padding: 0 0 0 0;
+.article-content {
 }
 
-nav ul {
-        list-style-type: none;
-        padding: 0 0 0 0;
+.article-title {
+        font-size: 120%;
+        font-weight: bold;
+
+        height: 2em;
+        overflow: hidden;
+
+        margin: 0;
+        padding: 0;
 }
 
-nav ul li {
-        display: inline;
-        margin: 0em 1em 0 0;
-        padding: 0 0 0 0;
-        text-transform: uppercase;
+.article-description {
+        font-size: 100%;
+        height: 3.2em;
+        overflow: hidden;
+        padding: 0;
+        margin: 0;
+}
+
+div.article {
+        clear:left;
+        padding: 0;
+        margin: 0 0 2em 0;
 }
-- 
2.7.4