2 files changed, 52 insertions, 126 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index 66d9bb8..3d754a5 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -1,9 +1,8 @@
 /*
- * cgit.css: styling for the cgit web interface
- *
  * Colours are driven by CSS custom properties via light-dark(), so the
- * whole theme follows the reader's system preference. All rules stay
- * scoped under div#cgit so cgit can be embedded in another page.
+ * whole theme follows the reader's system preference. Rules stay scoped
+ * under div#cgit, or behind the cgit-standalone class cgit sets on its own
+ * pages, so cgit can be embedded in another page.
  */
 
 div#cgit {
@@ -31,7 +30,7 @@ div#cgit {
   --upd:           light-dark(#0000cc, #6ea8fe);
   --hunk:          light-dark(#000099, #7aa2f7);
   --accent:        light-dark(#cc0000, #ff6b6b);
-  /* Faded wash over the fragment targeted source line. */
+  /* Faded wash over the fragment-targeted source line. */
   --line-hl:       light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14));
 
   --notes-bg:      light-dark(#ffffdd, #33331a);
@@ -89,7 +88,7 @@ div#cgit {
   --radius-xs: 2px;
 
   padding: 0;
-  margin: 0em;
+  margin: 0;
   font-family: var(--font-sans);
   font-size: 13px;
   line-height: 1.4;
@@ -124,7 +123,8 @@ div#cgit a:hover {
   text-decoration: underline;
 }
 
-div#cgit img {
+div#cgit img,
+div#cgit video {
   border: none;
   max-width: 100%;
 }
@@ -133,11 +133,8 @@ div#cgit table {
   border-collapse: collapse;
 }
 
-/* Form controls */
-
 div#cgit select,
-div#cgit input,
-div#cgit button {
+div#cgit input {
   font-family: inherit;
   font-size: inherit;
   height: var(--control-h);
@@ -165,27 +162,21 @@ div#cgit select {
   cursor: pointer;
 }
 
-div#cgit button,
 div#cgit input[type="submit"] {
   cursor: pointer;
 }
 
 div#cgit select:hover,
-div#cgit button:hover,
 div#cgit input[type="submit"]:hover {
   border-color: var(--border-mid);
-  color: var(--fg);
 }
 
 div#cgit select:focus-visible,
-div#cgit input:focus-visible,
-div#cgit button:focus-visible {
+div#cgit input:focus-visible {
   outline: 2px solid var(--link);
   outline-offset: 1px;
 }
 
-/* Masthead */
-
 div#cgit #header {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -260,8 +251,6 @@ div#cgit #header .owner {
   text-align: right;
 }
 
-/* Tab bar */
-
 div#cgit .tabs {
   display: flex;
   flex-wrap: wrap;
@@ -314,12 +303,10 @@ div#cgit input.txt {
   max-width: 12em;
 }
 
-/* Page frame */
-
 div#cgit .path {
   display: flex;
   flex-wrap: wrap;
-  margin: 0px;
+  margin: 0;
   padding: 0.45rem var(--gutter);
   color: var(--fg);
   background-color: var(--surface);
@@ -331,18 +318,15 @@ div#cgit .path .rev {
 }
 
 div#cgit .content {
-  margin: 0px;
+  margin: 0;
   padding: 1.25rem var(--gutter);
   border-bottom: solid 2px var(--border);
   overflow-x: auto;
 }
 
-/* Listing tables */
-
 div#cgit table.list {
   width: 100%;
   border: none;
-  border-collapse: collapse;
 }
 
 div#cgit table.list tr {
@@ -373,8 +357,6 @@ div#cgit table.list tr.nohover:hover {
   background: var(--bg);
 }
 
-/* Spacer rows between sections hold one empty cell. Cell height counts the
-   border box, so the vertical padding is added back on top of the line. */
 div#cgit table.list tr.nohover td:empty {
   height: calc(1lh + 0.6em);
 }
