comments enabled. doesn't look nice

templates/medium.cassius

@@ -4,16 +4,11 @@ img
   max-height: 28em !important
   width: auto !important
 
-.reply
-  margin-left: 50px
+.comment
+  background: #d64760 url('/static/css/images/overlay.png')
 
-#comment
-  margin-top: 5px
-  padding: 5px
-  border: 1px solid #ddd
-  border-radius: 6px
-  box-shadow: 0 0 3px #c4c4c4
-  background-color: #f5f5f5
+.reply
+  background: #47d65f url('/static/css/images/overlay.png')
 
 div #main
   margin-top: 0 !important

templates/medium.hamlet

@@ -25,11 +25,13 @@
     $if presence == True
       <a href=@{MediumSettingsR mediumId}>Change medium settings
  
-    $if null comments
+$if null comments
+  <div id="header" class="item" data-width="300">
+    <div class="inner">
       <p>There are no Comments yet
-    $else
+$else
   $forall (Entity commentId comment) <- comments
-        <div #comment>
+    <article class="item comment" data-width="300">
       <a href=@{ProfileR $ fromJust $ commentAuthor comment}>#{fromJust $ commentAuthorSlug comment}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime comment}:
       <hr>
       #{commentContent comment}
@@ -40,7 +42,7 @@
           <a href=@{CommentDeleteR commentId}>Delete this comment
     $forall (Entity replyId reply) <- replies
       $if commentParent reply == Just commentId
-            <div #comment class="reply">
+        <article class="item reply">
           <a href=@{ProfileR $ fromJust $ commentAuthor reply}>#{fromJust $ commentAuthorSlug reply}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
           <hr>
           #{commentContent reply}
@@ -48,12 +50,17 @@
           $if userId == (commentAuthor comment)
             <a href=@{CommentDeleteR replyId}>Delete this comment
 
-    $if userId /= Nothing
+$if userId /= Nothing
+  <div id="header" class="item" data-width="300">
+    <div class="inner">
       <form method=post enctype=#{enctype}>
         ^{commentWidget}
         <div>
           <input type=submit value="Post comment">
 
+<div id="header" class="item">
+  <div class="inner">
+    <h3>
       get a feed from this:
     <a href=@{CommentFeedAtomR mediumId}>Atom
     <a href=@{CommentFeedRssR mediumId}>RSS