Even out font sizes and drop dead styles

author: Bryce Kwon <bryce@brycekwon.com> 2026-07-17 23:14:32 -1000
committer: Bryce Kwon <bryce@brycekwon.com> 2026-07-17 23:14:32 -1000
commit: 33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0 (patch)
parent: 62fdecc77498ae08fb305064d747b2a431195533 (diff)
tree: 5820a06fb178d396bf11403b155212156859617c
download: cgit-33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0.tar.gz
cgit-33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0.zip
1 file changed, 47 insertions, 116 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index 94b4fd0..7a425f5 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -85,6 +85,11 @@ div#cgit {
 	--gutter: 1.25rem;
 	/* Shared height so the toggle, dropdowns and fields all agree. */
 	--control-h: 2em;
+	/* Corner radii, one size for controls and blocks, smaller for
+	 * inline code, smallest for ref badges. */
+	--radius: 5px;
+	--radius-s: 3px;
+	--radius-xs: 2px;
 
 	padding: 0;
 	margin: 0em;
@@ -151,7 +156,7 @@ div#cgit button {
 	color: var(--fg);
 	background-color: var(--surface);
 	border: solid 1px var(--border);
-	border-radius: 5px;
+	border-radius: var(--radius);
 	padding: 0 0.5em;
 	line-height: 1.3;
 	vertical-align: middle;
@@ -220,7 +225,7 @@ div#cgit #header .theme-toggle {
 	color: var(--muted);
 	background-color: var(--surface);
 	border: solid 1px var(--border);
-	border-radius: 5px;
+	border-radius: var(--radius);
 	cursor: pointer;
 	line-height: 1;
 }
@@ -282,10 +287,21 @@ div#cgit #header .sub {
 	grid-area: desc;
 	margin: 0;
 	color: var(--muted);
-	border-top: solid 1px var(--border);
 	overflow-wrap: anywhere;
 }
 
+/* The rule under the masthead. A grid pseudo item rather than a border
+ * on the description, so it runs from the title through under the
+ * branch switcher and theme toggle to the right edge. */
+div#cgit #header::before {
+	content: "";
+	grid-column: 2 / -1;
+	grid-row: 2;
+	align-self: start;
+	height: 0;
+	border-top: solid 1px var(--border);
+}
+
 div#cgit #header .owner {
 	grid-area: owner;
 	justify-self: end;
@@ -324,8 +340,7 @@ div#cgit .tabs a {
 	display: inline-block;
 	padding: 0.3em 0.7em;
 	color: var(--muted);
-	font-size: 105%;
-	border-radius: 5px 5px 0 0;
+	border-radius: var(--radius) var(--radius) 0 0;
 }
 
 div#cgit .tabs a:hover {
@@ -357,15 +372,9 @@ div#cgit .tabs a.external:after {
 
 div#cgit .tabs .search {
 	padding-bottom: 2px;
-	font-size: 90%;
 	white-space: nowrap;
 }
 
-div#cgit .tabs .search input,
-div#cgit .tabs .search select {
-	font-size: 90%;
-}
-
 div#cgit input.txt {
 	max-width: 12em;
 }
@@ -457,7 +466,6 @@ div#cgit table.list td.commitgraph .column5 { color: var(--col5); }
 div#cgit table.list td.commitgraph .column6 { color: var(--col6); }
 
 div#cgit table.list td.logsubject {
-	font-family: var(--font-mono);
 	font-weight: bold;
 }
 
@@ -484,17 +492,6 @@ div#cgit table.list td a:hover {
 
 /* ---- Repository index ------------------------------------------------- */
 
-div#cgit td#sidebar input.txt {
-	width: 100%;
-	margin: 2px 0px 0px 0px;
-}
-
-div#cgit td#content {
-	vertical-align: top;
-	padding: 1em 2em 1em 1em;
-	border: none;
-}
-
 div#cgit div#summary {
 	vertical-align: top;
 	margin-bottom: 1em;
@@ -585,7 +582,7 @@ div#cgit .markdown hr {
 div#cgit .markdown code {
 	background: var(--surface-2);
 	border: 1px solid var(--border);
-	border-radius: 3px;
+	border-radius: var(--radius-s);
 	padding: 0.1em 0.35em;
 	font-size: 0.95em;
 }
