From 21601449d12ce20f9a72836995150eba772eb58b Mon Sep 17 00:00:00 2001
From: Alexander Leonhardt <equinox.salexander@gmail.com>
Date: Sat, 15 Aug 2026 19:27:30 +0200
Subject: feat: Updated the generated html code and css code to be more mobile
 friendly even on small devices.

---
 cgit.css | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 92 insertions(+), 22 deletions(-)

(limited to 'cgit.css')

diff --git a/cgit.css b/cgit.css
index 6d166d5..45471a1 100644
--- a/cgit.css
+++ b/cgit.css
@@ -11,7 +11,7 @@ td.logo {
 div#cgit {
 	padding: 0em;
 	margin: 0em;
-	font-family: mono;
+	font-family: monospace;
 	font-size: 10pt;
 	color: #eee;
 	background: #222;
@@ -42,14 +42,21 @@ div#cgit table#header td.logo {
 }
 
 div#cgit table#header td.main {
-	font-size: 250%;
+	font-size: 200%;
 	padding-left: 10px;
 	white-space: nowrap;
 	color: #777;
+	width: 1rem;
 }
 
 div#cgit table#header td.main span#root-title {
 	color: #eee;
+	font-variant: small-caps;
+}
+
+div#cgit table#header td.main span.separator {
+	font-size: 2rem;
+	color: #999;
 }
 
 div#cgit table#header td.main a {
@@ -57,28 +64,43 @@ div#cgit table#header td.main a {
 }
 
 div#cgit table#header td.form {
-	text-align: right;
+	padding-top: 1em;
 	vertical-align: bottom;
 	padding-right: 1em;
-	padding-bottom: 2px;
+	padding-bottom: 0.2rem;
 	white-space: nowrap;
+	text-align: right;
 }
 
-div#cgit table#header td.form form,
-div#cgit table#header td.form input,
-div#cgit table#header td.form select {
-	font-size: 90%;
-}
 
+div#cgit table#header td.subem {
+	color: #777;
+	padding-top: 1em;
+	padding-right: 10px;
+	text-align: right;
+}
 div#cgit table#header td.sub {
 	color: #777;
 	border-top: solid 1px #777;
 	padding-left: 10px;
+	white-space: wrap;
+	width: 1rem;
+}
+
+div#cgit table.tabs::-webkit-scrollbar {
+	display: none;
 }
 
 div#cgit table.tabs {
+	display: block;
+	mask-image: linear-gradient(to right, black 0, black calc(100% - 4rem), transparent 100%);
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-ms-overflow-style: none;  /* IE and Edge */
+  	scrollbar-width: none;  /* Firefox */
 	border-bottom: solid 1px #777;
 	border-collapse: collapse;
+	padding-right: 3rem;
 	margin-top: 2em;
 	margin-bottom: 0px;
 	width: 100%;
@@ -88,11 +110,13 @@ div#cgit table.tabs td {
 	padding: 0px 1em;
 	vertical-align: bottom;
 }
+div#cgit table.tabs tr td:first-child {
+	min-width: calc(100vw - 26em);
+}
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
 	color: #777;
-	font-size: 110%;
 }
 
 
@@ -113,6 +137,7 @@ div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https
 
 div#cgit table.tabs td.form {
 	text-align: right;
+	width: 16em;
 }
 
 div#cgit td.form input {
@@ -145,13 +170,11 @@ div#cgit td.form input[type=submit]:hover {
 
 div#cgit table.tabs td.form form {
 	padding-bottom: 2px;
-	font-size: 90%;
 	white-space: nowrap;
 }
 
 div#cgit table.tabs td.form input,
 div#cgit table.tabs td.form select {
-	font-size: 90%;
 }
 
 div#cgit div.path {
@@ -161,9 +184,19 @@ div#cgit div.path {
 	background-color: #333;
 }
 
+@media (width <= 50rem) {
+div#cgit div.content {
+	padding: 2em 0em 2em 0em;
+}
+}
+@media (width > 50rem) {
 div#cgit div.content {
-	margin: 0px;
 	padding: 2em;
+}
+}
+
+div#cgit div.content {
+	margin: 0px;
 	border-bottom: solid 1px #777;
 }
 
