Styling

3 files changed, 20 insertions, 17 deletions

diff --git a/views/blob.eta b/views/blob.eta
index 566f5b0..9b478b5 100644
--- a/views/blob.eta
+++ b/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/views/layout.eta b/views/layout.eta
index 982f8c0..a191301 100644
--- a/views/layout.eta
+++ b/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/views/repo.eta b/views/repo.eta
index 4338708..4965e75 100644
--- a/views/repo.eta
+++ b/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>
 <% } %>