From 81b764174d296519dc96b983ed545c88f354d8b0 Mon Sep 17 00:00:00 2001
From: Timur Ismagilov <bouncepaw2@ya.ru>
Date: Thu, 15 Jul 2021 21:52:00 +0500
Subject: [PATCH] Make the top bar look like a long list on mobiles

---
 static/default.css | 76 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 23 deletions(-)

diff --git a/static/default.css b/static/default.css
index 072ccc4..1ae2bbd 100644
--- a/static/default.css
+++ b/static/default.css
@@ -597,10 +597,17 @@ kbd {
 /*
  * Top bar
  */
+.top-bar__wrapper {
+	display: grid;
+	padding: 0;
+}
 .top-bar a {
 	color: black;
 	text-decoration: none;
 }
+.top-bar__section {
+	display: block;
+}
 
 .top-bar__home-link:hover,
 .auth-links__link:hover,
@@ -624,14 +631,9 @@ kbd {
 		padding: 0;
 	}
 	.top-bar__wrapper {
-		display: grid;
-		padding: 0;
 		margin: 0 2rem;
 		grid-template-columns: 1fr 1fr 1fr;
 	}
-	.top-bar__section {
-		display: block;
-	}
 	.top-bar__section_home {
 		grid-column: 1 / span 1;
 	}
@@ -654,30 +656,58 @@ kbd {
 		justify-content: flex-end;
 		margin-right: -.5rem;
 	}
-	.auth-links__box {
-		display: block;
-		line-height: 2rem;
-	}
-	.auth-links__link {
-		display: block;
-		padding: 0 .5rem;
-	}
 	.top-bar__section_home,
 	.top-bar__highlights {
 		display: flex;
 		padding: 0;
 		margin: 0 0 0 -.5rem;
 	}
-	.top-bar__home-link-wrapper,
-	.top-bar__highlight {
-		display: block;
-		margin-right: .5rem;
-		line-height: 2rem;
+}
+
+
+.auth-links__box {
+	display: block;
+	line-height: 2rem;
+}
+.auth-links__link {
+	display: block;
+	padding: 0 .5rem;
+}
+.top-bar__home-link-wrapper,
+.top-bar__highlight {
+	display: block;
+	margin-right: .5rem;
+	line-height: 2rem;
+}
+.top-bar__home-link,
+.auth-links__link,
+.top-bar__highlight-link {
+	display: block;
+	padding: 0 .5rem;
+}
+
+@media screen and (max-width: 799px) {
+	.top-bar__wrapper {
+		grid-template-columns: 1fr 2fr 1fr;
 	}
-	.top-bar__home-link,
-	.auth-links__link,
-	.top-bar__highlight-link {
-		display: block;
-		padding: 0 .5rem;
+	.top-bar__section_home {
+		grid-column: 1 / span 1;
+	}
+	.top-bar__section_search {
+		grid-column: 2 / span 1;
+		text-align: center;
+	}
+	.top-bar__section_auth,
+	.top-bar__section_highlights {
+		grid-column: 1 / span 3;
+	}
+	.auth-links {
+		padding: 0;
+	}
+	.top-bar__highlights {
+		padding: 0;
+	}
+	.top-bar__highlight {
+		margin-right: 0;
 	}
 }
\ No newline at end of file