2 files changed, 88 insertions, 154 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index 2d1be91..ffbc902 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -88,8 +88,8 @@ div#cgit {
   font-family: var(--font-sans);
   font-size: 13px;
   line-height: 1.4;
-  text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   color: var(--fg);
   background: var(--bg);
 }
@@ -118,10 +118,10 @@ div#cgit a:hover {
 }
 
 div#cgit .markdown a,
+div#cgit .truncated a,
 div#cgit div.blob-header a,
 div#cgit div.commit-msg a,
 div#cgit div.notes a,
-div#cgit div.truncated a,
 div#cgit table.log th a {
   text-decoration: underline;
 }
@@ -164,8 +164,8 @@ div#cgit input[type="password"] {
 }
 
 div#cgit select {
-  appearance: none;
   -webkit-appearance: none;
+  appearance: none;
   padding-right: 1.7em;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -528,26 +528,19 @@ div#cgit table.list tr.nohover {
   background: var(--bg);
 }
 
-div#cgit table.list tbody + tbody > tr:first-child > th {
-  padding-top: calc(1lh + 0.95em);
-}
-
 @media (hover: hover) {
   div#cgit table.list tr:hover {
     background: var(--row-hover);
   }
 
-  div#cgit table.list tr.nohover:hover {
+  div#cgit table.list tr.nohover:hover,
+  div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
     background: var(--bg);
   }
 
   div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
     background: var(--surface-2);
   }
-
-  div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-    background: var(--bg);
-  }
 }
 
 div#cgit table.list th {
@@ -556,6 +549,10 @@ div#cgit table.list th {
   vertical-align: baseline;
 }
 
+div#cgit table.list tbody + tbody > tr:first-child > th {
+  padding-top: calc(1lh + 0.95em);
+}
+
 div#cgit table.list td {
   border: none;
   padding: 0.3em 0.6em;
@@ -860,13 +857,11 @@ div#cgit table.ssdiff td.lineno a:hover {
   color: var(--fg);
 }
 
-div#cgit table.blob td.linenumbers a,
-div#cgit table.blame td.linenumbers a {
+div#cgit table.blob td.linenumbers a {
   scroll-margin-top: calc(50vh - 1em);
 }
 
-div#cgit table.blob td.linenumbers a:target,
-div#cgit table.blame td.linenumbers a:target {
+div#cgit table.blob td.linenumbers a:target {
   background: var(--line-hl);
   color: var(--fg);
 }
@@ -903,14 +898,6 @@ div#cgit .hl-func {
   color: var(--hl-func);
 }
 
-div#cgit table.blame {
-  position: relative;
-  display: block;
-  min-width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
 div#cgit table.blame td.hashes,
 div#cgit table.blame td.lines,
 div#cgit table.blame td.linenumbers {
@@ -948,8 +935,8 @@ div#cgit table.blame .oid {
   font-size: 1em;
 }
 
-div#cgit table.bin-blob {
-  margin-top: 0.5em;
+div#cgit table.bin-blob,
+div#cgit table.stats {
   border: solid 1px var(--border-mid);
   display: block;
   width: max-content;
@@ -957,6 +944,10 @@ div#cgit table.bin-blob {
   overflow-x: auto;
 }
 
+div#cgit table.bin-blob {
+  margin-top: 0.5em;
+}
+
 div#cgit table.bin-blob th {
   font-family: var(--font-mono);
   white-space: pre;
@@ -975,14 +966,16 @@ div#cgit table.commit-info {
   margin-top: 1.5em;
 }
 
-div#cgit table.commit-info th {
+div#cgit table.commit-info th,
+div#cgit table.commit-trailers th {
   text-align: left;
   font-weight: normal;
   padding: 0.1em 1em 0.1em 0.1em;
   vertical-align: top;
 }
 
-div#cgit table.commit-info td {
+div#cgit table.commit-info td,
+div#cgit table.commit-trailers td {
   font-weight: normal;
   padding: 0.1em 1em 0.1em 0.1em;
 }