@@ -461,18 +443,11 @@ div#cgit table.list td a:hover {
   color: var(--link);
 }
 
-/* Repository index */
-
 div#cgit div#summary {
   vertical-align: top;
   margin-bottom: 1em;
 }
 
-div#cgit div#summary img,
-div#cgit div#summary video {
-  max-width: 100%;
-}
-
 div#cgit div#summary pre {
   overflow-x: auto;
 }
@@ -588,7 +563,6 @@ div#cgit .markdown pre code {
 }
 
 div#cgit .markdown table {
-  border-collapse: collapse;
   margin: 0.7em 0;
 }
 
@@ -602,10 +576,6 @@ div#cgit .markdown th {
   background: var(--surface-2);
 }
 
-div#cgit div#blob {
-  border: solid 1px var(--border-strong);
-}
-
 div#cgit div.error {
   color: var(--accent);
   font-weight: bold;
@@ -621,8 +591,6 @@ div#cgit table.list td.sublevel-repo {
   padding-left: 1.5em;
 }
 
-/* Directory / blob listings */
-
 div#cgit a.ls-blob,
 div#cgit a.ls-dir,
 div#cgit .ls-mod {
@@ -657,8 +625,6 @@ div#cgit td.ls-links {
   white-space: nowrap;
 }
 
-/* Source blob */
-
 div#cgit table.blob {
   margin-top: 0.5em;
   border-top: solid 1px var(--border-strong);
@@ -669,14 +635,12 @@ div#cgit table.blob {
 }
 
 div#cgit table.blob td.lines {
-  margin: 0;
   padding: 0 0 0 0.5em;
   vertical-align: top;
   color: var(--fg);
 }
 
 div#cgit table.blob td.linenumbers {
-  margin: 0;
   padding: 0 0.5em 0 0.5em;
   vertical-align: top;
   text-align: right;
@@ -754,8 +718,6 @@ div#cgit .hl-func {
   color: light-dark(#6639ba, #d2a8ff);
 }
 
-/* Blame */
-
 div#cgit table.blame {
   display: block;
   width: max-content;
@@ -801,8 +763,6 @@ div#cgit table.blame .oid {
   font-size: 100%;
 }
 
-/* Binary blob */
-
 div#cgit table.bin-blob {
   margin-top: 0.5em;
   border: solid 1px var(--border-strong);
@@ -823,13 +783,10 @@ div#cgit table.bin-blob td {
   font-family: var(--font-mono);
   white-space: pre;
   border-left: solid 1px var(--border-mid);
-  padding: 0em 1em;
+  padding: 0 1em;
 }
 
-/* Commit / tag */
-
 div#cgit table.commit-info {
-  border-collapse: collapse;
   margin-top: 1.5em;
 }
 
@@ -839,7 +796,6 @@ div#cgit div.cgit-panel {
 }
 
 div#cgit div.cgit-panel table {
-  border-collapse: collapse;
   border: solid 1px var(--border-mid);
   background-color: var(--surface);
 }
@@ -852,14 +808,6 @@ div#cgit div.cgit-panel td {
   padding: 0.25em 0.5em;
 }
 
-div#cgit div.cgit-panel td.label {
-  padding-right: 0.5em;
-}
-
-div#cgit div.cgit-panel td.ctrl {
-  padding-left: 0.5em;
-}
-
 div#cgit table.commit-info th {
   text-align: left;
   font-weight: normal;
@@ -875,8 +823,8 @@ div#cgit table.commit-info td {
 div#cgit div.commit-subject {
   font-weight: bold;
   font-size: 125%;
-  margin: 1.5em 0em 0.5em 0em;
-  padding: 0em;
+  margin: 1.5em 0 0.5em 0;
+  padding: 0;
   overflow-wrap: anywhere;
 }
 
@@ -905,15 +853,12 @@ div#cgit div.notes-footer {
   clear: left;
 }
 
