From f75fa295ca14cccee42e64fecbba48d10f0d1ea2 Mon Sep 17 00:00:00 2001
From: NilsUeter <nils.ueter@gmail.com>
Date: Thu, 13 Apr 2023 22:50:20 +0200
Subject: [PATCH] fix light dark mode

---
 src/App.jsx   |  4 ++--
 src/index.css | 29 +++++++++++------------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 244e46a..d141602 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -121,8 +121,8 @@ function App() {
 					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>
 						Output Examples
 					</div>
-					<img src={Demo0} />
-					<img src={Demo1} />
+					<img src={Demo0} style={{ width: "100%" }} />
+					<img src={Demo1} style={{ width: "100%" }} />
 				</div>
 			</div>
 		</div>
diff --git a/src/index.css b/src/index.css
index c2b31cf..42ccecc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,16 @@
 	-webkit-text-size-adjust: 100%;
 }
 
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #111113;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+}
+
 * {
 	box-sizing: border-box;
 	print-color-adjust: exact;
@@ -33,7 +43,7 @@ a:hover {
 
 body {
 	margin: 0;
-	min-width: 320px;
+	min-width: 700px;
 	min-height: 100vh;
 }
 
@@ -61,23 +71,6 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
-}
-
-#root {
-	color: #111113;
-}
-
 .body {
 	display: flex;
 	flex-direction: column;