feat!: Rework, following cgit fork modifications

3 files changed, 126 insertions, 141 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..69e615b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,6 @@
+# cgit_theme
+
+The CSS and JS used for <https://git.syndamia.com>.
+
+**Beware:**
+These stylings are made for my [custom fork of cgit](https://git.syndamia.com/fork/cgit/), where I change significant portions of how HTML generation works.
diff --git a/cgit.css b/cgit.css
index c1cf6ad..e68bc77 100644
--- a/cgit.css
+++ b/cgit.css
@@ -44,12 +44,10 @@ div#cgit a:hover {
   text-decoration: underline;
 }
 
-div#cgit table[summary="repository info"] a[href$=".zip"],
-div#cgit table[summary="repository info"] a[href$=".tar"],
-div#cgit table[summary="repository info"] a[href$=".tar.gz"],
-div#cgit table[summary="commit info"] a[href$=".zip"],
-div#cgit table[summary="commit info"] a[href$=".tar"],
-div#cgit table[summary="commit info"] a[href$=".tar.gz"] {
+div#cgit a[href$=".zip"],
+div#cgit a[href$=".tar"],
+div#cgit a[href$=".tar.gz"],
+div#cgit div.path a {
   color: /*--yellow*/#f5e16c;
 }
 
@@ -133,13 +131,13 @@ div#cgit table.tabs {
 }
 
 div#cgit table.tabs td {
-  padding: 0px 1em;
+  padding: 0.25em 0.5em;
   vertical-align: bottom;
   background-color: /*--gray-2*/#262626;
 }
 
 div#cgit table.tabs td a {
-  padding: 2px 0.75em;
+  padding: 0.5em 0.5em 0.25em 0.5em;
   font-size: 110%;
 }
 
@@ -189,19 +187,21 @@ div#cgit div.path {
 div#cgit div.content {
   margin: 0px;
   padding: 2em 2em 4em 2em;
-  min-height: calc(100vh - 17em);
-  overflow: scroll;
+  min-height: calc(100vh - 22em);
+  overflow-x: scroll;
 }
 
 
-div#cgit table.list {
+div#cgit table.list,
+div#cgit table.stats {
   width: 100%;
   border: none;
   border-collapse: separate;
   border-spacing: 0em;
 }
 
-div#cgit table.list tr {
+div#cgit table.list tr,
+div#cgit table.stats tr {
   background-color: /*--gray-1*/#1f1f1f;
 }
 
@@ -214,7 +214,8 @@ div#cgit table.list tr.nohover > td[colspan="5"] {
   background-color: inherit;
 }
 
-div#cgit table.list th {
+div#cgit table.list th,
+div#cgit table.stats th {
   font-weight: bold;
   font-size: 1.1em;
   padding: 0.5rem;
@@ -224,36 +225,68 @@ div#cgit table.list th {
   border: 1px solid /*--gray-4*/#404040;
 }
 
-div#cgit table.list th:not(:first-child):not(last-child) {
+div#cgit table.list th:not(:first-child):not(last-child),
+div#cgit table.stats th:not(:first-child):not(last-child) {
   border-left: none;
   border-right: none;
 }
 
-div#cgit table.list th:first-child {
+div#cgit table.list th:first-child,
+div#cgit table.stats th:first-child {
   border-right: none;
   border-top-left-radius: /*--radius-large*/6px;
 }
 
-div#cgit table.list th:last-child {
+div#cgit table.list th:last-child,
+div#cgit table.stats th:last-child {
   border-left: none;
   border-top-right-radius: /*--radius-large*/6px;
 }
 
-div#cgit table.list td {
+div#cgit table.list td,
+div#cgit table.stats td {
   border: none;
   border-bottom: 1px solid /*--gray-4*/#404040;
   padding: 0.25em 0.5em;
   background-color: /*--gray-3*/#303030;
 }
 
-div#cgit table.list td:first-child {
+div#cgit table.list td:first-child,
+div#cgit table.stats td:first-child {
   border-left: 1px solid /*--gray-4*/#404040;
 }
 
-div#cgit table.list td:last-child {
+div#cgit table.list td:last-child,
+div#cgit table.stats td:last-child {
   border-right: 1px solid /*--gray-4*/#404040;
 }
 
