improved styling

diff --git a/war/src/main/java/pnews/HTML.java b/war/src/main/java/pnews/HTML.java
index 74df5e7..ee367dc 100644 (file)
--- 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");
                
        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");
                }
                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);
                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-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>");
                }
                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");         
        }
        
                buf.append("</div>\n");         
        }
        

diff --git a/war/src/main/resources/style.css b/war/src/main/resources/style.css
index 85a880d..13369b5 100644 (file)
--- 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;
 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 {
 }
 
 nav {


@@ -16,6 +16,18 @@ nav {
         padding: 0 0 0 0;
 }
 
         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;
 a.active {
         text-decoration: none;
         border-bottom: 4px solid black;


@@ -26,44 +38,51 @@ div {
         padding: 0 0 0 0;
 }
 
         padding: 0 0 0 0;
 }
 

-div.article {
-        margin-bottom: 1em;
-}
-

 .article-info {
 .article-info {

+        white-space: nowrap;

         font-size: 80%;
         color: #bbb;
         font-size: 80%;
         color: #bbb;

-}
-
-img {
-        margin: 0em 1em 1em 0em;
-        padding: 0 0 0 0;
-        width: 8em;
+        margin: 0;
+        padding: 0;

 }
 
 p {
 }
 
 p {

-        margin: 1em 1em 1em 1em;
+        margin: 0;

         padding: 0 0 0 0;
 }
 
         padding: 0 0 0 0;
 }
 

-.left {
+.article-image img {

         float: left;
         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;

 }
 }