-/* Diffstat */
-
 div#cgit div.diffstat-header {
   font-weight: bold;
   padding-top: 1.5em;
 }
 
 div#cgit table.diffstat {
-  border-collapse: collapse;
   border: solid 1px var(--border-mid);
   background-color: var(--surface);
   max-width: 100%;
@@ -960,14 +905,13 @@ div#cgit table.diffstat td.graph {
 
 div#cgit table.diffstat td.graph table {
   border: none;
-  border-spacing: 0;
   table-layout: fixed;
   width: 100%;
 }
 
 div#cgit table.diffstat td.graph td {
-  padding: 0px;
-  border: 0px;
+  padding: 0;
+  border: 0;
   height: 7pt;
 }
 
@@ -984,8 +928,6 @@ div#cgit div.diffstat-summary {
   padding-top: 0.5em;
 }
 
-/* Unified diff */
-
 /* A scroll box beside the options float would shrink to fit the gap. */
 div#cgit div.diff-scroll {
   clear: right;
@@ -1044,17 +986,15 @@ div#cgit .right {
   text-align: right;
 }
 
-/* Buttons / pager */
-
 div#cgit a.button {
   font-size: 90%;
-  padding: 0em 0.5em;
+  padding: 0 0.5em;
 }
 
 div#cgit ul.pager {
   list-style-type: none;
   text-align: center;
-  margin: 1em 0em 0em 0em;
+  margin: 1em 0 0 0;
   padding: 0;
 }
 
@@ -1071,8 +1011,6 @@ div#cgit ul.pager .current {
   font-weight: bold;
 }
 
-/* Ages / line counts */
-
 div#cgit time.age-mins,
 div#cgit time.age-hours,
 div#cgit time.age-days,
@@ -1115,8 +1053,6 @@ div#cgit span.deletions {
   color: var(--del);
 }
 
-/* Footer */
-
 div#cgit .footer {
   padding: 0.85rem var(--gutter);
   text-align: center;
@@ -1133,8 +1069,6 @@ div#cgit .footer a:hover {
   text-decoration: underline;
 }
 
-/* Ref decorations */
-
 div#cgit a.branch-deco,
 div#cgit a.tag-deco,
 div#cgit a.tag-annotated-deco,
@@ -1145,8 +1079,8 @@ div#cgit a.deco {
 
 div#cgit a.branch-deco {
   color: var(--deco-fg);
-  margin: 0px 0.5em;
-  padding: 0px 0.25em;
+  margin: 0 0.5em;
+  padding: 0 0.25em;
   background-color: var(--branch-bg);
   border: solid 1px var(--branch-bd);
   border-radius: var(--radius-xs);
@@ -1154,8 +1088,8 @@ div#cgit a.branch-deco {
 
 div#cgit a.tag-deco {
   color: var(--deco-fg);
-  margin: 0px 0.5em;
-  padding: 0px 0.25em;
+  margin: 0 0.5em;
+  padding: 0 0.25em;
   background-color: var(--tag-bg);
   border: solid 1px var(--tag-bd);
   border-radius: var(--radius-xs);
@@ -1163,8 +1097,8 @@ div#cgit a.tag-deco {
 
 div#cgit a.tag-annotated-deco {
   color: var(--deco-fg);
-  margin: 0px 0.5em;
-  padding: 0px 0.25em;
+  margin: 0 0.5em;
+  padding: 0 0.25em;
   background-color: var(--tag-ann-bg);
   border: solid 1px var(--tag-ann-bd);
   border-radius: var(--radius-xs);
@@ -1172,8 +1106,8 @@ div#cgit a.tag-annotated-deco {
 
 div#cgit a.remote-deco {
   color: var(--deco-fg);
-  margin: 0px 0.5em;
-  padding: 0px 0.25em;
+  margin: 0 0.5em;
+  padding: 0 0.25em;
   background-color: var(--remote-bg);
   border: solid 1px var(--remote-bd);
   border-radius: var(--radius-xs);
