From 9da09c88a7fb72eb8ed24dda486595160519f7be Mon Sep 17 00:00:00 2001
From: Bryce Kwon <bryce@brycekwon.com>
Date: Thu, 29 Oct 2026 13:31:05 -1000
Subject: Order the stylesheet by page area

Rules now run from the tokens and the base elements through the
controls, the page frame, the listings, the readme, the blob and blame
views, the commit page, the diff, the stats and the login form, to the
media queries. Each rule moved whole, and every page renders the same
in Chromium, WebKit and Firefox.
---
 assets/cgit.css | 576 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 288 insertions(+), 288 deletions(-)

(limited to 'assets/cgit.css')

diff --git a/assets/cgit.css b/assets/cgit.css
index ac56513..a3dd9c1 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -347,6 +347,158 @@ div#cgit .content {
   overflow-x: auto;
 }
 
+div#cgit .footer {
+  padding: 0.85rem var(--gutter);
+  text-align: center;
+  font-size: 85%;
+  color: var(--footer-fg);
+}
+
+div#cgit .footer a {
+  color: var(--footer-fg);
+  text-decoration: none;
+}
+
+div#cgit .footer a:hover {
+  text-decoration: underline;
+}
+
+div#cgit div.error {
+  color: var(--accent);
+  font-weight: bold;
+  margin: 1em 2em;
+}
+
+div#cgit .oid {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+
+div#cgit span.snapshot {
+  white-space: nowrap;
+}
+
+div#cgit .left {
+  text-align: left;
+}
+
+div#cgit .right {
+  text-align: right;
+}
+
+div#cgit a.button {
+  font-size: 90%;
+  padding: 0 0.5em;
+}
+
+div#cgit nav.pager ul {
+  list-style-type: none;
+  text-align: center;
+  margin: 1em 0 0 0;
+  padding: 0;
+}
+
+div#cgit nav.pager li {
+  display: inline-block;
+  margin: 0.25em 0.5em;
+}
+
+div#cgit nav.pager a {
+  color: var(--muted);
+}
+
+div#cgit nav.pager .current {
+  font-weight: bold;
+}
+
+div#cgit time.age-mins,
+div#cgit time.age-hours,
+div#cgit time.age-days,
+div#cgit time.age-weeks,
+div#cgit time.age-months,
+div#cgit time.age-years {
+  white-space: nowrap;
+}
+
+div#cgit time.age-mins {
+  font-weight: bold;
+  color: var(--age-mins);
+}
+
+div#cgit time.age-hours {
+  color: var(--age-hours);
+}
+
+div#cgit time.age-days {
+  color: var(--age-days);
+}
+
+div#cgit time.age-weeks {
+  color: var(--age-weeks);
+}
+
+div#cgit time.age-months {
+  color: var(--age-months);
+}
+
+div#cgit time.age-years {
+  color: var(--age-years);
+}
+
+div#cgit span.decoration {
+  word-spacing: 0.23em;
+}
+
+div#cgit a.branch-deco,
+div#cgit a.tag-deco,
+div#cgit a.tag-annotated-deco,
+div#cgit a.remote-deco,
+div#cgit a.deco {
+  white-space: nowrap;
+  color: var(--deco-fg);
+  margin: 0 0.5em 0 0;
+  padding: 0 0.25em;
+  border: solid 1px;
+  border-radius: var(--radius-xs);
+}
+
+div#cgit a.branch-deco {
+  background-color: var(--branch-bg);
+  border-color: var(--branch-bd);
+}
+
+div#cgit a.tag-deco {
+  background-color: var(--tag-bg);
+  border-color: var(--tag-bd);
+}
+
+div#cgit a.tag-annotated-deco {
+  background-color: var(--tag-ann-bg);
+  border-color: var(--tag-ann-bd);
+}
+
+div#cgit a.remote-deco {
+  background-color: var(--remote-bg);
+  border-color: var(--remote-bd);
+}
+
+div#cgit a.deco {
+  background-color: var(--head-bg);
+  border-color: var(--head-bd);
+}
+
+div#cgit div.commit-subject a.branch-deco,
+div#cgit div.commit-subject a.tag-deco,
+div#cgit div.commit-subject a.tag-annotated-deco,
+div#cgit div.commit-subject a.remote-deco,
+div#cgit div.commit-subject a.deco {
+  font-size: 80%;
+}
+
+div#cgit div.commit-subject span.decoration {
+  word-spacing: 0.55em;
+}
+
 div#cgit table.list {
   width: 100%;
   border: none;
@@ -464,6 +616,57 @@ div#cgit table.list td a:hover {
   color: var(--link);
 }
 
