From 0ea802b888cd5a2a30f9814c23450d15c3bdd262 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar R <tildezero@gmail.com>
Date: Tue, 2 Jun 2026 06:49:44 +0530
Subject: [PATCH] feat(ui): Style tweaks on repo home

---
 index.html | 30 +++++++++++++++++++++++++-----
 style.css  | 42 ++++++++++++++++++++++++++----------------
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index c0540df..b7ab394 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
         </div>
 
         <div class="repository">
-            <h3 class="title"><a href="">mysticmode</a><span>/</span><a href="">sorcia</a></h3>
+            <h3 class="title"><a href="">mysticmode</a><span class="sep">/</span><a href="">sorcia</a></h3>
 
             <nav class="repository__nav">
                 <a href="">Code</a>
@@ -38,20 +38,40 @@
             <ul class="repository__files">
                 <li>
                     <a class="repository__item" href="">src/</a>
-                    <div class="commit-desc"><a href="">Initial commit</a><span class="date">2024-06-01</span></div>
+                    <div class="commit-details">
+                        <p>
+                            <a href="" class="commit-msg">Initial commit</a> - <a href="" class="author">mysticmode</a>
+                        </p>
+                        <span class="date">2024-06-01</span>
+                    </div>
                 </li>
                 <li>
                     <a class="repository__item" href="">docs/</a>
-                    <div class="commit-desc"><a href="">Add documentation</a><span class="date">2024-06-01</span>
+                    <div class="commit-details">
+                        <p>
+                            <a href="" class="commit-msg">Add documentation</a> - <a href=""
+                                class="author">mysticmode</a>
+                        </p>
+                        <span class="date">2024-06-01</span>
                     </div>
                 </li>
                 <li>
                     <a class="repository__item" href="">README.md</a>
-                    <div class="commit-desc"><a href="">Update README</a><span class="date">2024-06-01</span></div>
+                    <div class="commit-details">
+                        <p>
+                            <a href="" class="commit-msg">Update README</a> - <a href="" class="author">mysticmode</a>
+                        </p>
+                        <span class="date">2024-06-01</span>
+                    </div>
                 </li>
                 <li>
                     <a class="repository__item" href="">.gitignore</a>
-                    <div class="commit-desc"><a href="">Add .gitignore</a><span class="date">2024-06-01</span></div>
+                    <div class="commit-details">
+                        <p>
+                            <a href="" class="commit-msg">Add .gitignore</a> - <a href="" class="author">mysticmode</a>
+                        </p>
+                        <span class="date">2024-06-01</span>
+                    </div>
                 </li>
             </ul>
         </div>
diff --git a/style.css b/style.css
index 0e1bbd5..2295f0d 100644
--- a/style.css
+++ b/style.css
@@ -8,12 +8,12 @@
 
 *::selection {
     background-color: #e7a85f;
-    color: #000;
+    color: #444444;
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    color: #333;
+    color: #444444;
     font-size: 16px;
     font-weight: normal;
     font-style: normal;
@@ -69,12 +69,11 @@ a:hover {
     text-align: center;
 }
 
-.title span {
-    color: #666;
+.title .sep {
+    color: #7f7f7f;
 }
 
 .description {
-    color: #555;
     text-align: center;
 }
 
@@ -105,24 +104,35 @@ a:hover {
     border: 1px solid #eee;
 }
 
-.repository__files a {
-    font-family: 'IBM Plex Mono', monospace;
-    color: #333;
-}
-
 .repository__files .repository__item {
+    font-family: 'IBM Plex Mono', monospace;
     color: #c35e5e;
 }
 
-.repository__files .date {
-    color: #999;
+.repository__files .date,
+.repository__files .author,
+.repository__files .commit-details a {
+    color: #7f7f7f;
     font-size: 12px;
 }
 
-.repository__files .commit-desc {
-    color: #999;
-    font-size: 12px;
-    margin-top: 5px;
+.repository__files a.author {
+    font-weight: bold;
+}
+
+.repository__files .commit-details {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 5px;
+}
+
+.repository__files .commit-details p {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
 }
\ No newline at end of file