4 files changed, 69 insertions, 33 deletions
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index e552787..1229fce 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -1,33 +1,66 @@
 body {
-  margin: 0;
-  padding: 1rem;
+  margin: 0 1rem;
   font-family: Helvetica, Arial, sans-serif;
-}
-
-.icon {
-  height: 1lh;
-  vertical-align: text-bottom;
-}
 
-pre.blob {
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  overflow-x: auto;
-  font-family: monospace;
+  --border-color: #d0d7de;
 }
 
 @media (prefers-color-scheme: dark) {
   body {
     background: #0d1117;
     color: #e6edf3;
+    --border-color: #30363d;
   }
   a {
     color: #4493f8;
   }
   .blob {
-    border-color: #30363d;
     background: #161b22;
   }
 }
+
+a {
+  text-decoration: none;
+}
+
+header, .box {
+  margin: 1rem 0;
+  border: 1px solid var(--border-color);
+  padding: .5rem;
+}
+
+footer {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.icon {
+  height: 1lh;
+  vertical-align: text-bottom;
+}
+
+.repo {
+  margin-bottom: 1rem;
+  font-size: 120%;
+  font-weight: bold;
+}
+
+.branch {
+  display: inline-block;
+  margin-right: 1rem;
+  padding: .2rem;
+  border: 1px solid var(--border-color);
+}
+
+.description {
+  margin-bottom: .2rem;
+}
+
+.count + .count {
+  margin-left: 1rem;
+}
+
+pre.box {
+  /* Instead of scrolling overflow for long lines, grow the box. */
+  width: fit-content;
+}
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 566f5b0..9b478b5 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,3 +1,12 @@
 <% layout("./layout") %>
 
-<pre class="blob"><code><%= it.rawContent %></code></pre>
+<div>
+  <% if (it.language) { %>
+    <div>language: <%= it.language %></div>
+  <% } %>
+  <% if (it.size !== undefined) { %>
+    <div>size: <%= it.size %> bytes</div>
+  <% } %>
+</div>
+
+<pre class="box"><code><%= it.rawContent %></code></pre>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index 982f8c0..a191301 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
+  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || '/' %></title>
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
   <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+    <div class="repo"><%= it.repo.owner %>/<%= it.repo.name %></div>
+    <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
     <% if (it.path) { %>
-      <div>
-        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
+      <span>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
         const pathParts = it.path.split('/').filter(p => p);
         let currentPath = '';
         for (let i = 0; i < pathParts.length; i++) {
@@ -24,13 +24,7 @@
             %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
           }
         } %>
-      </div>
-    <% } %>
-    <% if (it.language) { %>
-      <div>language: <%= it.language %></div>
-    <% } %>
-    <% if (it.size !== undefined) { %>
-      <div>size: <%= it.size %> bytes</div>
+      </span>
     <% } %>
   </header>
 
diff --git a/cgithub/views/repo.eta b/cgithub/views/repo.eta
index 4338708..4965e75 100644
--- a/cgithub/views/repo.eta
+++ b/cgithub/views/repo.eta
@@ -1,7 +1,7 @@
 <% layout("./layout") %>
 
 <% if (it.info) { %>
-  <div class="repo-info">
+  <div class="box">
     <% if (it.info.description) { %>
       <div class="description"><%= it.info.description %></div>
     <% } %>
@@ -9,13 +9,13 @@
       <div><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
     <% } %>
     <% if (it.info.stars) { %>
-      <span><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
+      <span class="count"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
     <% } %>
     <% if (it.info.watchers) { %>
-      <span><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
+      <span class="count"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
     <% } %>
     <% if (it.info.forks) { %>
-      <span><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
+      <span class="count"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
     <% } %>
   </div>
 <% } %>