+div#cgit table.list tr:hover td,
+div#cgit table.stats tr:hover td {
+  background-color: /*--gray-4*/#404040;
+}
+
+div#cgit table.stats {
+  width: initial;
+}
+
+div#cgit table.stats th {
+  text-align: left;
+}
+
+div#cgit table.stats td.total,
+div#cgit table.stats td.sum {
+  font-weight: bold;
+  color: /*--green-2*/#2da160;
+}
+
+div#cgit table.stats th.year-start {
+  border-left: 2px solid #404040 !important;
+}
+div#cgit table.stats td.year-start {
+  border-left: 2px solid #4f4f4f !important;
+}
+
 div#cgit table.list td.commitgraph {
   font-family: monospace;
   white-space: pre;
@@ -548,7 +581,6 @@ div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit .ls-mod {
 div#cgit td.ls-size {
   text-align: right;
   font-family: monospace;
-  width: 10em;
 }
 
 div#cgit td.ls-mode {
@@ -643,25 +675,29 @@ div#cgit table.bin-blob td {
   padding: 0em 1em;
 }
 
+/*
 div#cgit table.nowrap td {
   white-space: nowrap;
 }
+*/
 
 div#cgit table.commit-info {
   border-collapse: collapse;
-  margin-top: 1.5em;
 }
 
 div#cgit div.cgit-panel {
   float: right;
-  margin-top: 1.5em;
   background-color: /*--gray-4*/#404040;
+  padding: 0.75em 0.5em;
+  border-radius: 6px;
+  text-align: center;
 }
 
 div#cgit div.cgit-panel table {
   border-collapse: collapse;
   border: solid 1px #aaa;
   background-color: #eee;
+  margin-top: 0.5em;
 }
 
 div#cgit div.cgit-panel th {
@@ -697,11 +733,11 @@ div#cgit table.commit-info td {
 
 div#cgit table.commit-info tr:first-child td,
 div#cgit table.commit-info tr:first-child th {
-  padding-top: 2em;
+  padding-top: 1em;
 }
 div#cgit table.commit-info tr:last-child td,
 div#cgit table.commit-info tr:last-child th {
-  padding-bottom: 2em;
+  padding-bottom: 1em;
 }
 div#cgit table.commit-info td:first-child,
 div#cgit table.commit-info th:first-child {
@@ -756,6 +792,20 @@ div#cgit div.notes-footer {
   clear: left;
 }
 
+div#cgit div.diffstat-container {
+  font-weight: bold;
+  padding: 1em 1.25em;
+  background-color: #404040;
+  margin: 1.25em 0;
+}
+
+div#cgit div.add, div#cgit span.add {
+  color: /*--green-2*/#2da160;
+}
+div#cgit div.del, div#cgit span.del {
+  color: red;
+}
+
 div#cgit div.diffstat-header {
   font-weight: bold;
   padding: 0em 1.25em;
@@ -764,8 +814,8 @@ div#cgit div.diffstat-header {
 
 div#cgit table.diffstat {
   border-collapse: collapse;
-  border: solid 1px #aaa;
   background-color: #eee;
+  margin-top: 0.5em;
 }
 
 div#cgit table.diffstat th {
@@ -1038,39 +1088,6 @@ div#cgit div.commit-subject a.deco {
   font-size: 75%;
 }
 
-div#cgit table.stats {
-  border: solid 1px black;
-  border-collapse: collapse;
-}
-
-div#cgit table.stats th {
-  text-align: left;
-  padding: 1px 0.5em;
-  background-color: #eee;
-  border: solid 1px black;
-}
-
-div#cgit table.stats td {
-  text-align: right;
-  padding: 1px 0.5em;
-  border: solid 1px black;
-}
-
-div#cgit table.stats td.total {
-  font-weight: bold;
-  text-align: left;
-}
-
-div#cgit table.stats td.sum {
-  color: #c00;
-  font-weight: bold;
-/*  background-color: #eee; */
-}
-
-div#cgit table.stats td.left {
-  text-align: left;
-}
-
 div#cgit table.vgraph {
   border-collapse: separate;
   border: solid 1px black;
@@ -1213,6 +1230,12 @@ div#cgit table.ssdiff td.space div {
   min-height: 3em;
 }
 
+.markdown-body {
+  font-size: 16px !important;
+  padding: 0.5em;
+  box-sizing: border-box;
+}
+
 .markdown-body h1, .markdown-body h1 a,
 .markdown-body h2, .markdown-body h2 a,
 .markdown-body h3, .markdown-body h3 a,
@@ -1228,8 +1251,8 @@ div#cgit table.ssdiff td.space div {
 .markdown-body table tr {
   background-color: /*--gray-4*/#404040 !important;
 }