@@ -1000,7 +993,8 @@ div#cgit div.commit-subject {
   overflow-wrap: anywhere;
 }
 
-div#cgit div.commit-msg {
+div#cgit div.commit-msg,
+div#cgit div.notes {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   font-family: var(--font-mono);
@@ -1011,27 +1005,20 @@ div#cgit table.commit-trailers {
 }
 
 div#cgit table.commit-trailers th {
-  text-align: left;
-  font-weight: normal;
-  padding: 0.1em 1em 0.1em 0.1em;
-  vertical-align: top;
   white-space: nowrap;
 }
 
 div#cgit table.commit-trailers td {
-  padding: 0.1em 1em 0.1em 0.1em;
   overflow-wrap: anywhere;
 }
 
-div#cgit div.notes-header {
+div#cgit div.notes-header,
+div#cgit div.diffstat-header {
   font-weight: bold;
   padding-top: 1.5em;
 }
 
 div#cgit div.notes {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  font-family: var(--font-mono);
   border: solid 1px var(--notes-border);
   background-color: var(--notes-bg);
   padding: 0.3em 2em 0.3em 1em;
@@ -1072,11 +1059,6 @@ div#cgit div.cgit-panel input[type="submit"] {
   grid-column: 2;
 }
 
-div#cgit div.diffstat-header {
-  font-weight: bold;
-  padding-top: 1.5em;
-}
-
 div#cgit table.diffstat {
   border: solid 1px var(--border-mid);
   border-collapse: separate;
@@ -1086,13 +1068,6 @@ div#cgit table.diffstat {
   max-width: 100%;
 }
 
-div#cgit table.diffstat th {
-  font-weight: normal;
-  text-align: left;
-  text-decoration: underline;
-  padding: 0.1em 1em 0.1em 0.1em;
-}
-
 div#cgit table.diffstat td {
   padding: 0.2em 0.2em 0.1em 0.1em;
   border: none;
@@ -1253,16 +1228,15 @@ div#cgit table.ssdiff td.lineno {
   min-width: 3em;
 }
 
-div#cgit table.ssdiff td.hunk {
-  color: var(--fg);
-  background: var(--ss-hunk-bg);
+div#cgit table.ssdiff td.hunk,
+div#cgit table.ssdiff td.head {
   border-top: solid 1px var(--border-mid);
   border-bottom: solid 1px var(--border-mid);
 }
 
-div#cgit table.ssdiff td.head {
-  border-top: solid 1px var(--border-mid);
-  border-bottom: solid 1px var(--border-mid);
+div#cgit table.ssdiff td.hunk {
+  color: var(--fg);
+  background: var(--ss-hunk-bg);
 }
 
 div#cgit table.ssdiff td.head div.head {
@@ -1271,10 +1245,8 @@ div#cgit table.ssdiff td.head div.head {
 }
 
 div#cgit table.ssdiff td.foot {
+  border: none;
   border-top: solid 1px var(--border-mid);
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
 }
 
 div#cgit table.ssdiff td.space {
@@ -1282,14 +1254,6 @@ div#cgit table.ssdiff td.space {
   height: 3em;
 }
 
-div#cgit table.stats {
-  border: solid 1px var(--border-mid);
-  display: block;
-  width: max-content;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
 div#cgit table.stats th {
   text-align: left;
   padding: 1px 0.5em;
@@ -1318,7 +1282,7 @@ div#cgit table.stats td.left {
 }
 
 div#cgit p.login-error {
-  color: var(--del);
+  color: var(--accent);
   font-weight: bold;
 }
 
@@ -1338,14 +1302,8 @@ div#cgit form.login input[type="password"] {
 }
 
 @media (max-width: 900px) {
-  div#cgit .tabs .search {
-    display: none;
-  }
-
-  div#cgit #header .branch-switch {
-    display: none;
-  }
-
+  div#cgit #header .branch-switch,
+  div#cgit .tabs .search,
   div#cgit table.list th.col-author,
   div#cgit table.list td.col-author {
     display: none;