+div#cgit table.list td.reposection {
+  font-style: italic;
+  color: var(--faint);
+}
+
+div#cgit table.list td.sublevel-repo {
+  padding-left: 1.5em;
+}
+
+div#cgit a.ls-blob,
+div#cgit a.ls-dir,
+div#cgit .ls-mod {
+  font-family: var(--font-mono);
+}
+
+div#cgit table.list td .ls-mod {
+  font-style: italic;
+}
+
+div#cgit table.list td a.ls-mod {
+  color: var(--link);
+}
+
+div#cgit .ls-mod-hash {
+  color: var(--muted);
+  font-family: var(--font-mono);
+}
+
+div#cgit td.ls-size {
+  text-align: right;
+  font-family: var(--font-mono);
+  width: 10em;
+}
+
+div#cgit td.ls-mode {
+  font-family: var(--font-mono);
+  width: 10em;
+}
+
+div#cgit td.ls-links {
+  white-space: nowrap;
+}
+
+div#cgit span.insertions {
+  color: var(--add);
+}
+
+div#cgit span.deletions {
+  color: var(--del);
+}
+
 div#cgit div#about {
   vertical-align: top;
   margin-bottom: 1em;
@@ -595,55 +798,6 @@ div#cgit .markdown th {
   background: var(--surface-2);
 }
 
-div#cgit div.error {
-  color: var(--accent);
-  font-weight: bold;
-  margin: 1em 2em;
-}
-
-div#cgit table.list td.reposection {
-  font-style: italic;
-  color: var(--faint);
-}
-
-div#cgit table.list td.sublevel-repo {
-  padding-left: 1.5em;
-}
-
-div#cgit a.ls-blob,
-div#cgit a.ls-dir,
-div#cgit .ls-mod {
-  font-family: var(--font-mono);
-}
-
-div#cgit table.list td .ls-mod {
-  font-style: italic;
-}
-
-div#cgit table.list td a.ls-mod {
-  color: var(--link);
-}
-
-div#cgit .ls-mod-hash {
-  color: var(--muted);
-  font-family: var(--font-mono);
-}
-
-div#cgit td.ls-size {
-  text-align: right;
-  font-family: var(--font-mono);
-  width: 10em;
-}
-
-div#cgit td.ls-mode {
-  font-family: var(--font-mono);
-  width: 10em;
-}
-
-div#cgit td.ls-links {
-  white-space: nowrap;
-}
-
 div#cgit table.blob {
   margin-top: 0.5em;
   border-top: solid 1px var(--border-mid);
@@ -812,36 +966,6 @@ div#cgit table.commit-info {
   margin-top: 1.5em;
 }
 
-div#cgit div.cgit-panel {
-  float: right;
-  margin: 1.5em 0 1em 1em;
-  border: solid 1px var(--border-mid);
-}
-
-div#cgit div.cgit-panel strong {
-  display: block;
-  padding: 0.35em 0.6em;
-  background-color: var(--surface);
-  border-bottom: solid 1px var(--border-mid);
-}
-
-div#cgit div.cgit-panel .fields {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  align-items: center;
-  gap: 0.5em 0.9em;
-  padding: 0.6em;
-}
-
-div#cgit div.cgit-panel select,
-div#cgit div.cgit-panel input[type="submit"] {
-  width: 100%;
-}
-
-div#cgit div.cgit-panel input[type="submit"] {
-  grid-column: 2;
-}
-
 div#cgit table.commit-info th {
   text-align: left;
   font-weight: normal;
@@ -909,6 +1033,36 @@ div#cgit div.notes-footer {
   clear: left;
 }
 
+div#cgit div.cgit-panel {
+  float: right;
+  margin: 1.5em 0 1em 1em;
+  border: solid 1px var(--border-mid);
+}
+
+div#cgit div.cgit-panel strong {
+  display: block;
+  padding: 0.35em 0.6em;
+  background-color: var(--surface);
+  border-bottom: solid 1px var(--border-mid);
+}
+
+div#cgit div.cgit-panel .fields {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  align-items: center;
+  gap: 0.5em 0.9em;
+  padding: 0.6em;
+}
+
+div#cgit div.cgit-panel select,
+div#cgit div.cgit-panel input[type="submit"] {
+  width: 100%;
+}
+
+div#cgit div.cgit-panel input[type="submit"] {
+  grid-column: 2;
+}
+
 div#cgit div.diffstat-header {
   font-weight: bold;
   padding-top: 1.5em;
@@ -1023,215 +1177,6 @@ div#cgit table.ssdiff td.truncated {
   padding: 0.4em 0;
 }
 
