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;
 }