@@ -593,7 +590,7 @@ div#cgit .markdown code {
 div#cgit .markdown pre {
 	background: var(--surface-2);
 	border: 1px solid var(--border);
-	border-radius: 4px;
+	border-radius: var(--radius);
 	padding: 0.7em 0.9em;
 	overflow-x: auto;
 }
@@ -637,25 +634,13 @@ div#cgit div.help p {
 div#cgit div.help pre.urls {
 	background: var(--surface-2);
 	border: 1px solid var(--border);
-	border-radius: 4px;
+	border-radius: var(--radius);
 	padding: 0.6em 0.9em;
 	font-family: var(--font-mono);
 	font-size: 90%;
 	overflow-x: auto;
 }
 
-div#cgit table#downloads {
-	float: right;
-	border-collapse: collapse;
-	border: solid 1px var(--border-strong);
-	margin-left: 0.5em;
-	margin-bottom: 0.5em;
-}
-
-div#cgit table#downloads th {
-	background-color: var(--surface);
-}
-
 div#cgit div#blob {
 	border: solid 1px var(--border-strong);
 }
@@ -666,19 +651,11 @@ div#cgit div.error {
 	margin: 1em 2em;
 }
 
-div#cgit td.reposection {
-	font-style: italic;
-	color: var(--faint);
-}
-
 div#cgit table.list td.reposection {
 	font-style: italic;
 	color: var(--faint);
 }
 
-div#cgit td.toplevel-repo {
-}
-
 div#cgit table.list td.sublevel-repo {
 	padding-left: 1.5em;
 }
@@ -964,12 +941,10 @@ div#cgit table.diffstat th {
 	text-align: left;
 	text-decoration: underline;
 	padding: 0.1em 1em 0.1em 0.1em;
-	font-size: 100%;
 }
 
 div#cgit table.diffstat td {
 	padding: 0.2em 0.2em 0.1em 0.1em;
-	font-size: 100%;
 	border: none;
 }
 
@@ -1084,16 +1059,8 @@ div#cgit .right {
 /* ---- Buttons / pager -------------------------------------------------- */
 
 div#cgit a.button {
-	font-size: 80%;
-	padding: 0em 0.5em;
-}
-
-div#cgit a.primary {
-	font-size: 100%;
-}
-
-div#cgit a.secondary {
 	font-size: 90%;
+	padding: 0em 0.5em;
 }
 
 div#cgit ul.pager {
@@ -1167,7 +1134,7 @@ div#cgit span.deletions {
 div#cgit .footer {
 	padding: 0.85rem var(--gutter);
 	text-align: center;
-	font-size: 80%;
+	font-size: 85%;
 	color: var(--footer-fg);
 }
 
@@ -1197,7 +1164,7 @@ div#cgit a.branch-deco {
 	padding: 0px 0.25em;
 	background-color: var(--branch-bg);
 	border: solid 1px var(--branch-bd);
-	border-radius: 2px;
+	border-radius: var(--radius-xs);
 }
 
 div#cgit a.tag-deco {
@@ -1206,7 +1173,7 @@ div#cgit a.tag-deco {
 	padding: 0px 0.25em;
 	background-color: var(--tag-bg);
 	border: solid 1px var(--tag-bd);
-	border-radius: 2px;
+	border-radius: var(--radius-xs);
 }
 
 div#cgit a.tag-annotated-deco {
@@ -1215,7 +1182,7 @@ div#cgit a.tag-annotated-deco {
 	padding: 0px 0.25em;
 	background-color: var(--tag-ann-bg);
 	border: solid 1px var(--tag-ann-bd);
-	border-radius: 2px;
+	border-radius: var(--radius-xs);
 }
 
 div#cgit a.remote-deco {
@@ -1224,7 +1191,7 @@ div#cgit a.remote-deco {
 	padding: 0px 0.25em;
 	background-color: var(--remote-bg);
 	border: solid 1px var(--remote-bd);
-	border-radius: 2px;
+	border-radius: var(--radius-xs);
 }
 
 div#cgit a.deco {
@@ -1233,7 +1200,7 @@ div#cgit a.deco {
 	padding: 0px 0.25em;
 	background-color: var(--head-bg);
 	border: solid 1px var(--head-bd);
