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;
- }
}