css: make fancy post list

diff --git a/css/default.css b/css/default.css
index 1b49794..cc0a473 100644 (file)
--- a/css/default.css
+++ b/css/default.css
@@ -20,6 +20,10 @@ h2 {
        font-size: 21px;
 }
 
+h3 {
+       font-size: 17px;
+}
+
 a {
        color: #5B756C;;
        text-decoration: none;
@@ -62,6 +66,30 @@ math {
        font-family: 'Asana Math', DejaVu Sans, Helvetica;
 }
 
+.postlist {
+       font-size: 90%;
+       margin-left: 170px;
+       margin-bottom: 20px;
+}
+
+h3.pldate {
+       font-size: 90%;
+       position: absolute;
+       width: 170px;
+       max-width: 170px;
+       margin-left: -170px;
+       margin-top: 4px;
+}
+
+p.pltitle {
+       position: relative;
+}
+
+p.plexcerpt {
+       font-size: 90%;
+       margin-top: -10px;
+}
+
 .info {
        color: #889;
        font-size: 14px;

diff --git a/templates/post-list.html b/templates/post-list.html
index a1400ef..6bf6948 100644 (file)
--- a/templates/post-list.html
+++ b/templates/post-list.html
@@ -1,8 +1,11 @@
-<ul>
-    $for(posts)$
-        <li>
-            <a href="$url$">$title$</a> - $date$
-        </li>
-    $endfor$
-</ul>
-
+$for(posts)$
+    <div class="postlist">
+        <h3 class="pldate">$date$</h3>
+               <p class="pltitle"><a href="$url$">$title$</a></p>
+               $if(excerpt)$
+               <p class="plexcerpt">
+               $excerpt$
+               </p>
+               $endif$
+    </div>
+$endfor$