-	border-radius: 2px;
+	border-radius: var(--radius-xs);
 }
 
 div#cgit div.commit-subject a.branch-deco,
@@ -1242,7 +1209,7 @@ div#cgit div.commit-subject a.tag-annotated-deco,
 div#cgit div.commit-subject a.remote-deco,
 div#cgit div.commit-subject a.deco {
 	margin-left: 1em;
-	font-size: 75%;
+	font-size: 80%;
 }
 
 
@@ -1284,51 +1251,6 @@ div#cgit table.stats td.left {
 	text-align: left;
 }
 
-div#cgit table.vgraph {
-	border-collapse: separate;
-	border: solid 1px var(--border-strong);
-	height: 200px;
-}
-
-div#cgit table.vgraph th {
-	background-color: var(--surface);
-	font-weight: bold;
-	border: solid 1px var(--bg);
-	padding: 1px 0.5em;
-}
-
-div#cgit table.vgraph td {
-	vertical-align: bottom;
-	padding: 0px 10px;
-}
-
-div#cgit table.vgraph div.bar {
-	background-color: var(--surface);
-}
-
-div#cgit table.hgraph {
-	border: solid 1px var(--border-strong);
-	width: 800px;
-	max-width: 100%;
-}
-
-div#cgit table.hgraph th {
-	background-color: var(--surface);
-	font-weight: bold;
-	border: solid 1px var(--border-strong);
-	padding: 1px 0.5em;
-}
-
-div#cgit table.hgraph td {
-	vertical-align: middle;
-	padding: 2px 2px;
-}
-
-div#cgit table.hgraph div.bar {
-	background-color: var(--surface);
-	height: 1em;
-}
-
 
 /* ---- Side-by-side diff ------------------------------------------------ */
 
@@ -1337,7 +1259,7 @@ div#cgit table.ssdiff {
 }
 
 div#cgit table.ssdiff td {
-	font-size: 75%;
+	font-size: 85%;
 	font-family: var(--font-mono);
 	white-space: pre;
 	padding: 1px 4px 1px 4px;
@@ -1432,7 +1354,17 @@ div#cgit table.ssdiff td.space div {
 }
 
 
-/* ---- Small screens ---------------------------------------------------- */
+/* ---- Responsive tiers --------------------------------------------------
+ * Three tiers around the default layout. Wide screens get a roomier
+ * gutter and a slightly larger base size, phones trade chrome for
+ * content, and the smallest phones tighten the masthead further. */
+
+@media (min-width: 1440px) {
+	div#cgit {
+		--gutter: 2rem;
+		font-size: 14px;
+	}
+}
 
 @media (max-width: 640px) {
 	div#cgit {
@@ -1482,7 +1414,6 @@ div#cgit table.ssdiff td.space div {
 	/* 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;
 	}
 	/* No search on a phone. Typing queries there is nobody's real
@@ -1504,6 +1435,10 @@ div#cgit table.ssdiff td.space div {
 	div#cgit #header .logo img {
 		max-width: 56px;
 	}
+	/* On the stacked mobile masthead the rule spans the full width. */
+	div#cgit #header::before {
+		grid-column: 1 / -1;
+	}
 	div#cgit #header h1.main {
 		white-space: normal;
 		overflow-wrap: anywhere;
@@ -1522,7 +1457,6 @@ div#cgit table.ssdiff td.space div {
 	/* 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;
@@ -1530,9 +1464,6 @@ div#cgit table.ssdiff td.space div {
 	div#cgit div.cgit-panel {
 		margin: 1em 0;
 	}
-	div#cgit table#downloads {
-		width: 100%;
-	}
 	div#cgit table.commit-info {
 		width: 100%;
 	}
author	Bryce Kwon <bryce@brycekwon.com>	2026-07-17 23:14:32 -1000
committer	Bryce Kwon <bryce@brycekwon.com>	2026-07-17 23:14:32 -1000
commit	33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0 (patch)
parent	62fdecc77498ae08fb305064d747b2a431195533 (diff)
tree	5820a06fb178d396bf11403b155212156859617c
download	cgit-33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0.tar.gz cgit-33f4ee0f1aae13d050d3f71f2f5bf9281218c0e0.zip