From b485b925ac53efcccdc2c9b685043c9fba5c5732 Mon Sep 17 00:00:00 2001 From: Matt Corallo 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; } + } BIP 353 Human Readable Names Resolver @@ -211,7 +224,7 @@ -
+