mugit @ fb655b4

M web/static/style.css

@@ -7,9 +7,10 @@ --medium-gray: #ddd;
   --gray: #6a6a6a;
   --dark: #444;
   --darker: #222;
+  --diff-add: green;
+  --diff-del: red;
 
   --sans-font: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
-  --display-font: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
   --mono-font: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', 'Roboto Mono', Menlo, Consolas, monospace;
 }
 
@@ -27,43 +28,50 @@ --white: #000;
   }
 }
 
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 html {
   background: var(--white);
   -webkit-text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-family: var(--sans-font);
-  font-weight: 380;
+  font-weight: 400;
 }
 
-pre {
-  font-family: var(--mono-font);
-  overflow-x: auto;
+body {
+  max-width: 1200px;
+  padding: 0 13px;
+  margin: 40px auto;
 }
 
 ::selection {
   background: var(--medium-gray);
-  opacity: 0.3;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+a {
+  text-decoration: none;
+  word-wrap: break-word;
+  color: var(--darker);
+  border-bottom: 0;
 }
 
-body {
-  max-width: 1200px;
-  padding: 0 13px;
-  margin: 40px auto;
+a:hover {
+  border-bottom: 1.5px solid var(--gray);
+}
+
+pre {
+  font-family: var(--mono-font);
+  overflow-x: auto;
 }
 
 main, footer {
-  font-size: 1rem;
   padding: 0;
   line-height: 160%;
-}
-
-header h1, h2, h3 {
-  font-family: var(--display-font);
 }
 
 h2 { font-weight: 400; }
@@ -76,8 +84,6 @@ main h2, h3 { padding: 20px 0 0.4rem 0; }
 
 nav { padding: 0.4rem 0 1.5rem 0; }
 nav ul {
-  padding: 0;
-  margin: 0;
   list-style: none;
   padding-bottom: 20px;
 }
@@ -87,144 +93,124 @@ padding-right: 10px;
   display: inline-block;
 }
 
-.repo-header {
-  margin-bottom: 1.25rem;
-}
+/* utilities */
 
-.repo-breadcrumb {
-  color: var(--gray);
-}
+.nowrap { white-space: nowrap; }
+.fill { width: 100%; }
+.muted { color: var(--gray); }
 
-.repo-breadcrumb:before {
-  content: "<"; /* TODO: add an  arrow */
-}
+.size { text-align: right; }
 
-.repo-breadcrumb a {
-  color: var(--gray);
-}
-
-.repo-name {
-  font-size: 1.6rem;
-  line-height: 1.1;
-  margin-top: 0.25rem;
-}
-
-.repo-header .desc {
-  color: var(--gray);
-  margin-top: 0.35rem;
-}
-
-.repo-header .repo-nav {
-  padding: 0.5rem 0 0 0;
-}
-
-.repo-header .repo-nav ul {
-  padding-bottom: 0;
+.mode,
+.size,
+.commit-hash,
+.commit-email,
+.diff-type {
+  font-family: var(--mono-font);
 }
 
-a {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  text-decoration: none;
-  word-wrap: break-word;
-  color: var(--darker);
-  border-bottom: 0;
-}
-
-a:hover {
-  border-bottom: 1.5px solid var(--gray);
-}
-
-/* index page */
-.index {
+/* tables */
+.table {
   width: 100%;
-  margin-top: 2em;
   border-collapse: collapse;
   table-layout: auto;
 }
 
-.index th {
+.table th {
   text-align: left;
   font-weight: 500;
   border-bottom: 1.5px solid var(--medium-gray);
   padding: 0.25em 0.5em;
 }
 
-.index td {
+.table td {
   border-bottom: 1px solid var(--light-gray);
   padding: 0.25em 0.5em;
   vertical-align: top;
 }
 
-.index .url { white-space: nowrap; }
-.index .desc { width: 100%; }
-.index .desc .unset { color: var(--gray); }
-.index .idle { white-space: nowrap; }
+.table tbody tr:hover {
+  background: var(--light);
+}
 
-
-.index tbody tr.nohover:hover {
+.table tbody tr.nohover:hover {
   background: transparent;
 }
 
-.index tbody tr:hover {
-  background: var(--light);
+/* tooltip */
+.tooltip {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.7rem;
+  background: var(--white);
+  border: 1px solid var(--medium-gray);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  z-index: 10;
+  font-size: 0.85em;
+  line-height: 1.3;
+  max-width: 48ch;
+  white-space: nowrap;
 }
 
-/* tree page */
+.author, .age { position: relative; }
 
-.tree {
-  width: 100%;
-  margin-bottom: 2em;
-  border-collapse: collapse;
-  table-layout: auto;
+.author:hover .tooltip,
+.author:focus-within .tooltip,
+.age:hover .tooltip,
+.age:focus-within .tooltip {
+  display: block;
 }
 
-.tree th {
-  text-align: left;
-  font-weight: 500;
-  border-bottom: 1.5px solid var(--medium-gray);
-  padding: 0.25em 0.5em;
+/* box */
+.box {
+  background: var(--light-gray);
+  padding: 0.6rem;
 }
 
-.tree td {
-  border-bottom: 1px solid var(--light-gray);
-  padding: 0.25em 0.5em;
-  vertical-align: top;
+.box + .box {
+  margin-top: 0.8rem;
 }
 
-.tree .mode {
-  white-space: nowrap;
-  font-family: var(--mono-font);
-}
+/* repo header */
+.repo-header { margin-bottom: 1.25rem; }
 
-.tree .size {
-  white-space: nowrap;
-  text-align: right;
-  font-family: var(--mono-font);
+.repo-breadcrumb,
+.repo-breadcrumb a {
+  color: var(--gray);
 }
 
-.tree .name { width: 100%; }
+.repo-breadcrumb:before { content: "<"; }
 
-.tree tbody tr.nohover:hover {
-  background: transparent;
+.repo-name {
+  font-size: 1.6rem;
+  line-height: 1.1;
+  margin-top: 0.25rem;
 }
 
-.tree tbody tr:hover {
-  background: var(--light);
-}
+.repo-header .desc { margin-top: 0.35rem; }
+.repo-header .repo-nav { padding: 0.5rem 0 0 0; }
+.repo-header .repo-nav ul { padding-bottom: 0; }
 
-/* log/repo page */
+/* index page */
+.index { margin-top: 2em; }
 
+/* repo index */
 .repo-index {
   display: flex;
   gap: 1.25rem;
-  margin-bottom: 2em;
   align-items: flex-start;
 }
 
 .repo-index-main {
   flex: 0 0 72ch;
+}
+
+.repo-index-main .box {
+  width: 100%;
 }
 
 .repo-index-side {
@@ -237,226 +223,125 @@ font-size: 1.4rem;
   padding: 0;
 }
 
-.repo-index-main .box {
-  width: 100%;
-}
-
-.box {
-  background: var(--light-gray);
-  padding: 0.6rem;
-}
-
-.box + .box {
-  margin-top: 0.8rem;
-}
-
-.log {
-  width: 100%;
-  margin-bottom: 2em;
-  border-collapse: collapse;
-  table-layout: auto;
-}
-
-.log th {
-  text-align: left;
-  font-weight: 500;
-  border-bottom: 1.5px solid var(--medium-gray);
-  padding: 0.25em 0.5em;
-}
-
-.log td {
-  border-bottom: 1px solid var(--light-gray);
-  padding: 0.25em 0.5em;
-  vertical-align: top;
-}
-
-.log .msg { width: 100%; }
-.log .author { white-space: nowrap; position: relative; }
-.log .age { white-space: nowrap; }
-
+/* log page */
 .log td.author .author-short {
   display: inline-block;
   max-width: 25ch;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: top;
 }
 
-/* Unified tooltip system */
-.tooltip {
-  display: none;
-  position: absolute;
-  left: 0;
-  top: 100%;
-  margin-top: 0.25rem;
-  padding: 0.5rem 0.7rem;
-  background: var(--white);
-  border: 1px solid var(--medium-gray);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  z-index: 10;
-  font-size: 0.85em;
-  line-height: 1.3;
-  max-width: 48ch;
-  white-space: nowrap;
+/* tree */
+.tree,
+.log,
+.repo-index {
+  margin-bottom: 2em;
 }
 
-.author, .age { position: relative; }
-.author:hover .tooltip,
-.author:focus-within .tooltip,
-.age:hover .tooltip,
-.age:focus-within .tooltip {
-  display: block;
-}
-
-.log tbody tr.nohover:hover {
-  background: transparent;
+/* file View */
+.file-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  padding: 0 0.5rem;
+  background: var(--light-gray);
+  overflow-x: auto;
 }
 
-.log tbody tr:hover {
-  background: var(--light);
+.line-numbers {
+  white-space: pre-line;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  padding-right: 1ch;
 }
 
-.clone-url pre {
+.file-content {
+  padding-left: 1.5ch;
+  overflow-y: hidden;
   overflow-x: auto;
-  white-space: pre;
-  max-width: 100%;
 }
 
-.mode, .size {
-  font-family: var(--mono-font);
-}
-.size {
-  text-align: right;
+.line-numbers pre,
+.file-content pre {
+  margin: 0;
+  line-height: 1.5;
 }
 
-/* readme stuff */
+/* commit */
+.commit { margin-bottom: 1rem; }
 
-.readme pre {
+.commit pre {
+  padding-bottom: 0;
   white-space: pre-wrap;
-  overflow-x: auto;
 }
 
-.readme {
-  padding: 0.5rem;
+.commit .box { margin-bottom: 0.25rem; }
+.commit .commit-info {
+  padding-bottom: 0.25rem;
 }
 
-.readme ul {
-  padding: revert;
+.commit-message {
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.35;
+  margin-bottom: 0;
 }
 
-.readme img {
-  max-width: 100%;
+.commit-info {
+  color: var(--gray);
+  font-size: 0.85rem;
 }
 
-.diff {
-  margin: 1rem 0 1rem 0;
-  padding: 0.6rem;
-  border-bottom: 1.5px solid var(--medium-gray);
-  background: var(--light-gray);
-}
+.commit-date { float: right; }
 
-.diff pre {
-  overflow-x: auto;
-}
+.commit-email:before { content: '<'; }
+.commit-email:after { content: '>'; }
 
 .commit-refs {
-  border-collapse: collapse;
   margin: 0.5rem 0 1rem 0;
 }
 
 .commit-refs td {
   padding: 0.15rem 0.5rem 0.15rem 0;
-  vertical-align: top;
+  border: none;
 }
 
 .commit-refs td.label {
-  white-space: nowrap;
   padding-right: 1rem;
 }
 
-.diff-stat {
-  padding: 1rem 0 1rem 0;
+/* diff */
+.diff {
+  margin: 1rem 0 1rem 0;
+  padding: 0.6rem;
+  border-bottom: 1.5px solid var(--medium-gray);
+  background: var(--light-gray);
 }
 
-.jump {
-  margin-top: 0.5rem;
-}
+.diff-stat { padding: 1rem 0 1rem 0; }
+.diff-add { color: var(--diff-add); }
+.diff-del { color: var(--diff-del); }
+.diff-mod { color: var(--cyan); }
+.diff-noop { color: var(--gray); }
 
-.jump-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: auto;
-  margin-top: 0.25rem;
-}
+.jump { margin-top: 0.5rem; }
+.jump-table { margin-top: 0.25rem; }
 
 .jump-table td {
   padding: 0.15rem 0.5rem;
-  border-bottom: 1px solid var(--medium-gray);
-  vertical-align: top;
+  border-color: var(--medium-gray);
 }
 
 .jump-table .diff-type {
-  font-family: var(--mono-font);
-  white-space: nowrap;
   width: 2ch;
 }
 
-.jump-table .path {
-  width: 100%;
-}
-
-.commit-hash, .commit-email {
-  font-family: var(--mono-font);
-}
-
-.commit-email:before {
-  content: '<';
-}
-
-.commit-email:after {
-  content: '>';
-}
-
-.commit {
-  margin-bottom: 1rem;
-}
-
-.commit pre {
-  padding-bottom: 0;
-  white-space: pre-wrap;
-}
-
-.commit-message {
-  margin-top: 0.25rem;
-  font-size: 1rem;
-  line-height: 1.35;
-  margin-bottom: 0;
-}
-
-.commit .box {
-  margin-bottom: 0.25rem;
-}
-
-.commit .commit-info {
-  padding-bottom: 0.25rem;
-}
-
-.diff-add {
-  color: green;
-}
-
-.diff-del {
-  color: red;
-}
-
-.diff-noop {
-  color: var(--gray);
-}
-
+/* refs */
 .ref {
-  font-family: var(--sans-font);
   font-size: 1rem;
   color: var(--gray);
   display: inline-block;
@@ -464,89 +349,29 @@ padding-top: 0.7em;
 }
 
 .refs pre {
-  white-space: pre-wrap;
   padding-bottom: 0.5rem;
+  white-space: pre-wrap;
 }
 
 .refs strong {
   padding-right: 1em;
 }
 
-.line-numbers {
-  white-space: pre-line;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  display: flex;
-  float: left;
-  flex-direction: column;
-  margin-right: 1ch;
-}
-
-.file-wrapper {
-  display: flex;
-  flex-direction: row;
-  grid-template-columns: 1rem minmax(0, 1fr);
-  gap: 1rem;
-  padding: 0.5rem;
-  background: var(--light-gray);
-  overflow-x: auto;
-}
-
-.file-content {
-  background: var(--light-gray);
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-
-.diff-type {
-  font-family: var(--mono-font);
-}
-
-.diff-type.diff-add { color: green; }
-.diff-type.diff-del { color: red; }
-.diff-type.diff-mod { color: var(--cyan); }
-
-.commit-info {
-  color: var(--gray);
-  font-size: 0.85rem;
-}
-
-.commit-date {
-  float: right;
-}
+/* readme */
+.readme { padding: 0.5rem; }
+.readme pre { white-space: pre-wrap; }
+.readme ul  { padding: revert; }
+.readme img { max-width: 100%; }
 
 @media (max-width: 600px) {
-  .index {
-    grid-row-gap: 0.8em;
-  }
-
   .repo-index {
     flex-direction: column;
   }
 
-  .repo-index-main {
-    flex: none;
-  }
-
+  .repo-index-main,
   .repo-index-side {
     flex: none;
-  }
-
-  .log {
-    grid-template-columns: 1fr;
-    grid-row-gap: 0em;
-  }
-
-  .index {
-    grid-template-columns: 1fr;
-    grid-row-gap: 0em;
-  }
-
-  .index-name:not(:first-child) {
-    padding-top: 1.5rem;
+    width: 100%;
   }
 
   .commit-info:not(:last-child) {

M web/templates/_repo_header.html

@@ -10,7 +10,7 @@ <span class="ref">@ {{ .ref }}</span>
     {{- end }}
   </h1>
   {{- if .desc }}
-  <div class="desc">{{ .desc }}</div>
+  <div class="desc muted">{{ .desc }}</div>
   {{- end }}
 
   <nav class="repo-nav">

D

@@ -1,14 +0,0 @@
-{{ define "repo_nav" }}
-  <nav>
-    <ul>
-    {{ if .name }}
-    <li><a href="/{{ .name }}">summary</a>
-    <li><a href="/{{ .name }}/refs">refs</a>
-      {{ if .ref }}
-      <li><a href="/{{ .name }}/tree/{{ .ref }}/">tree</a>
-      <li><a href="/{{ .name }}/log/{{ .ref }}">log</a>
-      {{ end }}
-    {{ end }}
-    </ul>
-  </nav>
-{{ end }}

M web/templates/index.html

@@ -11,20 +11,20 @@ <h2>{{ .meta.Description }}</h2>
   </header>
   <body>
     <main>
-      <table class="index">
+      <table class="table index">
         <thead>
           <tr class="nohover">
-            <th class="url">Name</th>
-            <th class="desc">Description</th>
-            <th class="idle">Last update</th>
+            <th class="nowrap">Name</th>
+            <th class="fill">Description</th>
+            <th class="nowrap">Last update</th>
           </tr>
         </thead>
         <tbody>
           {{ range .repos }}
           <tr>
-            <td class="url"><a href="/{{ .Name }}">{{ .Name }}</a></td>
-            <td class="desc">{{- if .Desc }}{{ .Desc }}{{- else }}<span class="unset">No description set</span>{{- end }}
-            <td class="idle">{{ humanizeTime .LastCommit }}</td>
+            <td class="nowrap"><a href="/{{ .Name }}">{{ .Name }}</a></td>
+            <td class="fill">{{- if .Desc }}{{ .Desc }}{{- else }}<span class="muted">No description set</span>{{- end }}
+            <td class="nowrap">{{ humanizeTime .LastCommit }}</td>
           </tr>
           {{ end}}
         </tbody>

M web/templates/repo_commit.html

@@ -16,17 +16,17 @@ </div>
           <pre class="commit-message">{{- .commit.Message -}}</pre>
         </div>
 
-        <table class="commit-refs">
+        <table class="table commit-refs">
           <tbody>
             <tr>
-              <td class="label"><strong>commit</strong></td>
+              <td class="label nowrap"><strong>commit</strong></td>
               <td>
                 <span class="commit-hash">{{ .commit.This }}</span>
               </td>
             </tr>
             {{ if .commit.Parent }}
             <tr>
-              <td class="label"><strong>parent</strong></td>
+              <td class="label nowrap"><strong>parent</strong></td>
               <td>
                 <span class="commit-hash">{{ .commit.Parent }}</span>
               </td>
@@ -44,7 +44,7 @@ </div>
 
           <div class="jump">
             <strong>jump to</strong>
-            <table class="jump-table">
+            <table class="table jump-table">
               <tbody>
                 {{ range .diff }}
                 {{ $path := .Name.New }}
@@ -55,7 +55,7 @@ {{ if .IsNew }}<span class="diff-type diff-add">A</span>{{ end }}
                     {{ if .IsDelete }}<span class="diff-type diff-del">D</span>{{ end }}
                     {{ if not (or .IsNew .IsDelete) }}<span class="diff-type diff-mod">M</span>{{ end }}
                   </td>
-                  <td class="path">
+                  <td class="fill">
                     <a href="#{{ $path }}">
                       {{ if and .Name.Old .Name.New }}{{ .Name.Old }} &#8594; {{ .Name.New }}{{ else }}{{ $path }}{{ end }}
                     </a>

M web/templates/repo_file.html

@@ -7,30 +7,20 @@ {{ template "repo_header" . }}
   <body>
     <main>
       <p>{{ .path }} (<a style="color: gray" href="?raw=true">view raw</a>)</p>
-      {{if .chroma }}
-      <div class="chroma-file-wrapper">
-      {{ .content }}
-      </div>
-      {{else}}
       <div class="file-wrapper">
       <table>
         <tbody><tr>
             <td class="line-numbers">
-              <pre>
-            {{- range .linecount }}
- <a id="L{{ . }}" href="#L{{ . }}">{{ . }}</a>
-            {{- end -}}
-              </pre>
+              <pre>{{- range .linecount }}
+<a id="L{{ . }}" href="#L{{ . }}">{{ . }}</a>
+{{- end -}}</pre>
             </td>
             <td class="file-content">
-              <pre>
-             {{- .content -}}
-              </pre>
+              <pre>{{- .content -}}</pre>
             </td>
         </tbody></tr>
       </table>
       </div>
-      {{end}}
     </main>
   </body>
 </html>

M web/templates/repo_log.html

@@ -9,22 +9,22 @@ <body>
     <main>
       {{ $repo := .name }}
 
-      <table class="log">
+      <table class="table log">
         <thead>
           <tr class="nohover">
-            <th class="msg">Message</th>
-            <th class="author">Author</th>
-            <th class="hash">Hash</th>
-            <th class="age">Age</th>
+            <th class="fill">Message</th>
+            <th class="author nowrap">Author</th>
+            <th>Hash</th>
+            <th class="age nowrap">Age</th>
           </tr>
         </thead>
         <tbody>
           {{ range .commits }}
           <tr>
-            <td class="msg">
+            <td class="fill">
               <a href="/{{ $repo }}/commit/{{ .Hash }}">{{ commitSummary .Message }}</a>
             </td>
-            <td class="author">
+            <td class="author nowrap">
               <span class="author-short">
                 {{ .AuthorName }} <a href="mailto:{{ .AuthorEmail }}" class="commit-email">{{ .AuthorEmail }}</a>
               </span>
@@ -36,8 +36,8 @@ </td>
             <td class="">
               <a href="/{{ $repo }}/commit/{{ .Hash }}">{{ .HashShort }}</a>
             </td>
-            <td class="age">
-              <span class="age-display">{{ humanizeTime .Committed }}</span>
+            <td class="age nowrap">
+              {{ humanizeTime .Committed }}
               <span class="tooltip" role="tooltip">{{ .Committed }}</span>
             </td>
           </tr>

M web/templates/repo_tree.html

@@ -11,29 +11,29 @@ {{ $repo := .name }}
       {{ $ref := .ref }}
       {{ $parent := .parent }}
 
-      <table class="tree">
+      <table class="table tree">
         <thead>
           <tr class="nohover">
-            <th class="mode">mode</th>
-            <th class="size">size</th>
-            <th class="name">name</th>
+            <th class="mode nowrap">mode</th>
+            <th class="size nowrap">size</th>
+            <th class="fill">name</th>
           </tr>
         </thead>
         <tbody>
           {{ if $parent }}
           <tr>
-            <td class="mode"></td>
-            <td class="size"></td>
-            <td class="name"><a href="/{{ $repo }}/tree/{{ $ref }}/{{ .dotdot }}">..</a></td>
+            <td class="mode nowrap"></td>
+            <td class="size nowrap"></td>
+            <td class="fill"><a href="/{{ $repo }}/tree/{{ $ref }}/{{ .dotdot }}">..</a></td>
           </tr>
           {{ end }}
 
           {{ range .files }}
           {{ if not .IsFile }}
           <tr>
-            <td class="mode">{{ .Mode }}</td>
-            <td class="size">{{ .Size }}</td>
-            <td class="name">
+            <td class="mode nowrap">{{ .Mode }}</td>
+            <td class="size nowrap">{{ .Size }}</td>
+            <td class="fill">
               {{ if $parent }}
               <a href="/{{ $repo }}/tree/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}/</a>
               {{ else }}
@@ -47,9 +47,9 @@
           {{ range .files }}
           {{ if .IsFile }}
           <tr>
-            <td class="mode">{{ .Mode }}</td>
-            <td class="size">{{ .Size }}</td>
-            <td class="name">
+            <td class="mode nowrap">{{ .Mode }}</td>
+            <td class="size nowrap">{{ .Size }}</td>
+            <td class="fill">
               {{ if $parent }}
               <a href="/{{ $repo }}/blob/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}</a>
               {{ else }}