@@ -183,7 +216,18 @@ div#cgit table.list tr.logheader {
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #333;
+	background: #2B2B2B;
+}
+
+@media (width <= 60rem) {
+div#cgit table.list tr td:nth-child(2),div#cgit table.list tr th:nth-child(2) {
+	max-width: 20ch;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+div#cgit table.list tr td:nth-child(3),div#cgit table.list tr th:nth-child(3),div#cgit table.list tr td:nth-child(5),div#cgit table.list tr th:nth-child(5),div#cgit table.list tr td:nth-child(6),div#cgit table.list tr th:nth-child(6),.decoration {
+	display: none;
+}
 }
 
 div#cgit table.list tr:nth-child(odd) {
@@ -223,6 +267,11 @@ div#cgit table.list th {
 	vertical-align: baseline;
 }
 
+div#cgit table.list td a.cloneurl {
+	display: block;
+	white-space: wrap;
+	overflow: wrap;
+}
 div#cgit table.list td {
 	border: none;
 	padding: 0.1em 0.5em 0.1em 0.5em;
@@ -307,6 +356,7 @@ div#cgit td#content {
 div#cgit div#summary {
 	vertical-align: top;
 	margin-bottom: 1em;
+	overflow: scroll;
 }
 
 div#cgit table#downloads {
@@ -348,7 +398,9 @@ div#cgit td.ls-mode {
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px #777;
+	overflow-x: scroll;
+	display: block;
 }
 
 div#cgit table.blob td.hashes,
@@ -365,6 +417,10 @@ div#cgit table.blob td.linenumbers {
 	border-right: 1px solid gray;
 }
 
+div#cgit table.blob td.linenumbers pre {
+	line-height: 125%;
+	font-family: monospace;
+}
 div#cgit table.blob pre {
 	padding: 0; margin: 0;
 }
@@ -385,10 +441,10 @@ div#cgit table.blob td.linenumbers a:target:before {
 	color: #dc1aed;
 	display: inline-block;
 	content: "\21D2";
-	line-height: 0;
 	font-size: 1.8em;
 }
 
+
 div#cgit table.blame td.hashes,
 div#cgit table.blame td.lines,
 div#cgit table.blame td.linenumbers {
@@ -405,11 +461,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #333;
+	background: #2B2B2B;
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: #222;
 }
 
 div#cgit table.blame td.lines > div {
@@ -446,7 +502,6 @@ div#cgit table.bin-blob td {
 }
 
 div#cgit table.nowrap td {
-	white-space: nowrap;
 }
 
 div#cgit table.commit-info {
@@ -524,11 +579,15 @@ div#cgit div.notes-footer {
 }
 
 div#cgit div.diffstat-header {
+	display: block;
 	font-weight: bold;
 	padding-top: 1.5em;
 }
 
 div#cgit table.diffstat {
+	display: block;
+	width: 100%;
+	overflow-x: scroll;
 	border-collapse: collapse;
 	border: solid 1px #aaa;
 	background-color: #333;
@@ -598,7 +657,9 @@ div#cgit div.diffstat-summary {
 }
 
 div#cgit table.diff {
+	display: block;
 	width: 100%;
+	overflow: scroll;
 }
 
 div#cgit table.diff td {
@@ -624,10 +685,18 @@ div#cgit table.diff td div.del {
 	color: red;
 }
 
+@media (width <= 50rem) {
+div#cgit .oid {
+	font-family: monospace;
+	font-size: 70%;
+}
+}
+@media (width > 50rem) {
 div#cgit .oid {
 	font-family: monospace;
 	font-size: 90%;
 }
+}
 
 div#cgit .left {
 	text-align: left;
@@ -639,25 +708,26 @@ div#cgit .right {
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #dc1aed;
+	color: #bbb;
 	padding-top: 1em;
 	background-color: #222;
 }
 
 div#cgit table.list td.reposectionsingle {
 	font-style: italic;
-	color: #dc1aed;
+	color: #bbb;
 	padding-top: 1em;
 	padding-bottom: 1rem;
 	background-color: #222;
+	border-bottom: 1px dashed #777;
 }
 
 div#cgit table.list td.reposectiondesc {
 	color: #777;
-	padding-left: 1rem;
 	padding-bottom: 1rem;
 	background-color: #222;
 	font-size: 85%;
+	white-space: wrap;
 }
 
 div#cgit a.button {
-- 
cgit