Split CSS into mobile/non and improve error div margins

diff --git a/index.html b/index.html
index 6daf593349b4c14d3426c7f532df7bfbec10aac7..fb1254c2108d880c42157a9320596b0028e408cf 100644 (file)
--- 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;
                                }