From e92971d65318c709f3efabace29223ce0880ffb5 Mon Sep 17 00:00:00 2001
From: Balint Erdosi <erdosib@gmail.com>
Date: Sat, 4 Jan 2020 16:22:42 +0100
Subject: [PATCH 1/3] Initial commit

Signed-off-by: Balint Erdosi <erdosib@gmail.com>
---
 css/style.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/css/style.css b/css/style.css
index de5fd17..cadbac6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -219,6 +219,41 @@
 }
 }
 
+/* smartphones */
+@media screen and (orientation: portrait) and (max-width: 12cm) and (min-height: 10cm) {
+	#app {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 50px);
+	}
+	#city-list-left {
+		order: 2;
+		width: 100%;
+		flex: min-content;
+	}
+	#city-list-left ul.city-list {
+		flex-direction: row;
+		display: flex;
+		flex-wrap: wrap;
+	}
+	#city-list-left ul.city-list li {
+		flex: min-content;
+		min-width: 50%;
+	}
+	#city-list-left ul.city-list li:last-child {
+		flex: auto;
+		min-width: 100%;
+	}
+	#city-right {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+	#city-right tr td:nth-of-type(n+4), th:nth-of-type(n+4) {
+		display: none;
+	}
+}
+
 #app {
 	width: 100%;
 }

From fe0e18b4e9b9ae6f5de05173d35091276ae23b35 Mon Sep 17 00:00:00 2001
From: Balint Erdosi <erdosib@gmail.com>
Date: Sat, 4 Jan 2020 16:23:57 +0100
Subject: [PATCH 2/3] Remove wrapping of cities

Signed-off-by: Balint Erdosi <erdosib@gmail.com>
---
 css/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index cadbac6..2442ad8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -234,7 +234,6 @@
 	#city-list-left ul.city-list {
 		flex-direction: row;
 		display: flex;
-		flex-wrap: wrap;
 	}
 	#city-list-left ul.city-list li {
 		flex: min-content;

From 75b566414745c8a23229e246ab7c128906fdf091 Mon Sep 17 00:00:00 2001
From: Balint Erdosi <erdosib@gmail.com>
Date: Sat, 25 Jan 2020 22:18:49 +0100
Subject: [PATCH 3/3] Improve responsive layout for tablets

Signed-off-by: Balint Erdosi <erdosib@gmail.com>
---
 css/style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 2442ad8..2c27b76 100644
--- a/css/style.css
+++ b/css/style.css
@@ -219,8 +219,52 @@
 }
 }
 
+/* tablets */
+@media (max-width: 1000px) {
+	#city-right {
+		padding: 0;
+	}
+	#city-forecast-panel {
+		float: none;
+		width: 100%;
+	}
+}
+@media (max-width: 900px) {
+	#city-right {
+		padding: 0;
+	}
+	#city-forecast-panel {
+		float: none;
+		width: 100%;
+	}
+}
+
+/* breakpoints for horizontal city list and the forecast table */
+@media screen and (max-width: 850px) and (min-width: 600px) {
+	#city-list-left ul.city-list li {
+		min-width: 33%;
+	}
+}
+@media screen and (max-width: 600px) and (min-width: 350px) {
+	#city-list-left ul.city-list li {
+		min-width: 50%;
+	}
+
+	#city-right tr td:nth-of-type(n+4), th:nth-of-type(n+4) {
+		display: none;
+	}
+}
+@media screen and (max-width: 350px) {
+	#city-list-left ul.city-list li {
+		min-width: 100%;
+	}
+	#city-right tr td:nth-of-type(n+5), th:nth-of-type(n+5) {
+		display: none;
+	}
+}
+
 /* smartphones */
-@media screen and (orientation: portrait) and (max-width: 12cm) and (min-height: 10cm) {
+@media screen and (max-width: 850px) and (min-height: 10cm) {
 	#app {
 		display: flex;
 		flex-direction: column;
@@ -237,20 +281,15 @@
 	}
 	#city-list-left ul.city-list li {
 		flex: min-content;
-		min-width: 50%;
 	}
 	#city-list-left ul.city-list li:last-child {
 		flex: auto;
-		min-width: 100%;
 	}
 	#city-right {
 		display: flex;
 		flex-direction: column;
 		padding: 0;
 	}
-	#city-right tr td:nth-of-type(n+4), th:nth-of-type(n+4) {
-		display: none;
-	}
 }
 
 #app {