fix: Updated the structure in the header to resemble the original design, updated css to adapt to mobile phones

1 files changed, 49 insertions, 11 deletions

diff --git a/cgit.css b/cgit.css
index 1db3571..3996db4 100644
--- a/cgit.css
+++ b/cgit.css
@@ -42,20 +42,56 @@ div#cgit table#header td.logo {
 }
 
 div#cgit table#header td.main {
+	display: inline-flex;
+	justify-content: center;
 	font-size: 200%;
-	padding-left: 10px;
+	padding-left: 1rem;
+	padding-right: 1rem;
 	white-space: nowrap;
 	color: #777;
-	width: 1rem;
 }
 
+
+div#cgit table#header tr:nth-child(2) {
+	border-top: solid 1px #777;
+}
+
+div#cgit table#header tr {
+  display: flex;
+}
+@media(width <= 40rem) {
+div#cgit table#header tr {
+  justify-content: center;
+}
+div#cgit table#header tr:nth-child(2) {
+	flex-direction: column-reverse;
+}
+div#cgit table#header tr {
+	flex-direction: column;
+}
+div#cgit table#header tbody td.form {
+	padding-top: 0.1rem;
+}
+}
+@media(width > 40rem) {
+div#cgit table#header tr {
+  justify-content: space-between;
+}
+}
+
+
 div#cgit table#header td.main span#root-title {
 	color: #eee;
 	font-variant: small-caps;
+	min-width: 15rem;
+	font-family: serif;
 }
 
 div#cgit table#header td.main span.separator {
 	font-size: 2rem;
+	padding-left: 0.4em;
+	padding-right: 0.4em;
+	line-height: 1.1em;
 	color: #999;
 }
 
@@ -64,28 +100,30 @@ div#cgit table#header td.main a {
 }
 
 div#cgit table#header td.form {
-	padding-top: 1em;
+	display: inline-flex;
+	justify-content: center;
+	padding: 0.8rem 1rem 0.2rem 1rem;
 	vertical-align: bottom;
-	padding-right: 1em;
-	padding-bottom: 0.2rem;
 	white-space: nowrap;
 	text-align: right;
 }
 
 
 div#cgit table#header td.subem {
+	display: inline-flex;
 	color: #777;
-	padding-top: 1em;
-	padding-right: 10px;
+	padding-right: 1em;
+	padding-left: 1em;
+	justify-content: center;
 	font-size: 80%;
-	text-align: right;
 }
 div#cgit table#header td.sub {
+	display: inline-flex;
+	justify-content: center;
 	color: #777;
-	border-top: solid 1px #777;
-	padding-left: 10px;
+	padding-left: 1em;
+	padding-right: 1em;
 	white-space: wrap;
-	width: 1rem;
 }
 
 div#cgit table.tabs::-webkit-scrollbar {