1 file changed, 128 insertions, 0 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index a65bc49b..4504702c 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -1235,3 +1235,131 @@ div#cgit table.ssdiff td.space {
 div#cgit table.ssdiff td.space div {
 	min-height: 3em;
 }
+
+
+/* ---- Small screens ---------------------------------------------------- */
+
+@media (max-width: 640px) {
+	div#cgit {
+		--gutter: 0.85rem;
+		/* Grow the controls into comfortable tap targets on a touch
+		 * screen; the toggle, selects, inputs and buttons all track this. */
+		--control-h: 2.5em;
+	}
+	/* Keep the index to name and age on a phone; the description, owner
+	 * and the summary/log/tree shortcuts drop away since tapping the
+	 * name already opens the repository. Auto layout is deliberate: with
+	 * table-layout fixed the hidden columns still reserve equal width and
+	 * squeeze the name, so we let the name take all the slack and the age
+	 * hug its own text instead. */
+	div#cgit .col-desc,
+	div#cgit .col-owner,
+	div#cgit .col-links {
+		display: none;
+	}
+	div#cgit table.repolist {
+		width: 100%;
+	}
+	div#cgit table.repolist th.col-name,
+	div#cgit table.repolist td.col-name {
+		width: 100%;
+		overflow-wrap: anywhere;
+	}
+	div#cgit table.repolist th.col-idle,
+	div#cgit table.repolist td.col-idle {
+		width: 1%;
+		white-space: nowrap;
+		text-align: right;
+	}
+	/* Give the tabs a finger-sized target while keeping them tight enough
+	 * to wrap onto as few rows as possible. */
+	div#cgit .tabs a {
+		font-size: 100%;
+		padding: 0.55em 0.7em;
+	}
+	/* Keep the search compact instead of stretching it across the row.
+	 * The tab list grows to fill the line, so the search sits beside it
+	 * or wraps just beneath at a natural, tappable size. */
+	div#cgit .tabs .search {
+		display: flex;
+		align-items: center;
+		gap: 0.35em;
+		white-space: normal;
+		padding-bottom: 0;
+	}
+	div#cgit .tabs .search input.txt {
+		min-width: 0;
+		max-width: 11em;
+	}
+	/* Stack the masthead: logo, title and toggle across the top, then the
+	 * description, owner and branch switcher each on their own full row. */
+	div#cgit #header {
+		grid-template-columns: auto 1fr auto;
+		grid-template-areas:
+			"logo heading theme"
+			"desc desc    desc"
+			"owner owner  owner"
+			"switch switch switch";
+		column-gap: 8px;
+		row-gap: 6px;
+	}
+	div#cgit #header .logo img {
+		max-width: 56px;
+	}
+	div#cgit #header h1.main {
+		white-space: normal;
+		overflow-wrap: anywhere;
+		min-width: 0;
+		font-size: 190%;
+	}
+	div#cgit #header .owner {
+		justify-self: start;
+		text-align: left;
+	}
+	/* Stretch the branch switcher across the row, the select taking the
+	 * slack and the submit hugging its label. */
+	div#cgit #header .branch-switch {
+		justify-self: stretch;
+		display: flex;
+		gap: 0.4em;
+	}
+	div#cgit #header .branch-switch select {
+		flex: 1 1 auto;
+		min-width: 0;
+		max-width: none;
+	}
+	/* Unfloat the side panels so they stack full width instead of
+	 * squeezing the content into a sliver beside them. */
+	div#cgit div.cgit-panel,
+	div#cgit table#downloads,
+	div#cgit div.notes {
+		float: none;
+		margin-left: 0;
+	}
+	div#cgit div.cgit-panel {
+		margin: 1em 0;
+	}
+	div#cgit table#downloads {
+		width: 100%;
+	}
+	div#cgit table.commit-info {
+		width: 100%;
+	}
+	div#cgit table.nowrap td {
+		white-space: normal;
+	}
+}
+
+@media (max-width: 380px) {
+	/* Reclaim width on the smallest phones by shrinking the logo and the
+	 * title further so the masthead does not crowd out the content. */
+	div#cgit #header .logo img {
+		max-width: 44px;
+	}
+	div#cgit #header h1.main {
+		font-size: 160%;
+	}
+	div#cgit .tabs a {
+		padding: 0.55em 0.55em;
+	}
+}