From 70077ea5d203a6bfb51877e67616f9be9787a4a9 Mon Sep 17 00:00:00 2001 From: Blaz Blokar Date: Wed, 19 Jan 2022 23:52:15 +0100 Subject: [PATCH] css improvements --- index.html | 5 ++-- static/style.css | 74 +++++++++++++++++++++--------------------------- 2 files changed, 36 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index bfc1287..9b5d4c1 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + @@ -28,8 +29,8 @@
- @{{ domains[0] }} - @ + @{{ domains[0] }} + @ diff --git a/static/style.css b/static/style.css index f2d0eef..984cc1a 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body { display: flex; align-items: center; @@ -128,46 +132,34 @@ label { background-color: #f3f3f3; } +input#name { + margin-right: 4px; + margin-bottom: 0; +} + select#domain { - width: 50%; - height: 35px; + min-height: 100%; + margin-left: 4px; + margin-bottom: 0; outline: none; padding: 0 10px; font-size: 14px; border-radius: 5px; - margin-bottom: 25px; letter-spacing: 0.5px; border: 1px solid #999; background-color: #f3f3f3; } .input.full-width { - width: calc(100% - 20px); + width: 100%; } -.suffix { - height: 35px; - width: 50%; - padding: 0 10px; - margin-bottom: 25px; - display: inline-flex; - font-size: 16px; - font-weight: 600; - align-items: center; - word-break: keep-all; - letter-spacing: 0.5px; -} -.suffix-hack { - height: 35px; - padding: 0 10px; - margin-bottom: 25px; - display: inline-flex; - font-size: 16px; - font-weight: 600; +.domain-wrapper { + display: flex; + flex-direction: row; align-items: center; - word-break: keep-all; - letter-spacing: 0.5px; + padding-bottom: 20px; } select { @@ -239,11 +231,6 @@ select { word-break: break-all; } -.domain-wrapper { - display: flex; - flex-direction: row; -} - #qr { margin: 20px auto; display: block; @@ -270,24 +257,29 @@ select { .domain-wrapper { display: flex; flex-direction: column; + align-items: center; + } + + input#name { + margin: 0; + margin-bottom: 10px; + width: 100%; + max-width: 100%; + } + + select#domain { + margin: 0; + margin-top: 10px; + width: 100%; + max-width: 100%; } .input { margin-bottom: 5px; - width: calc(100% - 25px); + width: 100%; } .input.full-width { margin-bottom: 25px; } - - .suffix { - padding: 0; - margin-bottom: 25px; - } - - .suffix-hack { - padding: 0; - margin-bottom: 0px; - } }