-div#cgit .oid {
-  font-family: var(--font-mono);
-  overflow-wrap: anywhere;
-}
-
-div#cgit span.snapshot {
-  white-space: nowrap;
-}
-
-div#cgit .left {
-  text-align: left;
-}
-
-div#cgit .right {
-  text-align: right;
-}
-
-div#cgit a.button {
-  font-size: 90%;
-  padding: 0 0.5em;
-}
-
-div#cgit nav.pager ul {
-  list-style-type: none;
-  text-align: center;
-  margin: 1em 0 0 0;
-  padding: 0;
-}
-
-div#cgit nav.pager li {
-  display: inline-block;
-  margin: 0.25em 0.5em;
-}
-
-div#cgit nav.pager a {
-  color: var(--muted);
-}
-
-div#cgit nav.pager .current {
-  font-weight: bold;
-}
-
-div#cgit time.age-mins,
-div#cgit time.age-hours,
-div#cgit time.age-days,
-div#cgit time.age-weeks,
-div#cgit time.age-months,
-div#cgit time.age-years {
-  white-space: nowrap;
-}
-
-div#cgit time.age-mins {
-  font-weight: bold;
-  color: var(--age-mins);
-}
-
-div#cgit time.age-hours {
-  color: var(--age-hours);
-}
-
-div#cgit time.age-days {
-  color: var(--age-days);
-}
-
-div#cgit time.age-weeks {
-  color: var(--age-weeks);
-}
-
-div#cgit time.age-months {
-  color: var(--age-months);
-}
-
-div#cgit time.age-years {
-  color: var(--age-years);
-}
-
-div#cgit span.insertions {
-  color: var(--add);
-}
-
-div#cgit span.deletions {
-  color: var(--del);
-}
-
-div#cgit p.login-error {
-  color: var(--del);
-  font-weight: bold;
-}
-
-div#cgit form.login table {
-  border-collapse: separate;
-  border-spacing: 0 0.5em;
-}
-
-div#cgit form.login td:first-child {
-  padding-right: 0.75em;
-}
-
-div#cgit form.login input[type="text"],
-div#cgit form.login input[type="password"] {
-  width: 16em;
-  max-width: 100%;
-}
-
-div#cgit .footer {
-  padding: 0.85rem var(--gutter);
-  text-align: center;
-  font-size: 85%;
-  color: var(--footer-fg);
-}
-
-div#cgit .footer a {
-  color: var(--footer-fg);
-  text-decoration: none;
-}
-
-div#cgit .footer a:hover {
-  text-decoration: underline;
-}
-
-div#cgit span.decoration {
-  word-spacing: 0.23em;
-}
-
-div#cgit a.branch-deco,
-div#cgit a.tag-deco,
-div#cgit a.tag-annotated-deco,
-div#cgit a.remote-deco,
-div#cgit a.deco {
-  white-space: nowrap;
-  color: var(--deco-fg);
-  margin: 0 0.5em 0 0;
-  padding: 0 0.25em;
-  border: solid 1px;
-  border-radius: var(--radius-xs);
-}
-
-div#cgit a.branch-deco {
-  background-color: var(--branch-bg);
-  border-color: var(--branch-bd);
-}
-
-div#cgit a.tag-deco {
-  background-color: var(--tag-bg);
-  border-color: var(--tag-bd);
-}
-
-div#cgit a.tag-annotated-deco {
-  background-color: var(--tag-ann-bg);
-  border-color: var(--tag-ann-bd);
-}
-
-div#cgit a.remote-deco {
-  background-color: var(--remote-bg);
-  border-color: var(--remote-bd);
-}
-
-div#cgit a.deco {
-  background-color: var(--head-bg);
-  border-color: var(--head-bd);
-}
-
-div#cgit div.commit-subject a.branch-deco,
-div#cgit div.commit-subject a.tag-deco,
-div#cgit div.commit-subject a.tag-annotated-deco,
-div#cgit div.commit-subject a.remote-deco,
-div#cgit div.commit-subject a.deco {
-  font-size: 80%;
-}
-
-div#cgit div.commit-subject span.decoration {
-  word-spacing: 0.55em;
-}
-
-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;
-  background-color: var(--surface);
-  border: solid 1px var(--border-mid);
-}
-
-div#cgit table.stats td {
-  text-align: right;
-  padding: 1px 0.5em;
-  border: solid 1px var(--border-mid);
-}
-
-div#cgit table.stats td.total {
-  font-weight: bold;
-  text-align: left;
-}
-
-div#cgit table.stats td.sum {
-  color: var(--accent);
-  font-weight: bold;
-}
-
-div#cgit table.stats td.left {
-  text-align: left;
-}
-
 div#cgit table.ssdiff {
   width: 100%;
 }
@@ -1328,6 +1273,61 @@ 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;
+  background-color: var(--surface);
+  border: solid 1px var(--border-mid);
+}
+
+div#cgit table.stats td {
+  text-align: right;
+  padding: 1px 0.5em;
+  border: solid 1px var(--border-mid);
+}
+
+div#cgit table.stats td.total {
+  font-weight: bold;
+  text-align: left;
+}
+
+div#cgit table.stats td.sum {
+  color: var(--accent);
+  font-weight: bold;
+}
+
+div#cgit table.stats td.left {
+  text-align: left;
+}
+
+div#cgit p.login-error {
+  color: var(--del);
+  font-weight: bold;
+}
+
+div#cgit form.login table {
+  border-collapse: separate;
+  border-spacing: 0 0.5em;
+}
+
+div#cgit form.login td:first-child {
+  padding-right: 0.75em;
+}
+
+div#cgit form.login input[type="text"],
+div#cgit form.login input[type="password"] {
+  width: 16em;
+  max-width: 100%;
+}
+
 @media (max-width: 900px) {
   div#cgit .tabs .search {
     display: none;
-- 
cgit