From 6193ddc3c97f91e0737dcc4bd74a297584bfad14 Mon Sep 17 00:00:00 2001
From: danielkvist <d94.zaragoza@gmail.com>
Date: Thu, 4 Apr 2019 22:05:29 +0200
Subject: add labels for contact form

---
 assets/css/base.css           |  6 ------
 assets/css/media-queries.css  |  5 -----
 assets/css/style.css          | 29 +++++++++++++++++++++++++++--
 exampleSite/config.toml       |  4 ++--
 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 -->
-- 
cgit v1.2.3