more desiiiiiiiign

1 files changed, 60 insertions, 27 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 315cad6..3b389d2 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -7,6 +7,10 @@ body {
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
 	padding: 20px 30px;
+	transition: opacity 200ms;
+}
+body.loading {
+  opacity: 0;
 }
 * {
   box-sizing: border-box;
@@ -45,7 +49,6 @@ h1 {
   margin: 0;
 }
 .subtitle {
-  display: none;
   margin-top: 5px;
   margin-bottom: 10px;
 }
@@ -98,7 +101,7 @@ table, tr {
 }
 #sidebar {
   width: 300px;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 #content {
   width: -webkit-calc(100% - 310px);
@@ -108,6 +111,9 @@ table, tr {
 #content .ledger {
   width: 100%;
 }
+#details .ledger {
+  width: auto;
+}
 
 #searchbox.bluebox {
   text-align: left;
@@ -185,7 +191,6 @@ table, tr {
 }
 
 .ledger {
-  width: 100%;
 }
 .ledger .row td {
   text-align: right;
@@ -302,11 +307,10 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 }
 #details .left {
   vertical-align: top;
-  max-width: 50%;
 }
 #details .right {
-  max-width: 50vw;
   vertical-align: top;
+  width: 50%;
 }
 
 .comment {
@@ -314,12 +318,10 @@ 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: 450px;
 }
 #comments {
-  width: 600px;
-}
-#comments tr {
+  width: 100%;
+  max-width: 600px;
   padding-right: 20px;
 }
 #comments tr .user {
@@ -330,7 +332,7 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
   vertical-align: top;
 }
 #comments tr .user .avatar {
-  border: 1px solid;
+  box-shadow: 0 1px 0.5px rgba(32,16,16,0.4);
   width: 40px;
   height: 40px;
   background-size: cover;
@@ -354,6 +356,19 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 tr:nth-child(even) td.comment { background-color: #f3f1f2; }
 tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 
+code {
+  display: block;
+  white-space: pre;
+  width: 100%;
+  overflow-x: hidden;
+  background: #fefefe;
+  padding: 5px;
+  border: 1px solid #ddd;
+}
+code br {
+  display: none;
+}
+
 #thread_form form {
   width: 530px;
 }
@@ -373,7 +388,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   font-size: 15px;
   margin: 10px 0;
 }
-#thread_form .inputs {
+.inputs {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -384,21 +399,47 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   margin: 0;
 }
 
+#comment_form {
+  width: 100%;
+  max-width: 600px;
+  text-align: right;
+}
 #comment_form form {
-  width: 530px;
-  margin-top: 5px;
-  margin-left: 50px;
-  padding-right: 10px;
+  float: right;
+  width: 100%;
+  max-width: 530px;
+  padding-top: 5px;
+  padding-right: 20px;
 }
 #comment_form textarea {
   width: 100%;
-  height: 240px;
   font-family: 'Trebuchet MS', sans-serif;
   padding: 5px;
   font-size: 15px;
+  background: white;
+  border-color: #ddd;
+  height: 240px;
 }
-#comment_form input[type=submit] {
-  float: right;
+#comment_form textarea::placeholder {
+  color: #000;
+}
+#comment_form textarea:invalid {
+  background: transparent;
+  border-color: transparent;
+  height: 30px;
+  opacity: 0.4;
+}
+#comment_form.focused textarea {
+  background: white;
+  height: 240px;
+  transition: height 100ms cubic-bezier(0,0,0,1);
+  opacity: 1;
+}
+#comment_form .inputs {
+  opacity: 0.4;
+}
+#comment_form.focused .inputs {
+  opacity: 1;
 }
 
 #files, #files tr {
@@ -440,7 +481,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   padding: 0 0 12px 0;
 }
 #gallery div a:first-child .thumb {
-  max-width: 450px;
+  max-width: 100%;
   max-height: 450px;
 }
 #gallery .thumb {
@@ -513,18 +554,10 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   text-align: right;
   padding-right: 3px;
 }
-#messages tr td:nth-child(2) {
-  padding: 5px;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
 #messages tr td:nth-child(3) {
   text-align: center;
   padding-left: 3px;
 }
-#messages .row td:nth-child(2) {
-  border-bottom: 1px solid;
-}
 #boxes table {
   width: 200px;
   font-size: 13px;