More styling

src/Main.hs

@@ -329,9 +329,12 @@ renderRoot globalState = do
     Here are some guidelines/observations/etc that probably make sense:
 
       * sort pros/cons by importance
+
       * if you don't like something for any reason, edit it
+
       * if you're unsure about something, still write it
         (just warn others that you're unsure)
+
       * if you have useful information of any kind that doesn't fit,
         add it to the category notes
 
@@ -428,7 +431,7 @@ renderItemInfo editable item =
   div_ $ do
     this <- thisNode
     case editable of
-      Editable -> h3_ $ do
+      Editable -> span_ [style_ "font-size:150%"] $ do
         -- If the library is on Hackage, the title links to its Hackage page;
         -- otherwise, it doesn't link anywhere. Even if the link field is
         -- present, it's going to be rendered as “(site)”, not linked in the
@@ -472,11 +475,7 @@ renderItemTraits :: Editable -> Item -> HtmlT IO ()
 renderItemTraits editable item =
   div_ [class_ "traits"] $ do
     this <- thisNode
-    case editable of
-      Normal -> textButton "edit" $
-        JS.setItemTraitsMode (this, item^.uid, Editable)
-      Editable -> textButton "edit off" $
-        JS.setItemTraitsMode (this, item^.uid, Normal)
+    div_ [class_ "traits-groups-container"] $ do
       div_ [class_ "traits-group"] $ do
         p_ "Pros:"
         case editable of
@@ -499,6 +498,11 @@ renderItemTraits editable item =
               thisNode
             textInput [placeholder_ "add con"] $
               JS.addCon (listNode, item^.uid, inputValue) <> clearInput
+    case editable of
+      Normal -> textButton "edit pros/cons" $
+        JS.setItemTraitsMode (this, item^.uid, Editable)
+      Editable -> textButton "edit off" $
+        JS.setItemTraitsMode (this, item^.uid, Normal)
 
 renderTrait :: Editable -> Uid -> Trait -> HtmlT IO ()
 renderTrait Normal _itemId trait = li_ (renderMarkdownLine (trait^.content))

static/css.css

@@ -13,18 +13,20 @@ body {
 .category {
   margin-top: 3em; }
 
-.items {
+.item {
+  background-color: #f0f0f0;
+  margin-top: 20px;
+  padding: 10px 15px; }
+
+.traits-groups-container {
   display: flex; }
 
-.item {
-  border: 1px solid;
-  margin: 5px; }
-
-.traits {
-  display: flex }
-
 .traits-group {
-  margin: 0px 5px; }
+  margin: 0px 5px;
+  flex: 1; }
+
+.traits-group > ul {
+  padding-left: 1em; }
 
 .traits-group > ul li {
   margin: 10px 0px; }