-.markdown-body {
-  max-width: 60em;
+.markdown-body, table[summary="tree listing"] {
+  max-width: 70rem;
   margin: 0 auto;
 }
 .markdown-body img {
@@ -1256,3 +1279,23 @@ td.lines { color:#ffeede; }
 .hl.ppc          { color: #8ec07c; }
 .hl.esc          { color: #fa8019; }
 .hl.kwe          { color: inherit; }
+
+table#summary-info {
+  width: 100%;
+}
+table#summary-info td {
+  vertical-align: baseline;
+}
+div#summary {
+  margin-top: 1em;
+}
+
+table + div#readme, #summary-info + table[summary="tree listing"] {
+  margin-top: 2em;
+}
+
+.avatar {
+  min-width: 13px;
+  min-height: 13px;
+  display: inline-block;
+}
diff --git a/cgit.js b/cgit.js
index 0514186..3ad32aa 100644
--- a/cgit.js
+++ b/cgit.js
@@ -1,88 +1,24 @@
-/* This does client-side modifications which should probably be implemented on
- * HTML generation, inside cgit. But they aren't (shouldn't be) very heavy or
- * slow, so it's probably ok.
- */
-
-// Proper device scaling
-const viewport = document.createElement("meta");
-viewport.id = "viewport";
-viewport.name = "viewport";
-viewport.content = "width=device-width initial-scale=1";
-document.head.appendChild(viewport);
-
 document.addEventListener("DOMContentLoaded", function(){
-    // Edit file tree
-    const list = document.getElementsByClassName('list')[0]
-
-    if (list !== undefined && list.summary === "tree listing") {
-        const table = list.children[0]
-        const rows = table.children
+    for (list of document.getElementsByClassName('list')) {
+        if (list.summary === "tree listing") {
+            const table = list.children[0]
+            const rows = table.children
 
-        // Reorder directories (and submodules) before files
-        var lastDir = 1
-        for (let i = 1; i < rows.length; ++i) {
-            if (!rows[i].children[0].innerText.startsWith('-')) {
-                if (i > lastDir) {
-                    table.insertBefore(rows[i], rows[lastDir])
-                }
-                ++lastDir
-            }
-        }
-
-        // Human-readable size format
-        for (const row of rows) {
-            if (row.children[2].classList.contains('ls-size')) {
-                let size = row.children[2].innerText
-                if (size < 1024) {
-                    size += ' B'
-                }
-                else if (size < 1048576) {
-                    size = (size / 1024).toFixed(1) + ' KiB'
-                }
-                else if (size < 1073741824) {
-                    size = (size / 1048576).toFixed(1) + ' MiB'
+            // Reorder directories (and submodules) before files
+            // This is done here instead of during page generation for two reasons:
+            // 1. Implementing it in generation would be difficult, since the logic
+            //    is done by a git function
+            // 2. It could be argued if your browser doesn't support javascript,
+            //    navigation would be easier if everything is ordered normally
+            var lastDir = rows[1].getAttribute('summary') == '----------' ? 2 : 1
+            for (let i = 1; i < rows.length; ++i) {
+                if (!rows[i].getAttribute('summary').startsWith('-')) {
+                    if (i > lastDir) {
+                        table.insertBefore(rows[i], rows[lastDir])
+                    }
+                    ++lastDir
                 }
-                else {
-                    size = (size / 1073741824).toFixed(1) + ' GiB'
-                }
-                row.children[2].innerText = size
             }
         }
     }
-
-    // Edit the tabs
-    const tabs = document.getElementsByClassName('tabs')[0].children[0].children[0].children[0]
-
-    if (tabs !== undefined && tabs.children.length === 7) {
-        const about   = tabs.children[0]
-        const summary = tabs.children[1]
-        const refs    = tabs.children[2]
-        const log     = tabs.children[3]
-        const tree    = tabs.children[4]
-        const commit  = tabs.children[5]
-        const diff    = tabs.children[6]
-
-        tabs.insertBefore(tree, refs)
-        tabs.insertBefore(log, refs)
-
-        about.innerText = 'README'
-        summary.innerText = 'Summary'
-        tree.innerText = 'Files'
-        log.innerText = 'Commits'
-    }
-    else if (tabs !== undefined && tabs.children.length === 6) {
-        const summary = tabs.children[0]
-        const refs    = tabs.children[1]
-        const log     = tabs.children[2]
-        const tree    = tabs.children[3]
-        const commit  = tabs.children[4]
-        const diff    = tabs.children[5]
-
-        tabs.insertBefore(tree, refs)
-        tabs.insertBefore(log, refs)
-
-        summary.innerText = 'Summary'
-        tree.innerText = 'Files'
-        log.innerText = 'Commits'
-    }
 });