From 2cbb554c351e3280cf5e7f714a9c9901c8b11cd6 Mon Sep 17 00:00:00 2001
From: Michael Kelly <m@michaelkelly.org>
Date: Sat, 7 Oct 2023 21:39:13 -0700
Subject: [PATCH] Make it look OK on a phone

---
 README.md       |  3 +++
 static/main.css | 20 ++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b6e4206..9e377cf 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,9 @@ screen from Adafruit: <https://www.adafruit.com/product/2260>
 
 ![weatherdash-photo](./weatherdash-photo.jpg)
 
+I also tried to make it look all right on a portrait-mode phone, in case you
+want to use that.
+
 ## Installation
 
 This requires a working [Go](https://golang.org) installation, and GNU Make.
diff --git a/static/main.css b/static/main.css
index be1c2cb..6c4e8d0 100644
--- a/static/main.css
+++ b/static/main.css
@@ -31,6 +31,7 @@ body {
   margin: auto;
 }
 
+
 .weather-container {}
 
 .left, .right {
@@ -41,11 +42,11 @@ body {
 
 .left {
   float: left;
-  width: 35%;
+  width: 40%;
 }
 
 .right {
-  width: 60%;
+  width: 55%;
 }
 
 .weather-desc {
@@ -99,3 +100,18 @@ body {
   width: 25%;
 }
 
+/* This is phone mode. */
+@media(max-width: 699px) {
+  .main-container {
+    width: 100%;
+    display: block;
+    position: inherit;
+  }
+  .hourly-container {
+    width: 100%;
+  }
+  .left, .right {
+    width: 100%;
+    display: block;
+  }
+}
-- 
2.45.2