Add stable markup hooks for site themes

2 files changed, 44 insertions, 22 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index 90fa074..dbd807c 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -350,8 +350,8 @@ div#cgit table.list tr.nohover:hover {
   background: var(--bg);
 }
 
-div#cgit table.list tr.nohover td:empty {
-  height: calc(1lh + 0.6em);
+div#cgit table.list tbody + tbody > tr:first-child > th {
+  padding-top: calc(1lh + 0.95em);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
@@ -436,12 +436,12 @@ div#cgit table.list td a:hover {
   color: var(--link);
 }
 
-div#cgit div#summary {
+div#cgit div#about {
   vertical-align: top;
   margin-bottom: 1em;
 }
 
-div#cgit div#summary pre {
+div#cgit div#about pre {
   overflow-x: auto;
 }
 
@@ -783,17 +783,25 @@ div#cgit div.cgit-panel {
   margin-top: 1.5em;
 }
 
-div#cgit div.cgit-panel table {
+div#cgit div.cgit-panel .fields {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  align-items: center;
+  justify-items: start;
+  padding-top: 0.5em;
   border: solid 1px var(--border-mid);
   background-color: var(--surface);
 }
 
-div#cgit div.cgit-panel th {
-  text-align: center;
+div#cgit div.cgit-panel label,
+div#cgit div.cgit-panel select,
+div#cgit div.cgit-panel input {
+  margin: 0.25em 0.5em;
 }
 
-div#cgit div.cgit-panel td {
-  padding: 0.25em 0.5em;
+div#cgit div.cgit-panel input[type="submit"] {
+  grid-column: 2;
+  justify-self: start;
 }
 
 div#cgit table.commit-info th {
@@ -998,23 +1006,23 @@ div#cgit a.button {
   padding: 0 0.5em;
 }
 
-div#cgit ul.pager {
+div#cgit nav.pager ul {
   list-style-type: none;
   text-align: center;
   margin: 1em 0 0 0;
   padding: 0;
 }
 
-div#cgit ul.pager li {
+div#cgit nav.pager li {
   display: inline-block;
   margin: 0.25em 0.5em;
 }
 
-div#cgit ul.pager a {
+div#cgit nav.pager a {
   color: var(--muted);
 }
 
-div#cgit ul.pager .current {
+div#cgit nav.pager .current {
   font-weight: bold;
 }
 
@@ -1192,7 +1200,7 @@ div#cgit table.ssdiff td.add {
   min-width: 50%;
 }
 
-div#cgit table.ssdiff td.add_dark {
+div#cgit table.ssdiff td.add-dark {
   color: var(--fg);
   background: var(--ss-add-bg2);
   min-width: 50%;
@@ -1209,7 +1217,7 @@ div#cgit table.ssdiff td.del {
   min-width: 50%;
 }
 
-div#cgit table.ssdiff td.del_dark {
+div#cgit table.ssdiff td.del-dark {
   color: var(--fg);
   background: var(--ss-del-bg2);
   min-width: 50%;
@@ -1226,7 +1234,7 @@ div#cgit table.ssdiff td.changed {
   min-width: 50%;
 }
 
-div#cgit table.ssdiff td.changed_dark {
+div#cgit table.ssdiff td.changed-dark {
   color: var(--fg);
   background: var(--ss-chg-bg2);
   min-width: 50%;
diff --git a/assets/cgit.js b/assets/cgit.js
index 78adfd0..2c0a828 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -54,12 +54,13 @@ function render_age(element, age) {
 }
 
 /*
- * Measures every age on the page against the clock and books the next pass.
- * There is no point coming back before the finest unit on the page could
- * change, so a page already counted in hours is left alone for minutes and
- * one counted in years for a day.
+ * Measures every age on the page against the clock and returns how many
+ * seconds may pass before one of them could read differently. There is no
+ * point coming back before the finest unit on the page could change, so a
+ * page already counted in hours is left alone for minutes and one counted in
+ * years for a day.
  */
-function refresh_ages() {
+function update_ages() {
   var bucket, elements, i, age;
   var delay = 24 * 3600;
   var now = Math.round(new Date().getTime() / 1000);
@@ -82,11 +83,19 @@ function refresh_ages() {
     }
   }
 
-  window.setTimeout(refresh_ages, delay * 1000);
+  return delay;
+}
+
+function refresh_ages() {
+  window.setTimeout(refresh_ages, update_ages() * 1000);
 }
 
 document.addEventListener("DOMContentLoaded", refresh_ages, false);
 
+// A site script that adds rows of its own can ask for one pass over them.
+window.cgit = window.cgit || {};
+window.cgit.updateAges = update_ages;
+
 })();
 
 /*
@@ -139,4 +148,9 @@ function place_bar() {
 document.addEventListener("DOMContentLoaded", place_bar, false);
 window.addEventListener("hashchange", place_bar, false);
 
+// A site script that moves the lines about can ask for the bar to be laid
+// again.
+window.cgit = window.cgit || {};
+window.cgit.highlightLines = place_bar;
+
 })();