diff --git a/public/css/contact.css b/public/css/contact.css index cfcd861..cd0cd7c 100644 --- a/public/css/contact.css +++ b/public/css/contact.css @@ -1,36 +1,85 @@ form { - max-width: 400px; - margin: 1em 0; - display: flex; + max-width: 400px; + margin: 1em 0; + display: flex; + flex-direction: column; + gap: 0.75em; + flex-wrap: wrap; + align-items: center; +} + +label { + font-weight: 600; + flex: 0 0 120px; /* fixed label width */ + margin-right: 0.5rem; + text-align: right; +} + +.form-group { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; + flex-wrap: no-wrap; +} +.form-group input, +.form-group textarea { + padding: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; + font-family: inherit; + font-size: 1em; + resize: vertical; + flex: 1 1 auto; + min-width: 200px; +} + +button { + padding: 0.6em 1.2em; + background-color: #007acc; + color: white; + border: none; + border-radius: 4px; + font-weight: 600; + cursor: pointer; +} + +button:hover { + background-color: #005fa3; +} +label { + flex: 0 0 120px; + font-weight: 600; + text-align: right; +} +label.required::after { + content: " *"; + color: #d33; + font-weight: normal; + margin-left: 0.2em; + font-size: 1.1em; + vertical-align: super; + font-family: sans-serif; +} +.required-note { + color: #d33; + font-size: 0.9rem; + margin-top: 0.5rem; + font-family: sans-serif; +} +@media (max-width: 600px) { + form, .form-group { flex-direction: column; - gap: 0.75em; + align-items: stretch; } - + label { - font-weight: 600; + flex: none; + margin-right: 0; + text-align: left; } - - input, - textarea { - padding: 0.5em; - border: 1px solid #ccc; - border-radius: 4px; - font-family: inherit; - font-size: 1em; - resize: vertical; + + input, textarea { + width: 100%; } - - button { - padding: 0.6em 1.2em; - background-color: #007acc; - color: white; - border: none; - border-radius: 4px; - font-weight: 600; - cursor: pointer; - } - - button:hover { - background-color: #005fa3; - } - \ No newline at end of file +} diff --git a/src/views/layouts/main.handlebars b/src/views/layouts/main.handlebars index 09d4ad7..313bce4 100644 --- a/src/views/layouts/main.handlebars +++ b/src/views/layouts/main.handlebars @@ -1,3 +1,4 @@ + @@ -8,9 +9,7 @@ {{> headers}} -

- diff --git a/src/views/pages/contact.handlebars b/src/views/pages/contact.handlebars index bcff22d..5822e70 100644 --- a/src/views/pages/contact.handlebars +++ b/src/views/pages/contact.handlebars @@ -4,15 +4,21 @@

^* Required field

{{title}}