@@ -1181,8 +1115,8 @@ div#cgit a.remote-deco {
 
 div#cgit a.deco {
   color: var(--deco-fg);
-  margin: 0px 0.5em;
-  padding: 0px 0.25em;
+  margin: 0 0.5em;
+  padding: 0 0.25em;
   background-color: var(--head-bg);
   border: solid 1px var(--head-bd);
   border-radius: var(--radius-xs);
@@ -1197,11 +1131,8 @@ div#cgit div.commit-subject a.deco {
   font-size: 80%;
 }
 
-/* Statistics */
-
 div#cgit table.stats {
   border: solid 1px var(--border-strong);
-  border-collapse: collapse;
   display: block;
   width: max-content;
   max-width: 100%;
@@ -1235,8 +1166,6 @@ div#cgit table.stats td.left {
   text-align: left;
 }
 
-/* Side-by-side diff */
-
 div#cgit table.ssdiff {
   width: 100%;
 }
diff --git a/assets/cgit.js b/assets/cgit.js
index c5bdf33..29b9745 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -12,8 +12,7 @@
 
 // Written the way SECONDS_PER_* are derived in source/cgit.h, so that the
 // bucket a browser picks is the bucket cgit_print_age already picked on the
-// server. A month is a twelfth of a year rather than thirty days, which is
-// the definition the server uses.
+// server. A month is a twelfth of a year rather than thirty days.
 var MINUTE = 60;
 var HOUR   = 60 * MINUTE;
 var DAY    = 24 * HOUR;
@@ -21,15 +20,18 @@ var WEEK   = 7 * DAY;
 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 the arrays
-// it reads there repeat their final entry. Each limit is twice the next unit
-// up, matching the thresholds cgit_print_age compares against.
-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 update_delay = [ 10,         5 * MINUTE,  30 * MINUTE, DAY,        DAY,          DAY,         DAY ];
+// 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.
+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 update_delay = [ 10, 5 * MINUTE, 30 * MINUTE, DAY, DAY, DAY ];
 
 function render_age(element, age) {
   var text, bucket;
@@ -40,13 +42,13 @@ function render_age(element, age) {
 
   text = Math.round(age / age_unit[bucket]) + " " + age_suffix[bucket];
 
-  // Every age on the page is measured again on each pass, so most of
-  // them are already reading correctly and writing to them would cost a
-  // repaint for nothing.
+  // Every age on the page is measured again on each pass, so most of them
+  // are already reading correctly and writing to them would cost a repaint
+  // 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.
+    // 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])
@@ -56,7 +58,7 @@ 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 coarsest unit on the page could
+ * 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.
  */
@@ -74,9 +76,8 @@ function refresh_ages() {
     for (i = 0; i < elements.length; i++) {
       age = now - elements[i].getAttribute("data-ut");
 
-      // A commit dated ahead of the viewer's clock would
-      // otherwise show a negative age, and ui-shared.c
-      // clamps it the same way.
+      // A commit dated ahead of the viewer's clock would otherwise show
+      // a negative age, and ui-shared.c clamps it the same way.
       if (age < 0)
         age = 0;
 
@@ -87,11 +88,7 @@ function refresh_ages() {
   window.setTimeout(refresh_ages, delay * 1000);
 }
 
-document.addEventListener("DOMContentLoaded", function () {
-  // Nothing here depends on layout, so the first pass can run as soon
-  // as the document is parsed.
-  refresh_ages();
-}, false);
+document.addEventListener("DOMContentLoaded", refresh_ages, false);
 
 })();
 
@@ -136,8 +133,8 @@ function place_bar() {
   bar.style.height = (bottom - top) + "px";
   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.
+  // 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.
   if (match[2])
     first.scrollIntoView({ block: "center" });
 }