medium site now looks fine

Handler/Medium.hs

@@ -33,9 +33,9 @@ getMediumR mediumId = do
       (commentWidget, enctype) <- generateFormPost $ commentForm userId userSl mediumId Nothing
       comments <- runDB $ selectList [CommentOrigin ==. mediumId, CommentParent ==. Nothing] [Desc CommentTime]
       replies <- runDB $ selectList [CommentOrigin ==. mediumId, CommentParent !=. Nothing] [Desc CommentTime]
-      dataWidth <- case mediumWidth medium >= 750 of
-        True -> return 750
-        False -> return $ (mediumWidth medium) + 53
+      dataWidth <- case mediumWidth medium >= 850 of
+        True -> return 850
+        False -> return $ (mediumWidth medium)
       formLayout $ do
         setTitle $ toHtml ("Eidolon :: Medium " `T.append` (mediumTitle medium))
         $(widgetFile "medium")

templates/medium.cassius

@@ -1,15 +1,39 @@
+/*templates/medium.cassius*/
+
 img
   position: relative !important
   max-width: 100% !important
-  max-height: 28em !important
   width: auto !important
+  display: block !important
+  margin-left: auto !important
+  margin-right: auto !important
 
 .comment
+  border: 5px solid rgb(255, 255, 255)
+  padding: 2em 3em
   background: #d64760 url('/static/css/images/overlay.png')
 
 .reply
   background: #47d65f url('/static/css/images/overlay.png')
 
+.image
+  width: 100% !important
+
+#wrapper
+  overflow: auto !important
+
+#reel
+  width: 90% !important
+  max-height: auto !important
+
+#reel .item
+  float: none !important
+  display: inline-block !important
+  width: 100% !important
+
 div #main
-  margin-top: 0 !important
-  top : 20% !important
+  margin-top: 60px !important
+  position: static !important
+
+#footer
+  position: static !important

templates/medium.hamlet

@@ -1,9 +1,11 @@
-<div id="header" class="item" data-width=#{dataWidth}>
+<div data-width="1000">
+  <div id="header" class="item" data-width="1000">
     <div class="inner">
       <h1>#{mediumTitle medium}
       <p>
         by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a>
-
+  <div id="header" class="item image" data-width=#{dataWidth}>
+    <div class="inner">
       <img src=#{mediumPath medium}>
 
   <div id="header" class="item" data-width="400">
@@ -14,6 +16,7 @@
         #{mediumDescription medium}
 
       <div class="tags">
+        <p>
           Tags:
           <ul>
             $if null (mediumTags medium)
@@ -29,9 +32,9 @@ $if null comments
     <div id="header" class="item" data-width="300">
       <div class="inner">
         <p>There are no Comments yet
-$else
+
 $forall (Entity commentId comment) <- comments
-    <article class="item comment" data-width="300">
+  <article class="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}
@@ -42,8 +45,8 @@ $else
         <a href=@{CommentDeleteR commentId}>Delete this comment
   $forall (Entity replyId reply) <- replies
     $if commentParent reply == Just commentId
-        <article class="item reply">
-          <a href=@{ProfileR $ fromJust $ commentAuthor reply}>#{fromJust $ commentAuthorSlug reply}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
+      <article class="comment reply">
+        <a href=@{ProfileR $ fromJust $ commentAuthor reply}>#{fromJust $ commentAuthorSlug reply}</a> replied on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
         <hr>
         #{commentContent reply}
         <hr>
@@ -51,19 +54,18 @@ $else
           <a href=@{CommentDeleteR replyId}>Delete this comment
 
 $if userId /= Nothing
-  <div id="header" class="item" data-width="300">
+  <div id="header" class="item" data-width="1000">
     <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:
+      Get a feed from this:
     <a href=@{CommentFeedAtomR mediumId}>Atom
     <a href=@{CommentFeedRssR mediumId}>RSS
 
 <style type="text/css">
-  body{background-image: url('/static/css/images/overlay.png'),	-webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('#{mediumPath medium}');}
+  body{background-image: url('/static/css/images/overlay.png'),	-webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('#{mediumPath medium}');background-attachment:fixed;}