@@ -1376,46 +1334,52 @@ div#cgit form.login input[type="password"] {
 }
 
 @media (max-width: 640px) {
-  div#cgit .tabs a {
-    padding: 0.3em 0.4em;
-  }
-
+  div#cgit #header .owner,
   div#cgit .col-desc,
   div#cgit .col-owner,
-  div#cgit .col-links {
-    display: none;
-  }
-
+  div#cgit .col-links,
   div#cgit table.log th.col-count,
-  div#cgit table.log td.col-count {
+  div#cgit table.log td.col-count,
+  div#cgit th.ls-mode,
+  div#cgit td.ls-mode,
+  div#cgit th.ls-links,
+  div#cgit td.ls-links,
+  div#cgit div.cgit-panel,
+  div#cgit table.diffstat td.mode {
     display: none;
   }
 
-  div#cgit table.list td {
-    overflow-wrap: anywhere;
+  div#cgit #header {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "logo heading"
+      "desc desc";
+    row-gap: 6px;
   }
 
-  div#cgit th.ls-mode,
-  div#cgit td.ls-mode,
-  div#cgit th.ls-links,
-  div#cgit td.ls-links {
-    display: none;
+  div#cgit #header::before {
+    grid-column: 1 / -1;
   }
 
-  div#cgit td.ls-size {
-    width: auto;
+  div#cgit #header h1.main {
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 
-  div#cgit table.diffstat td.mode {
-    display: none;
+  div#cgit .tabs a {
+    padding: 0.3em 0.4em;
   }
 
   div#cgit span.snapshot {
     white-space: normal;
   }
 
-  div#cgit table.repolist {
-    width: 100%;
+  div#cgit table.list td {
+    overflow-wrap: anywhere;
+  }
+
+  div#cgit td.ls-size {
+    width: auto;
   }
 
   div#cgit table.repolist th.col-name,
@@ -1431,36 +1395,10 @@ div#cgit form.login input[type="password"] {
     text-align: right;
   }
 
-  div#cgit #header {
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "logo heading"
-      "desc desc";
-    row-gap: 6px;
-  }
-
-  div#cgit #header .owner {
-    display: none;
-  }
-
-  div#cgit #header::before {
-    grid-column: 1 / -1;
-  }
-
-  div#cgit #header h1.main {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  div#cgit div.cgit-panel {
-    display: none;
-  }
-
   div#cgit div.notes {
     float: none;
     margin-left: 0;
   }
