From b485b925ac53efcccdc2c9b685043c9fba5c5732 Mon Sep 17 00:00:00 2001
From: Matt Corallo <git@bluematt.me>
Date: Mon, 15 Jul 2024 23:54:30 +0000
Subject: [PATCH] Split CSS into mobile/non and improve error div margins

---
 index.html | 147 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 83 insertions(+), 64 deletions(-)

diff --git a/index.html b/index.html
index 6daf593..fb1254c 100644
--- a/index.html
+++ b/index.html
@@ -27,84 +27,27 @@
 			}
 			.intro-text {
 				color: white;
-				padding: 15px 15px 0 15px;
 				box-sizing: border-box;
 			}
 			.footer {
-				padding: 0 15px 15px 15px;
 				box-sizing: border-box;
 			}
 			.right-header {
-				padding: 15px 0 20px 0;
 				color: white;
 				background: #3B6367;
 			}
-			.right-header-paragraph {
-				padding: 0 30px 20px 30px;
-			}
 			.right-header-second-paragraph {
-				padding: 20px 20px 0 20px;
 				border-top: 1px solid #528080;
 				box-sizing: border-box;
 			}
-			@media screen and (min-width: 768px) {
-				body {
-					display: flex;
-					flex-flow: column wrap;
-					height: 100vh;
-					box-sizing: border-box;
-				}
-				.intro-text {
-					max-width: calc(50% - 15px);
-					padding: 30px 40px 0 30px;
-				}
-				.footer {
-					flex: 1;
-					max-width: calc(50% - 15px);
-					min-height: 0;
-					padding: 0 40px 30px 30px;
-				}
-				.right {
-					flex: 1 0 50%;
-					max-width: calc(50% + 14px);
-					min-width: calc(50% + 14px);
-					order: 3;
-					display: flex;
-					flex-direction: column;
-					min-height: 100%;
-					border-left: 1px solid #528080;
-				}
-				.right-header {
-					padding: 20px 0 20px 0;
-				}
-				.result {
-					height: 100%;
-					padding: 20px 30px 30px 30px !important;
-					border-top: 1px solid #528080;
-				}
-				.right-header-paragraph {
-					padding: 0 30px 30px 30px;
-				}
-				.right-header-second-paragraph {
-					padding: 20px 30px 0 30px;
-					box-sizing: border-box;
-				}
-				.right-header {
-					padding: 30px 0 20px 0;
-				}
-				.text-box {
-					font-size: 1.5em;
-				}
-				.bitcoin { font-size: 1.5em; }
-				.go-button { min-width: 2em !important; }
-				.dropdown {
-					font-size: 12pt;
-				}
-			}
 			.errors {
 				color: grey;
 				font-size: 11pt;
-				padding: 0 45px;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			.errors-filled {
+				padding: 0 45px 20px 45px;
 			}
 			.text-box, .dropdown {
 				background: transparent;
@@ -132,7 +75,6 @@
 			}
 			.go-button {
 				cursor: pointer;
-				min-width: 1.5em;
 			}
 			.mono {
 				font-family: mono;
@@ -188,6 +130,77 @@
 				cursor: pointer;
 				padding: 1px 0;
 			}
+			@media screen and (min-width: 768px) {
+				body {
+					display: flex;
+					flex-flow: column wrap;
+					height: 100vh;
+					box-sizing: border-box;
+				}
+				.intro-text {
+					max-width: calc(50% - 15px);
+					padding: 30px 40px 0 30px;
+				}
+				.footer {
+					flex: 1;
+					max-width: calc(50% - 15px);
+					min-height: 0;
+					padding: 0 40px 30px 30px;
+				}
+				.right {
+					flex: 1 0 50%;
+					max-width: calc(50% + 14px);
+					min-width: calc(50% + 14px);
+					order: 3;
+					display: flex;
+					flex-direction: column;
+					min-height: 100%;
+					border-left: 1px solid #528080;
+				}
+				.right-header {
+					padding: 20px 0 20px 0;
+				}
+				.result {
+					height: 100%;
+					padding: 20px 30px 30px 30px !important;
+					border-top: 1px solid #528080;
+				}
+				.right-header-paragraph {
+					padding: 0 30px 30px 30px;
+				}
+				.right-header-second-paragraph {
+					padding: 20px 30px 0 30px;
+				}
+				.right-header {
+					padding: 30px 0 20px 0;
+				}
+				.text-box {
+					font-size: 1.5em;
+				}
+				.bitcoin { font-size: 1.5em; }
+				.go-button { min-width: 2em; }
+				.dropdown {
+					font-size: 12pt;
+				}
+			}
+			@media screen and (max-width: 767px) {
+				.intro-text {
+					padding: 15px 15px 0 15px;
+				}
+				.footer {
+					padding: 0 15px 15px 15px;
+				}
+				.right-header {
+					padding: 15px 0 20px 0;
+				}
+				.right-header-paragraph {
+					padding: 0 30px 20px 30px;
+				}
+				.right-header-second-paragraph {
+					padding: 20px 20px 0 20px;
+				}
+				.go-button { min-width: 1.5em; }
+			}
 		</style>
 		<title>BIP 353 Human Readable Names Resolver</title>
 	</head>
@@ -211,7 +224,7 @@
 						<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
 					</svg>
 				</div>
-				<div class="errors right-header-paragraph" id="errors"></div>
+				<div class="errors" id="errors"></div>
 				<div class="right-header-second-paragraph center-contents">
 					<select id="server" class="dropdown">
 						<option value="https://dns.google/dns-query">Look up using 8.8.8.8</option>
@@ -248,30 +261,36 @@
 					const addr_parts = address_box.value.split("@");
 					if (addr_parts.length != 2) {
 						document.getElementById("paybutton").classList.add("go-button-disabled");
+						document.getElementById("errors").classList.add("errors-filled");
 						document.getElementById("errors").innerHTML = "Address should have exactly one @";
 						return true;
 					}
 					if (addr_parts[0].length == 0) {
 						document.getElementById("paybutton").classList.add("go-button-disabled");
+						document.getElementById("errors").classList.add("errors-filled");
 						document.getElementById("errors").innerHTML = "Missing user part";
 						return true;
 					}
 					if (addr_parts[1].length == 0) {
 						document.getElementById("paybutton").classList.add("go-button-disabled");
+						document.getElementById("errors").classList.add("errors-filled");
 						document.getElementById("errors").innerHTML = "Missing domain";
 						return true;
 					}
 					if (!/^[\p{ASCII}]*$/u.test(addr_parts[0])) {
 						document.getElementById("paybutton").classList.add("go-button-disabled");
+						document.getElementById("errors").classList.add("errors-filled");
 						document.getElementById("errors").innerHTML = "To protect against <a href='https://en.wikipedia.org/wiki/IDN_homograph_attack'>Homograph Attacks</a>, the user part of addres must be ASCII";
 						return true;
 					}
 					if (!/^[\p{ASCII}]*$/u.test(addr_parts[1])) {
 						document.getElementById("paybutton").classList.add("go-button-disabled");
+						document.getElementById("errors").classList.add("errors-filled");
 						document.getElementById("errors").innerHTML = "To protect against <a href='https://en.wikipedia.org/wiki/IDN_homograph_attack'>Homograph Attacks</a>, the domain part of addres must be ASCII";
 						return true;
 					}
 					document.getElementById("paybutton").classList.remove("go-button-disabled");
+					document.getElementById("errors").classList.remove("errors-filled");
 					document.getElementById("errors").innerHTML = "";
 					return true;
 				}
-- 
2.39.5