Message timestamps

2 files changed, 38 insertions, 16 deletions

diff --git a/static/index.html b/static/index.html
index b411bb2..77718dc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -16,7 +16,7 @@
       </form>
     </div>
     <div id="footer">
-      <p>created by tempest-vi</p>
+      <p>created by tempest</p>
       <button type="button" popovertarget="settings_modal" popovertargetaction="toggle">Settings</button>
       <dialog popover id="settings_modal">
         <iframe width="100%" height="100%" style="border: none;" src="/settings"></iframe>
diff --git a/static/style.css b/static/style.css
index 9957ac9..7f50b68 100644
--- a/static/style.css
+++ b/static/style.css
@@ -23,17 +23,25 @@ body {
 body > div#messages {
   order: -1;
   display: grid;
-  grid-template-columns: fit-content(120px) 1fr fit-content(80px);
+  grid-template-columns: fit-content(60px) fit-content(120px) 1fr fit-content(80px);
 }
 
 .message {
   display: contents;
 }
 
-.message .nick {
+.message .time {
+  grid-column: 1 / 2;
   padding: 4px 8px;
   padding-left: 16px;
-  grid-column: 1 / 2;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.message .nick {
+  padding: 4px 8px;
+  grid-column: 2 / 3;
   overflow-x: hidden;
   text-wrap: nowrap;
   text-overflow: ellipsis;
@@ -42,13 +50,13 @@ body > div#messages {
 }
 
 .message .content {
-  grid-column: 2 / 4;
+  grid-column: 3 / 5;
   padding: 4px 8px;
   align-content: center;
 }
 
 .message:has(.actions) .content {
-  grid-column: 2 / 3;
+  grid-column: 3 / 4;
 }
 
 .message .actions {
@@ -57,7 +65,7 @@ body > div#messages {
   flex-direction: row;
   justify-content: end;
   align-items: center;
-  grid-column: 3 / 4;
+  grid-column: 4 / 5;
   align-content: center;
 }
 
@@ -89,20 +97,34 @@ body > div#messages {
     /* background: #def6ff; */
   }
 
-  & > .nick {
+  & > .time{
     border-left: solid 6px #88dbfb;
     padding-left: 10px;
   }
 }
 
-.nickChange,
-.join,
-.part {
-  grid-column: 1 / 4;
-  opacity: .4;
-  padding: 4px 16px;
-  background: #d3d3d342;
-  font-size: .95em;
+#messages *:has(> .sysmessage) {
+  display: contents;
+
+  .time {
+    grid-column: 1 / 2;
+    background: #d3d3d342;
+    font-size: .95em;
+    padding: 4px 8px;
+    padding-left: 16px;
+    opacity: .4;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .sysmessage {
+    grid-column: 2 / 5;
+    background: #d3d3d342;
+    font-size: .95em;
+    padding: 4px 8px;
+    opacity: .4;
+  }
 }
 
 #chat {