diff options
author | danielkvist <d94.zaragoza@gmail.com> | 2019-04-04 23:05:29 +0300 |
---|---|---|
committer | danielkvist <d94.zaragoza@gmail.com> | 2019-04-05 14:22:03 +0300 |
commit | 6193ddc3c97f91e0737dcc4bd74a297584bfad14 (patch) | |
tree | c5be35073d2dd383987e3a76fc33329fbb38c94b | |
parent | 90c38492050d6b6529a2e4ac9c5c90261c48d36b (diff) |
add labels for contact form
-rw-r--r-- | assets/css/base.css | 6 | ||||
-rw-r--r-- | assets/css/media-queries.css | 5 | ||||
-rw-r--r-- | assets/css/style.css | 29 | ||||
-rw-r--r-- | exampleSite/config.toml | 4 | ||||
-rw-r--r-- | layouts/partials/contact.html | 6 |
5 files changed, 32 insertions, 18 deletions
diff --git a/assets/css/base.css b/assets/css/base.css index 6c9c47e..a4a9ac0 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -61,7 +61,6 @@ input { border: none; color: var(--background); font-size: var(--text); - margin-top: 1.25rem; padding: 1.15rem 1.25rem; } @@ -69,11 +68,6 @@ input:required { outline-color: var(--red); } -label { - display: none; - visibility: hidden; -} - mark { background-color: var(--yellow); } diff --git a/assets/css/media-queries.css b/assets/css/media-queries.css index b5ce644..e6d37eb 100644 --- a/assets/css/media-queries.css +++ b/assets/css/media-queries.css @@ -24,11 +24,6 @@ padding: 1.45rem 5%; } - /* CONTACT */ - .contact__form__field > input { - max-width: 25rem; - } - /* FOOTER */ .contact-info__info { flex-direction: row; diff --git a/assets/css/style.css b/assets/css/style.css index 383bec8..004dfd7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -117,7 +117,6 @@ display: flex; flex-direction: column; min-height: 90vh; - text-align: center; justify-content: center; } @@ -130,11 +129,37 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); + justify-items: center; width: 100%; } +.contact__form__field { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(2, auto); + grid-template-areas: "label" "input"; + margin: 0.75rem 0; + justify-content: center; + width: 21rem; +} + +.contact__form__field > label { + grid-area: label; +} + .contact__form__field > input { - width: 85%; + grid-area: input; +} + +input:focus~label, +input:hover~label { + color: var(--pink); +} + +.contact__form__field--submit { + align-items: center; + display: flex; + justify-content: center; } /* FOOTER */ diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 166982d..71080c8 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -82,10 +82,10 @@ themesDir = "../.." method = "POST" section = "Contact me!" inputNameName = "Name" - inputNameLabel = "Your Name" + inputNameLabel = "Name" inputNamePlaceholder = "Your Name" inputEmailName = "Email" - inputEmailLabel = "Your Email" + inputEmailLabel = "Email" inputEmailPlaceholder = "Your Email" SubmitValue = "" diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index 0d1bf8b..386d45d 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -8,24 +8,24 @@ {{ else }} <form action="{{ $.Site.Params.form.action }}" method="{{ upper $.Site.Params.form.method }}" class="contact__form" id="contactForm"> - {{ end}} + {{ end}} <!-- Name --> <div class="contact__form__field contact__form__field--name"> - <label for="{{ $.Site.Params.form.inputNameName }}">{{ $.Site.Params.form.inputNameLabel }}</label> <input type="text" name="{{ $.Site.Params.form.inputNameName }}" placeholder="{{ $.Site.Params.form.inputNamePlaceholder }}" id="{{ $.Site.Params.form.inputNameName }}" aria-labelledby="{{ $.Site.Params.form.inputNameName }}" required> + <label for="{{ $.Site.Params.form.inputNameName }}">{{ $.Site.Params.form.inputNameLabel }}</label> </div> <!-- Email --> <div class="contact__form__field contact__form__field--email"> - <label for="{{ $.Site.Params.form.inputEmailName }}">{{ $.Site.Params.form.inputEmailLabel }}</label> <input type="email" name="{{ $.Site.Params.form.inputEmailName }}" placeholder="{{ $.Site.Params.form.inputEmailPlaceholder }}" id="{{ $.Site.Params.form.inputEmailName }}" aria-labelledby="{{ $.Site.Params.form.InputEmailName }}" required> + <label for="{{ $.Site.Params.form.inputEmailName }}">{{ $.Site.Params.form.inputEmailLabel }}</label> </div> <!-- Submit --> |