-
 }
 
 @media (forced-colors: active) {
diff --git a/assets/cgit.js b/assets/cgit.js
index 90f06c0..f62eb06 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -22,19 +22,18 @@ var YEAR   = 365 * DAY;
 var MONTH  = YEAR / 12;
 
 // The five arrays are indexed together by the bucket an age falls into.
-// The search in render_age can stop one place past the last class, so
-// age_suffix and age_unit repeat their final entry. Each limit is twice the
-// next unit up, matching the thresholds cgit_print_age compares against.
+// Each limit is twice the next unit up, matching the thresholds
+// cgit_print_age compares against, and an age past the last is in years.
 var age_classes = [ "age-mins", "age-hours", "age-days", "age-weeks", "age-months", "age-years" ];
-var age_suffix = [ "min.", "hours", "days", "weeks", "months", "years", "years" ];
-var age_unit = [ MINUTE, HOUR, DAY, WEEK, MONTH, YEAR, YEAR ];
-var age_limit = [ 2 * HOUR, 2 * DAY, 2 * WEEK, 2 * MONTH, 2 * YEAR, 2 * YEAR ];
+var age_suffix = [ "min.", "hours", "days", "weeks", "months", "years" ];
+var age_unit = [ MINUTE, HOUR, DAY, WEEK, MONTH, YEAR ];
+var age_limit = [ 2 * HOUR, 2 * DAY, 2 * WEEK, 2 * MONTH, 2 * YEAR ];
 var update_delay = [ 10, 5 * MINUTE, 30 * MINUTE, DAY, DAY, DAY ];
 
 function render_age(element, age) {
   var text, bucket;
 
-  for (bucket = 0; bucket < age_classes.length; bucket++)
+  for (bucket = 0; bucket < age_limit.length; bucket++)
     if (age < age_limit[bucket])
       break;
 
@@ -45,10 +44,6 @@ function render_age(element, age) {
   // for nothing.
   if (element.textContent != text) {
     element.textContent = text;
-    // An age past the last limit is still counted in years, but there
-    // is no class beyond age-years to put on it.
-    if (bucket == age_classes.length)
-      bucket--;
     if (element.className != age_classes[bucket])
       element.className = age_classes[bucket];
   }
@@ -63,11 +58,11 @@ function render_age(element, age) {
  */
 function update_ages() {
   var bucket, elements, i, age;
-  var delay = 24 * 3600;
+  var delay = DAY;
   var now = Math.round(new Date().getTime() / 1000);
 
   for (bucket = 0; bucket < age_classes.length; bucket++) {
-    elements = document.getElementsByClassName(age_classes[bucket]);
+    elements = document.querySelectorAll("." + age_classes[bucket]);
 
     if (elements.length && update_delay[bucket] < delay)
       delay = update_delay[bucket];
@@ -91,7 +86,7 @@ function refresh_ages() {
   window.setTimeout(refresh_ages, update_ages() * 1000);
 }
 
-document.addEventListener("DOMContentLoaded", refresh_ages, false);
+document.addEventListener("DOMContentLoaded", refresh_ages);
 
 // A site script that adds rows of its own can ask for one pass over them.
 window.cgit = window.cgit || {};
@@ -153,13 +148,14 @@ function place_bar() {
   table.appendChild(bar);
 
   // A browser only scrolls to a fragment that names a real id, which a range
-  // never does, so bring the start of one into view here.
+  // never does, so bring the start of one into view here. The scroll margin
+  // on the anchors centres it the way it centres a single line.
   if (match[2])
-    first.scrollIntoView({ block: "center" });
+    first.scrollIntoView();
 }
 
-document.addEventListener("DOMContentLoaded", place_bar, false);
-window.addEventListener("hashchange", place_bar, false);
+document.addEventListener("DOMContentLoaded", place_bar);
+window.addEventListener("hashchange", place_bar);
 
 // A site script that moves the lines about can ask for the bar to be laid
 // again.
@@ -176,18 +172,18 @@ window.cgit.highlightLines = place_bar;
 
 (function () {
 
-function fade_tabs(list) {
-  var hidden = list.scrollWidth - list.clientWidth;
-
-  // A fractional scroll position can stop a pixel short of either end.
-  list.classList.toggle("fade-start", list.scrollLeft > 1);
-  list.classList.toggle("fade-end", list.scrollLeft < hidden - 1);
-}
-
 function fit_tabs() {
   var list = document.querySelector("nav.tabs ul");
   var active, list_box, tab_box;
 
+  function fade_tabs() {
+    var hidden = list.scrollWidth - list.clientWidth;
+
+    // A fractional scroll position can stop a pixel short of either end.
+    list.classList.toggle("fade-start", list.scrollLeft > 1);
+    list.classList.toggle("fade-end", list.scrollLeft < hidden - 1);
+  }
+
   if (!list)
     return;
   active = list.querySelector("a.active");
@@ -196,11 +192,11 @@ function fit_tabs() {
     tab_box = active.getBoundingClientRect();
     list.scrollLeft += tab_box.left - list_box.left - (list_box.width - tab_box.width) / 2;
   }
-  fade_tabs(list);
-  list.addEventListener("scroll", function () { fade_tabs(list); }, { passive: true });
-  window.addEventListener("resize", function () { fade_tabs(list); }, false);
+  fade_tabs();
+  list.addEventListener("scroll", fade_tabs, { passive: true });
+  window.addEventListener("resize", fade_tabs);
 }
 
-document.addEventListener("DOMContentLoaded", fit_tabs, false);
+document.addEventListener("DOMContentLoaded", fit_tabs);
 
 })();