feat: ✨ enhance UI components with updated styles and improved layout

src/themes/scss/theme/index.scss

@@ -10,6 +10,8 @@
     @include components.signed-label;   // label for GPG signed commits
     @include components.editor;         // github-style (kinda) markdown editor in comments, issues, etc.
     @include components.menu;           // github-style dropdown menus
+    @include components.file-content;   // github-style file content
+    @include components.avatar;         // github-style avatars
 
     // code highlighting
     @include modules.chroma($is-dark);  // syntax highlighting

src/themes/scss/theme/modules/repo/_file-list.scss

@@ -4,9 +4,41 @@
 
 @mixin apply-styles {
     .repo-button-row-left {
+        gap: var.get('measure/.5x');
+
         .button {
             @include button.hollow;
         }
+
+        .breadcrumb.repo-path {
+            font-size: var.get('font-size/lg');
+            padding: 0 0 0 var.get('measure/.5x');
+
+            .section {
+                &:first-of-type, &.active {
+                    font-weight: 600;
+                }
+            }
+
+            .breadcrumb-divider, button {
+                color: color.get('subtle') !important;
+            }
+
+            button {
+                border-radius: var(--border-radius);
+                padding: var.get('measure/.375x');
+                margin: 0 0 0 var.get('measure/.5x') !important;
+
+                svg {
+                    width: var.get('measure/1x');
+                    height: var.get('measure/1x');
+                }
+
+                &:hover {
+                    background-color: var(--color-nav-hover-bg);
+                }
+            }
+        }
     }
 
     .repo-home-filelist {
@@ -59,5 +91,10 @@
                 }
             }
         }
+
+        // readme
+        #readme {
+
+        }
     }
 }

src/themes/scss/theme/modules/repo/_secondary-navbar.scss

@@ -106,7 +106,7 @@
         // header navbar menu
         overflow-menu.ui.secondary.pointing.menu {
             .overflow-menu-items {
-                gap: var.get('measure/.25x') !important;
+                gap: var.get('measure/.5x') !important;
             }
 
             // navbar menu items

src/themes/scss/theme/vars/_colors.scss

@@ -301,7 +301,7 @@
         --color-hover-opaque: var(--color-box-header);
         --color-active: #{color.get('elevation/4')};
         --color-menu: #{color.get('elevation/4')};
-        --color-card: #{color.get('elevation/4')};
+        --color-card: #{color.get('elevation/3')};
         --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
         --color-markup-code-block: #{color.get('elevation/4')};
         --color-markup-code-inline: #{color.get('elevation/4')};
@@ -313,7 +313,7 @@
         --color-expand-button: #{color.get('elevation/6')};
         --color-placeholder-text: #{color.get('elevation/9')};
         --color-editor-line-highlight: var(--color-primary-light-5);
-        --color-project-column-bg: var(--color-secondary-light-2);
+        --color-project-column-bg: #{color.get('elevation/1')};
         --color-caret: var(--color-text);
         --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
         --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;