show post metadata and thread list

1 files changed, 51 insertions, 17 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 24ed78e..08d25d3 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -133,28 +133,45 @@ table, tr {
 #hoots tr:nth-child(odd) td:nth-child(2) { background-color: #f3f1f2; }
 #hoots tr:nth-child(even) td:nth-child(2) { background-color: #e3e8e3; }
 
-#threads th {
+#threads .keyword td {
   vertical-align: top;
   font-weight: normal;
   padding-right: 4px;
   line-height: 15px;
+  padding-top: 10px;
 }
-#threads th b {
+#threads .keyword:first-child td {
+  padding-top: 5px;
+}
+#threads .keyword td:first-child {
+  text-align: right;
+}
+#threads .keyword td b {
   font-weight: bold;
   font-size: 14px;
 }
+#threads .keyword:first-child td:nth-child(2) {
+  border-top: 0;
+}
+#threads .keyword td:nth-child(2) {
+  border-top: 1px solid #b3b3b3;
+  border-bottom: 1px solid #b3b3b3;
+}
+#threads .row:last-child td:nth-child(2) {
+  border-bottom: 1px solid #b3b3b3;
+}
 
-.ledger td {
+.ledger .row td {
   text-align: right;
   padding-left: 4px;
   padding-right: 4px;
 }
-.ledger td:nth-child(1) a {
+.ledger .row td:nth-child(1) a {
   margin-left: 10px;
   color: #444;
   text-decoration: none;
 }
-.ledger td:nth-child(2) {
+.ledger .row td:nth-child(2) {
   text-align: left;
   font-family: Georgia, serif;
   font-size: 120%;
@@ -165,10 +182,10 @@ table, tr {
   max-width: 30vw;
   white-space: nowrap;
 }
-.ledger tr:first-child td:nth-child(2) {
+.ledger tr.row:first-child td:nth-child(2) {
   border-top: 1px solid #b6aeab;
 }
-.ledger tr:last-child td:nth-child(2) {
+.ledger tr.row:last-child td:nth-child(2) {
   border-bottom: 1px solid #b6aeab;
 }
 .ledger td:nth-child(2) a {
@@ -178,10 +195,10 @@ table, tr {
   text-align: center;
 }
 
-tr:nth-child(odd).row	td { background-color: #e6f0f0; }
-tr:nth-child(odd).row:hover	td { background-color: #d8e0ec; color: #000000; }
-tr:nth-child(even).row td { background-color: #e0e8e8; }
-tr:nth-child(even).row:hover td { background-color: #d8e0ec; color: #000000; }
+tr:nth-child(odd).file	td { background-color: #e6f0f0; }
+tr:nth-child(odd).file:hover	td { background-color: #d8e0ec; color: #000000; }
+tr:nth-child(even).file td { background-color: #e0e8e8; }
+tr:nth-child(even).file:hover td { background-color: #d8e0ec; color: #000000; }
 
 tr:nth-child(odd) td.row	{ background-color: #e6f0f0; }
 tr:nth-child(odd) td.row:hover	{ background-color: #d8e0ec; color: #000000; }
@@ -250,10 +267,6 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 .older  { color: #5D6464; }
 .quiet  { color: #787878; }
 
-#details .left {
-  padding-right: 20px;
-  vertical-align: top;
-}
 #details_rapper {
   width: 100%;
   text-align: center;
@@ -261,6 +274,11 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 #details {
   display: inline-block;
   text-align: left;
+  width: 100%;
+}
+#details .left {
+  vertical-align: top;
+  max-width: 50%;
 }
 #details .right {
   max-width: 50vw;
@@ -272,6 +290,13 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
+  min-width: 400px;
+}
+#comments {
+  max-width: 450px;
+}
+#comments tr {
+  padding-right: 20px;
 }
 #comments tr .user {
   margin: 0;
@@ -280,8 +305,14 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
   font-size: 11px;
   vertical-align: top;
 }
-#comments tr .user img {
+#comments tr .user .avatar {
   border: 1px solid;
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  margin: 0 auto;
+  margin-bottom: 2px;
+  background-position: center center;
 }
 #comments tr:first-child .comment {
   border-top: 1px solid #ccc;
@@ -337,6 +368,9 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   text-align: center;
   padding: 0 0 12px 0;
 }
+#gallery .thumb {
+  max-width: 150px;
+}
 
 #messages {
   width: 100%;
@@ -376,7 +410,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   line-height: 15px;
   padding: 20px;
 }
-@media (max-width: 1024px) {
+@media (max-width: 700px) {
   #threads td:nth-child(3) small {
     display: none;
   }