feat(ui): Style tweaks on repo home

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>

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 {
+.title .sep {
-    color: #666;
+    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 {
+.repository__files .date,
-    color: #999;
+.repository__files .author,
+.repository__files .commit-details a {
+    color: #7f7f7f;
     font-size: 12px;
 }
 
-.repository__files .commit-desc {
+.repository__files a.author {
-    color: #999;
+    font-weight: bold;
-    font-size: 12px;
+}
-    margin-top: 5px;
+
+.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;
 }