From c4bb3af49b697d1f682aa4a23280bd2299ecd6a0 Mon Sep 17 00:00:00 2001
From: Thom Vaughan <thom@commoncrawl.org>
Date: Thu, 4 Jul 2024 10:20:48 +0100
Subject: [PATCH] feat: add media query for mobile devices

---
 docs/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/docs/style.css b/docs/style.css
index d5f8894..b78574f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -245,3 +245,55 @@ a {
 a:hover {
     text-decoration: underline;
 }
+
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+        padding: 15px;
+    }
+
+    .footer {
+        padding: 10px;
+        font-size: 9px;
+    }
+
+    .dark-mode-button {
+        font-size: 9px;
+    }
+
+    .footer-content {
+        font-size: 9px;
+        gap: 5px;
+    }
+
+    .lookup-section, .definition, .result {
+        margin-bottom: 15px;
+    }
+
+    .word {
+        font-size: 24px;
+    }
+
+    .pronunciation, .pos, .definition-text, label, select {
+        font-size: 14px;
+    }
+
+    .lookup-section label, .lookup-section select {
+        display: block;
+        margin-bottom: 10px;
+        width: 100%;
+    }
+
+    .lookup-section select {
+        width: 100%;
+    }
+
+    table, th, td {
+        font-size: 14px;
+        padding: 10px;
+    }
+
+    th:first-child, td:first-child, th:last-child, td:last-child {
+        width: auto;
+    }
+}