updating css...

1 files changed, 58 insertions, 55 deletions

diff --git a/views/partials/hootstream.ejs b/views/partials/hootstream.ejs
index 7da1c13..d1351c9 100644
--- a/views/partials/hootstream.ejs
+++ b/views/partials/hootstream.ejs
@@ -10,7 +10,7 @@
 
     <script class="hootTemplate" type="text/html">
       <div class="{{className}}">
-        <a class="userLink" href="/profile/{{username}}">
+        <a class="userLink" href="/profile/{{username}}" style="opacity: {{age_opacity}}">
           {{username}}
         </a>
         <a class="avatarLink" href="/profile/{{username}}">
@@ -34,17 +34,17 @@
     </script>
 
     <script class="fileTemplate" type="text/html">
-      <tr class="file">
-        <td class="filename">
+      <div class="fileRow">
+        <div class="filename" style="opacity: {{age_opacity}}">
           <a href="{{link}}" title="{{id}}" class="file">{{filename}}</a>
-        </td>
-        <td class="size">
+        </div>
+        <div class="size">
           {{size}}
-        </td>
-        <td class="age {{date_class}}">
+        </div>
+        <div class="age {{date_class}}">
           {{age}}
-        </td>
-      </tr>
+        </div>
+      </div>
     </script>
 
     <script class="imageTemplate" type="text/html">
@@ -82,7 +82,7 @@
   #hootstream form button {
     margin: 0;
     padding: 0.25rem;
-    margin-left: 0.25rem;
+    margin-left: 0.5rem;
     min-width: 2.5rem;
   }
   #hootevents {
@@ -102,7 +102,7 @@
     justify-content: flex-end;
     align-items: flex-start;
     text-align: right;
-    margin: 0px 0.5rem 0px 0px;
+    margin: 0px 0.75rem 0px 0px;
   }
   #hootevents .userLink {
     color: #def;
@@ -172,54 +172,47 @@
   }
 
   /** Files */
-  #hootevents table,
-  #hootevents tr,
-  #hootevents td {
-    padding: 0;
-    margin: 0;
-  }
-  #hootevents table {
-    width: calc(100% - 6.75rem);
+  #hootevents .fileList {
+    width: calc(100% - 8.25rem + 1px);
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
     margin-left: 8rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
   }
-  #hootevents table td:first-of-type {
-    border-left: 1px solid;
-    padding-right: 0.5rem;
+  #hootevents .fileRow {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  #hootevents .fileRow .age {
+    margin-right: 0;
   }
-  #hootevents table td.filename {
+  #hootevents .fileRow .filename {
+    flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  #hootevents table td {
-    border-top: 1px solid;
+  #hootevents .fileRow div {
+    color: rgba(192,192,192,1.0);
+    background: transparent;
+    border-top: 1px solid rgba(96,96,96,0.5);
     padding: 0.5rem;
     white-space: nowrap;
   }
-  #hootevents table td:last-of-type {
-    border-right: 1px solid;
-  }
-  #hootevents table tr:last-of-type td {
+  #hootevents .fileRow:last-of-type {
     border-bottom: 1px solid rgba(96,96,96,0.5);
   }
-
-  #hootevents table {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+  #hootevents .fileRow {
+    border-left: 1px solid rgba(96,96,96,0.5);
   }
-  #hootevents table td {
-    color: rgba(192,192,192,1.0);
-    border-color: rgba(96,96,96,0.5);
-    background: transparent;
-  }
-  #hootevents table td:first-of-type {
-    border-color: rgba(96,96,96,0.5);
+  #hootevents .fileRow {
+    border-right: 1px solid rgba(96,96,96,0.5);
   }
-  #hootevents table td:last-of-type {
-    border-color: rgba(96,96,96,0.5);
+  #hootevents .fileRow div {
+    position: relative;
   }
-  #hootevents table td { height: 45px; position: relative; }
-  #hootevents table td::after {
+  #hootevents .fileRow div::after {
     content: ''; 
     width: 100%; 
     height: 100%;
@@ -230,9 +223,6 @@
     left: 0;
     z-index: -1;
   }
-  #hootevents table td.age {
-    align-items: center;
-  }
 
   /** Misc */
   #hootevents code, #hootevents pre {
@@ -246,13 +236,14 @@
   /** HOOT FORM */
 
   #hootform {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
+    padding: 0.5rem;
   }
   #hootform input[type="text"] {
     border-top: 0;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(127,127,127,0.2);
+    border-bottom: 1px solid rgba(127,127,127,0.5);
     padding-bottom: 3px;
     font-size: 14px;
     font-family: "Trebuchet MS", sans-serif;
@@ -287,7 +278,12 @@
 
   /** MEDIA QUERY: PHONE */
   @media (max-width: 700px) {
-    html, body { overflow-x: hidden; }
+    html, body {
+      overflow-x: hidden;
+    }
+    #hootform {
+      margin-bottom: 0rem;
+    }
     #hootstream {
       margin-top: 1rem;
     }
@@ -299,12 +295,19 @@
       width: auto;
       margin-left: 2rem;
     }
-    #hootevents table {
-      margin-left: 2rem;
-      width: calc(100% - 3rem);
+    #hootevents .avatarLink {
+      margin-left: 0.25rem;
     }
-    #hootform {
+    #hootevents .fileList {
+      margin-top: 0.5rem;
       margin-bottom: 1rem;
+      margin-left: 1.75rem;
+      width: calc(100% - 2rem);
+    }
+    #hootevents code, #hootevents pre {
+      max-width: calc(100vw - 5.75rem);
+      margin-right: 0;
+      padding: 0.25rem 0.25rem 0.75rem 0.25rem;
     }
   }
 </style>
\ No newline at end of file