diff --git a/src/cards.css b/src/cards.css index c3a7a58..f389937 100644 --- a/src/cards.css +++ b/src/cards.css @@ -10,7 +10,7 @@ } @media (orientation: portrait) { .mbox { - padding: 0 calc(.5 * var(--gap)); + padding: 0 var(--gap-half); } } .mbox:last-child { diff --git a/src/form.css b/src/form.css index 5a0151b..ac76cda 100644 --- a/src/form.css +++ b/src/form.css @@ -43,6 +43,7 @@ label { transition: background-color var(--transition-duration); } +input[type="number"], input[type="password"], input[type="text"], input[type="url"], @@ -54,6 +55,7 @@ textarea { margin: 0 0 1.2rem 0; padding: var(--padding); } +input[type="number"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="url"]:focus, @@ -169,11 +171,13 @@ button:disabled { margin-left: var(--gap); } .form-inline button, +.form-inline input[type="number"], .form-inline input[type="text"], .form-inline textarea { margin: .4rem 0; } +.form-inline input[type="number"], .form-inline input[type="text"], .form-inline textarea { flex-basis: 50%; @@ -187,6 +191,46 @@ button:disabled { flex-grow: 0; } +label.number { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: var(--gap); + padding: 0; +} +* + label.number { + margin: var(--gap) 0 0 0; +} +label.number span { + flex-grow: 1; + padding: 0 0 0 var(--padding); +} +label.number input[type="number"] { + align-self: baseline; + margin-bottom: 0; +} +@media (orientation: landscape) { + label.number span { + align-self: center; + } + label.number input[type="number"] + span { + padding: 0 var(--padding) 0 0; + } +} +@media (orientation: portrait) { + label.number { + flex-direction: column; + gap: var(--gap-half); + padding: 0; + } + label.number span { + padding: 0 var(--padding); + } + label.number input[type="number"] { + align-self: stretch; + } +} + button#publish { align-self: end; order: 2; diff --git a/src/index.html b/src/index.html index 8db0b89..4d56acb 100644 --- a/src/index.html +++ b/src/index.html @@ -84,6 +84,27 @@ +