centering

2 files changed, 82 insertions, 56 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index f05b0ea..787d209 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -235,6 +235,18 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 .older  { color: #5D6464; }
 .quiet  { color: #787878; }
 
+#details .left, #details .right {
+  float: left;
+  padding-right: 20px;
+}
+#details_rapper {
+  width: 100%;
+  text-align: center;
+}
+#details {
+  display: inline-block;
+  text-align: left;
+}
 
 #comments, #comments tr {
   margin: 0; padding: 0;
@@ -281,6 +293,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 }
 #files td {
   padding: 3px 3px;
+  font-size: 11px;
 }
 #files .user a {
   text-decoration: none;
@@ -296,7 +309,9 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   text-align: right;
   border-top: 1px dotted #888;
 }
-
+#files .playing:before {
+  content: "> ";
+}
 
 @media (max-width: 1024px) {
   .threads td:nth-child(3) small {
@@ -308,4 +323,4 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
   .threads .size {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index 4dc8e21..05c9424 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -2,61 +2,72 @@
 
 <hr>
 
-<div id="details">
-  <table id="comments">
-    <script class="template" type="text/html">
-      <tr>
-        <td class="user">
-          <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a><br>
-          <a href="/profile/{{username}}">{{username}}</a>
-        </td>
-        <td colspan="2" class="comment">
-          <div>
-            {{comment}}
-          </div>
-          <span class="date">
-            {{date}} {{time}}
-          </span>
-          <span class="edit-links">
-            <a href="/comment/{{id}}/edit">edit</a> &middot;
-            <a href="/comment/{{id}}/remove">remove</a> &middot;
-            <a href="/comment/{{id}}/reply">reply</a>
-          </span>
-        </td>
-      </tr>
-    </script>
-  </table>
-
-  <div id="audio"></div>
+<div id="details_rapper">
+  <div id="details">
+    <div class="left">
+      <table id="comments">
+        <script class="template" type="text/html">
+          <tr>
+            <td class="user">
+              <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a><br>
+              <a href="/profile/{{username}}">{{username}}</a>
+            </td>
+            <td colspan="2" class="comment">
+              <div>
+                {{comment}}
+              </div>
+              <span class="date">
+                {{date}} {{time}}
+              </span>
+              <span class="edit-links">
+                <a href="/comment/{{id}}/edit">edit</a> &middot;
+                <a href="/comment/{{id}}/remove">remove</a> &middot;
+                <a href="/comment/{{id}}/reply">reply</a>
+              </span>
+            </td>
+          </tr>
+        </script>
+      </table>
+    </div>
+  
+    <div class="right">
+      <div class="gallery">
+        <script class="template" type="text/html">
+        </script>
+      </div>
+      <div id="audio"></div>
   
-  <table id="files">
-    <script class="template" type="text/html">
-      <tr class="row">
-        <td>
-          <a href="{{link}}" class="file">{{filename}}</a>
-        </td>
-        <td class="{{date_class}}">
-          {{date}}
-        </td>
-        <td class="{{date_class}}">
-          {{time}}
-        </td>
-        <td>
-          {{size}}
-        </td>
-        <td class="user">
-          <a href="/profile/{{username}}">{{username}}</a>
-        </td>
-      </tr>
-    </script>
-    <script class="templateTotal" type="text/html">
-      <tr class="total">
-        <td colspan="5">
-          total size: <span class="{{size_class}}">{{size}}</span>
-        </td>
-      </tr>
-    </script>
-  </table>
+      <table id="files">
+        <script class="template" type="text/html">
+          <tr class="row">
+            <td>
+              <a href="{{link}}" class="file">{{filename}}</a>
+            </td>
+            <td class="{{date_class}}">
+              {{date}}
+            </td>
+            <td class="{{date_class}}">
+              {{time}}
+            </td>
+            <td>
+              {{size}}
+            </td>
+            <td class="user">
+              <a href="/profile/{{username}}">{{username}}</a>
+            </td>
+          </tr>
+        </script>
+        <script class="templateTotal" type="text/html">
+          <tr class="total">
+            <td colspan="5">
+              total size: <span class="{{size_class}}">{{size}}</span>
+            </td>
+          </tr>
+        </script>
+      </table>
+    </div>
+
+  </div>
 </div>