diff options
| -rw-r--r-- | static/style.css | 65 | ||||
| -rw-r--r-- | views/blob.eta | 11 | ||||
| -rw-r--r-- | views/layout.eta | 18 | ||||
| -rw-r--r-- | views/repo.eta | 8 |
4 files changed, 69 insertions, 33 deletions
diff --git a/static/style.css b/static/style.css index e552787..1229fce 100644 --- a/static/style.css +++ b/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/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> <% } %> |