merge: branch 'feat/responsive'HEADmaster

2 files changed, 161 insertions, 0 deletions

diff --git a/cgit.css b/cgit.css
index 149da0b..e41399d 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1505,3 +1505,161 @@ div#cgit .highlight .gi {
 	color: var(--text-main);
 	background-color: var(--bg-add);
 }
+
+/* responsive layout tweaks */
+div#cgit {
+	min-width: 0;
+	box-sizing: border-box;
+}
+
+div#cgit *,
+div#cgit *::before,
+div#cgit *::after {
+	box-sizing: border-box;
+}
+
+div#cgit img {
+	max-width: 100%;
+	height: auto;
+}
+
+@media (max-width: 900px) {
+	div#cgit div.content {
+		padding: 1.25em;
+	}
+
+	div#cgit div.path {
+		padding-left: 1.25em;
+		padding-right: 1.25em;
+	}
+
+	div#cgit table#downloads,
+	div#cgit div.cgit-panel {
+		float: none;
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	div#cgit div.cgit-panel table,
+	div#cgit table.hgraph {
+		width: 100%;
+	}
+
+	div#cgit table.diffstat td.graph {
+		width: 40%;
+	}
+}
+
+@media (max-width: 680px) {
+	div#cgit {
+		padding: 6px;
+	}
+
+	div#cgit div.path {
+		padding: 6px 0.75em;
+	}
+
+	div#cgit div.content {
+		padding: 0.9em 0;
+	}
+
+	div#cgit table#header,
+	div#cgit table#header tbody,
+	div#cgit table#header tr,
+	div#cgit table#header td {
+		display: block;
+		width: 100%;
+	}
+
+	div#cgit table#header td.logo {
+		display: none;
+	}
+
+	div#cgit table#header td.main {
+		font-size: 190%;
+		padding-left: 0;
+		white-space: normal;
+	}
+
+	div#cgit table#header td.sub {
+		padding-left: 0;
+	}
+
+	div#cgit table#header td.form {
+		text-align: left;
+		padding-right: 0;
+		padding-bottom: 0;
+		white-space: normal;
+	}
+
+	div#cgit table#header td.form form,
+	div#cgit table.tabs td.form form {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4em;
+		align-items: center;
+	}
+
+	div#cgit table.tabs,
+	div#cgit table.tabs tbody,
+	div#cgit table.tabs tr,
+	div#cgit table.tabs td {
+		display: block;
+		width: 100%;
+	}
+
+	div#cgit table.tabs {
+		margin-top: 1em;
+	}
+
+	div#cgit table.tabs td {
+		padding: 0;
+	}
+
+	div#cgit table.tabs td a {
+		display: block;
+		padding: 0.45em 0.7em;
+		margin: 0.2em 0;
+	}
+
+	div#cgit table.tabs td.form {
+		text-align: left;
+		padding-top: 0.4em;
+	}
+
+	div#cgit table#header td.form input,
+	div#cgit table#header td.form select,
+	div#cgit table.tabs td.form input,
+	div#cgit table.tabs td.form select {
+		max-width: 100%;
+	}
+
+	div#cgit table.list,
+	div#cgit table.blob,
+	div#cgit table.bin-blob,
+	div#cgit table.diff,
+	div#cgit table.diffstat,
+	div#cgit table.ssdiff,
+	div#cgit table.stats,
+	div#cgit table.vgraph,
+	div#cgit table.hgraph {
+		display: block;
+		max-width: 100%;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	div#cgit table.diffstat td.graph {
+		width: auto;
+		min-width: 180px;
+	}
+
+	div#cgit td#content {
+		padding: 0.8em 0;
+	}
+
+	div#cgit td.ls-mode,
+	div#cgit td.ls-size {
+		width: auto;
+	}
+}
diff --git a/head.html b/head.html
new file mode 100644
index 0000000..6e5f204
--- /dev/null
+++ b/head.html
@@ -0,0 +1,3 @@
+<!-- cgit head include for responsive rendering -->
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="color-scheme" content="light dark">