Rebuild the page chrome as semantic HTML

The masthead, tab bar, breadcrumb, content region and footer were HTML
tables, which cannot reflow and forced the page to scroll sideways on
small screens. Class and id names are kept so custom themes keep
matching, the tabs gain title hints and the form controls accessible
names.

1 file changed, 85 insertions, 42 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index d10a24d..e02d551 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -21,99 +21,142 @@ div#cgit table {
 	border-collapse: collapse;
 }
 
-div#cgit table#header {
+div#cgit #header {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		"logo heading switch"
+		"logo desc    owner";
+	align-items: center;
+	column-gap: 10px;
 	width: 100%;
 	margin-bottom: 1em;
 }
 
-div#cgit table#header td.logo {
-	width: 96px;
-	vertical-align: top;
+div#cgit #header .logo {
+	grid-area: logo;
+	align-self: start;
+}
+
+div#cgit #header .logo img {
+	display: block;
+	max-width: 96px;
 }
 
-div#cgit table#header td.main {
+div#cgit #header h1.main {
+	grid-area: heading;
+	margin: 0;
 	font-size: 250%;
-	padding-left: 10px;
+	font-weight: normal;
 	white-space: nowrap;
 }
 
-div#cgit table#header td.main a {
+div#cgit #header h1.main a {
 	color: #000;
 }
 
-div#cgit table#header td.form {
-	text-align: right;
-	vertical-align: bottom;
-	padding-right: 1em;
-	padding-bottom: 2px;
-	white-space: nowrap;
-}
-
-div#cgit table#header td.form form,
-div#cgit table#header td.form input,
-div#cgit table#header td.form select {
+div#cgit #header .branch-switch {
+	grid-area: switch;
+	justify-self: end;
+	align-self: end;
 	font-size: 90%;
 }
 
-div#cgit table#header td.sub {
+div#cgit #header .sub {
+	grid-area: desc;
+	margin: 0;
 	color: #777;
 	border-top: solid 1px #ccc;
-	padding-left: 10px;
 }
 
-div#cgit table.tabs {
+div#cgit #header .owner {
+	grid-area: owner;
+	justify-self: end;
+	text-align: right;
+}
+
+@media (max-width: 640px) {
+	div#cgit #header {
+		grid-template-columns: auto 1fr;
+		grid-template-areas:
+			"logo heading"
+			"desc desc"
+			"owner owner"
+			"switch switch";
+		row-gap: 4px;
+	}
+	div#cgit #header .branch-switch,
+	div#cgit #header .owner {
+		justify-self: start;
+		text-align: left;
+	}
+	div#cgit #header h1.main {
+		white-space: normal;
+	}
+}
+
+div#cgit .tabs {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	column-gap: 0.5em;
 	border-bottom: solid 3px #ccc;
-	border-collapse: collapse;
 	margin-top: 2em;
-	margin-bottom: 0px;
-	width: 100%;
 }
 
-div#cgit table.tabs td {
-	padding: 0px 1em;
-	vertical-align: bottom;
+div#cgit .tabs ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	flex: 1 1 auto;
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
-div#cgit table.tabs td a {
+div#cgit .tabs li {
+	margin: 0;
+	padding: 0 1em;
+}
+
+div#cgit .tabs a {
+	display: inline-block;
 	padding: 2px 0.75em;
 	color: #777;
 	font-size: 110%;
 }
 
-div#cgit table.tabs td a.active {
+div#cgit .tabs a.active {
 	color: #000;
 	background-color: #ccc;
 }
 
-div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
+div#cgit .tabs a.external:after {
 	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC);
 	opacity: 0.5;
 	margin: 0 0 0 5px;
 }
 
-div#cgit table.tabs td.form {
-	text-align: right;
-}
-
-div#cgit table.tabs td.form form {
+div#cgit .tabs .search {
 	padding-bottom: 2px;
 	font-size: 90%;
 	white-space: nowrap;
 }
 
-div#cgit table.tabs td.form input,
-div#cgit table.tabs td.form select {
+div#cgit .tabs .search input,
+div#cgit .tabs .search select {
 	font-size: 90%;
 }
 
-div#cgit div.path {
+div#cgit .path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
 	color: #000;
 	background-color: #eee;
+	overflow-wrap: anywhere;
 }
 
-div#cgit div.content {
+div#cgit .content {
 	margin: 0px;
 	padding: 2em;
 	border-bottom: solid 3px #ccc;
@@ -662,19 +705,19 @@ div#cgit span.deletions {
 	color: #800;
 }
 
-div#cgit div.footer {
+div#cgit .footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 
-div#cgit div.footer a {
+div#cgit .footer a {
 	color: #ccc;
 	text-decoration: none;
 }
 
-div#cgit div.footer a:hover {
+div#cgit .footer a:hover {
 	text-decoration: underline;
 }