Improved style for HtmlFormat.

css/HtmlFormat.css

@@ -0,0 +1,100 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
+
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
+    display: block;
+
+}
+
+/* Let's go for the actual style */
+
+body {
+
+	background-color: #EEEEEE;
+	font-family: 'Noto Sans';
+
+}
+
+section {
+
+	background-color: #FFFFFF;
+	width: 90%;
+	margin: 30px auto;
+	padding: 10px 15px;
+
+	box-shadow: 0px 1px 2px rgba(0,0,0, 0.25);
+
+}
+
+section > h2 {
+
+	font-size: 200%;
+	font-weight: bold;
+	text-align: center;
+
+}
+
+h1.pagetitle {
+
+	font-size: 300%;
+	font-weight: bold;
+
+	text-align: center;
+	color: #2196F3;
+
+}
+a.backlink, a.backlink:link, a.backlink:visited, a.itemtitle, a.itemtitle:link, a.itemtitle:visited {
+
+	color: #2196F3;
+
+}
+
+.backlink {
+
+	display: block;
+	text-align: center;
+
+}
+
+section > div.content {
+
+	padding: 10px;
+
+}
+
+section > time {
+
+	color: #888;
+	font-size: 80%;
+
+}
+
+button.backbutton {
+
+	line-height: 1em;
+	color: #FFF;
+	font-weight: bold;
+	vertical-align: middle;
+	padding: 6px 12px;
+	margin: 12px auto 0px;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+	border-radius: 2px;
+	border: 1px solid transparent;
+	min-width: 140px;
+	background: #2196F3 none repeat scroll 0% 0%;
+	cursor: pointer;
+
+	width: calc(20% - 4px);
+
+}
+

formats/HtmlFormat.php

@@ -18,41 +18,21 @@ class HtmlFormat extends FormatAbstract{
         foreach($this->getDatas() as $data){
             $entryUri = is_null($data->uri) ? $uri : $data->uri;
             $entryTitle = is_null($data->title) ? '' : $this->sanitizeHtml(strip_tags($data->title));
-            $entryTimestamp = is_null($data->timestamp) ? '' : '<small><time datetime="' . date(DATE_ATOM, $data->timestamp) . '">' . date(DATE_ATOM, $data->timestamp) . '</time></small>';
-            $entryAuthor = is_null($data->author) ? '' : '<br><small>by: ' . $data->author . '</small>';
-            $entryContent = is_null($data->content) ? '' : '<p>' . $this->sanitizeHtml($data->content). '</p>';
+            $entryTimestamp = is_null($data->timestamp) ? '' : '<time datetime="' . date(DATE_ATOM, $data->timestamp) . '">' . date(DATE_ATOM, $data->timestamp) . '</time>';
+            $entryAuthor = is_null($data->author) ? '' : '<br /><p class="author">by: ' . $data->author . '</p>';
+            $entryContent = is_null($data->content) ? '' : '<div class="content">' . $this->sanitizeHtml($data->content). '</div>';
             $entries .= <<<EOD
 
-<div class="feeditem">
-	<h2><a href="{$entryUri}">{$entryTitle}</a></h2>
+<section class="feeditem">
+	<h2><a class="itemtitle" href="{$entryUri}">{$entryTitle}</a></h2>
 	{$entryTimestamp}
    {$entryAuthor}
    {$entryContent}
-</div>
+</section>
 
 EOD;
         }
 
-        $styleCss = <<<'EOD'
-body{
-	font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
-	font-size:10pt;
-	background-color:#aaa;
-	background-image:linear-gradient(#eee, #aaa);
-	background-attachment:fixed;
-}
-div.feeditem{border:1px solid black;padding:1em;margin:1em;background-color:#fff;}
-div.feeditem:hover { background-color:#ebf7ff; }
-h1 {border-bottom:dotted #bbb;margin:0 1em 1em 1em;}
-h2 {margin:0;}
-h2 a {color:black;text-decoration:none;}
-h2 a:hover {text-decoration:underline;}
-span.menu {margin-left:1em;}
-span.menu img {vertical-align:middle;}
-span.menu a { color:black; text-decoration:none;  padding:0.4em; }
-span.menu a:hover { background-color:white; }
-
-EOD;
 
         /* Data are prepared, now let's begin the "MAGIE !!!" */
         $toReturn = <<<EOD
@@ -61,12 +41,12 @@ EOD;
 <head>
 	<meta charset="UTF-8">
 	<title>{$title}</title>
-	<style type="text/css">{$styleCss}</style>
+	<link href="css/HtmlFormat.css" rel="stylesheet">
 	<meta name="robots" content="noindex, follow">
 </head>
 <body>
-	<h1>{$title}</h1>
-<span class="menu"><a href="./" onclick="window.history.back()">← back to rss-bridge</a> <a title="Get the ATOM feed" href="./?{$atomquery}"><img alt="feed" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURf+cCv/8+P/OhD2VurcAAAABdFJOU/4a4wd9AAAAbklEQVQI13XOMQ6AIAwFUGzCgLtHYPEUHMHBTwgTRyFOXoDdUT2ltCKbXV6b/iZV6qcMYmY1EJtw3MwFQRJU/Bfl6VaEzENQxbHIUxKTrY4Xgk4ct0EvcrYa9iTPGrxqbE3XHWSfRfIk1trp6O8+R38aBYbaAE4AAAAASUVORK5CYII="></a></span>
+	<h1 class="pagetitle">{$title}</h1>
+	<a class="backlink" href="./"><button class="backbutton">← back to rss-bridge</button></a>
 {$entries}
 </body>
 </html>