Book Marx: Properly format bookmarks.

Change-Id: Idd6f2c4622d4b1a16c74b2d3af02e637625732fc

2 files changed, 20 insertions, 3 deletions

diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index fd224de..bb5d200 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -112,6 +112,7 @@ body > main {
   background-color: var(--main-bg-color);
   padding: 10px;
   border-left: 1px solid lightgray;
+  overflow: scroll;
 }
 
 body > footer {
@@ -127,4 +128,20 @@ body > footer {
 
 h1.bookmark-title {
   font-size: 1em;
-}
\ No newline at end of file
+  margin: 0;
+  padding: 0;
+}
+
+.bookmark-info {
+  font-style: italic;
+  font-size: smaller;
+  margin: 0;
+  padding: 0;
+}
+
+article.bookmark {
+  margin: 0.5em 0;
+  border: 1px solid lightcoral;
+  padding: 0.3em;
+  background: #fee;
+}
diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 4ad97fd..0d392c8 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -15,14 +15,14 @@
     <article class="bookmark">
       <header>
         <a href="{uri}"><h1 class="bookmark-title">{title}</h1></a>
-        <div>
+        <div class="bookmark-info">
           <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
           <span class="bookmark-owner">{owner.firstName} {owner.lastName}</span>
         </div>
       </header>
 
       <section class="bookmark-description">
-        {description}
+        {descriptionHtml.raw}
       </section>
     </article>
   {/with}