add styles for contact form and fix Font Awesome

6 files changed, 80 insertions, 36 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
index dfd934d..99473be 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -8,7 +8,7 @@ a:hover {
 
 body {
     background-color: var(--background);
-    color: var(--base);
+    color: var(--text);
     font-size: var(--base);
 }
 
@@ -43,14 +43,21 @@ header {
     z-index: 999;
 }
 
-textarea {
-    resize: none;
-}
-
-p {
-    color: var(--text);
+label {
+    display: none;
 }
 
 main {
     min-height: 100vh;
+}
+
+input {
+    color: var(--background);
+    font-size: var(--p);
+    margin-top: 1.25rem;
+    padding: 0.5rem 0.45rem;
+}
+
+input:required {
+    outline-color: var(--red);
 }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 63a32ff..4825b3c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,6 +1,7 @@
 /* HERO */
 .hero {
     align-items: center;
+    box-shadow: 0 1px 2.25px var(--green);
     color: var(--foreground);
     display: flex;
     flex-direction: column;
@@ -17,6 +18,10 @@
     text-align: center;
 }
 
+.hero > p {
+    font-size: var(--p);
+}
+
 .cta {
     background-color: var(--green);
     border: 1px solid var(--green);
@@ -27,7 +32,7 @@
     padding: 0.75rem 1.45rem;
     text-align: center;
     transition: all 0.25s;
-    width: 80%;
+    width: 15rem;
 }
 
 .cta:hover {
@@ -35,4 +40,44 @@
     color: var(--green);
 }
 
-/* CONTACT */
\ No newline at end of file
+/* CONTACT */
+.contact {
+    align-items: center;
+    box-shadow: 0 1px 2.25px var(--green);
+    display: flex;
+    flex-direction: column;
+    min-height: 90vh;
+    text-align: center;
+    justify-content: center;
+}
+
+.contact__title {
+    font-size: var(--h3);
+    margin-bottom: 1.45rem;
+}
+
+.contact__form {
+    display: grid;
+    grid-template-areas: "name" "email" "submit";
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, auto);
+    width: 100%;
+}
+
+.submit {
+    background-color: var(--green);
+    border: 1px solid var(--green);
+    border-radius: 15px;
+    color: var(--foreground);
+    font-size: var(--p);
+    margin-top: 3.45rem;
+    padding: 0.75rem 1.45rem;
+    transition: all 0.25s;
+    width: 15rem;
+}
+
+.submit:hover,
+.submit:active {
+    background-color: var(--background);
+    color: var(--green);
+}
\ No newline at end of file
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 7be73b5..be0c3bf 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -64,8 +64,8 @@ themesDir = "../.."
     link = "#"
 
 [params.fa]
-    version = ""
-    integrity = ""
+    version = "5.8.1"
+    integrity = "sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ"
 
 [params.form]
     show = true
@@ -73,15 +73,12 @@ themesDir = "../.."
     action = ""
     method = "POST"
     section = "Contact me!"
-    inputNameName = ""
-    inputNameLabel = ""
-    inputNamePlaceholder = ""
-    inputEmailName = ""
-    inputEmailLabel = ""
-    inputEmailPlaceholder = ""
-    inputMsgName = ""
-    inputMsgLabel = ""
-    inputMsgLength = 750
+    inputNameName = "Name"
+    inputNameLabel = "Your Name"
+    inputNamePlaceholder = "Your Name"
+    inputEmailName = "Email"
+    inputEmailLabel = "Your Email"
+    inputEmailPlaceholder = "Your Email"
     SubmitValue = ""
 
 [params.contact]
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index ee17736..bccc5c2 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -2,4 +2,4 @@
 ---
 
 # Piercer  
-### A Hugo Theme based on Dracula.
+A Hugo Theme based on Dracula.
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 71c80bf..8f8340d 100644
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -1,7 +1,7 @@
 <section class="contact">
-    <h2 class="contact__title">
+    <h1 class="contact__title">
         {{ $.Site.Params.form.Section }}
-    </h2>
+    </h1>
 
     {{ if $.Site.Params.form.netlify }}
     <form name="contact" method="POST" data-netlify="true" class="contact__form" id="contactForm">
@@ -15,8 +15,8 @@
             <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>
+                id="{{ $.Site.Params.form.inputNameName }}" aria-labelledby="{{ $.Site.Params.form.inputNameName }}"
+                required>
         </div>
 
         <!-- Email -->
@@ -28,20 +28,15 @@
                 aria-labelledby="{{ $.Site.Params.form.InputEmailName }}" required>
         </div>
 
-        <!-- Message -->
-        <div class="contact__form__field contact__form__field--msg">
-            <label for="{{ $.Site.Params.form.inputMsgName }}">{{ $.Site.Params.form.inputMsgLabel }}</label>
-            <textarea name="{{ $.Site.Params.form.inputMsgName }}" id="{{ $.Site.Params.form.inputMsgName }}"
-                form="contactForm" maxlength="{{ $.Site.Params.form.inputMsgLength }}"
-                id="{{ $.Site.Params.form.inputMsgName }}" arial-labelledby="{{ $.Site.Params.form.InputMsgName }}"
-                required></textarea>
-        </div>
-
         <!-- Submit -->
         <div class="contact__form__field contact__form__field--submit">
             <button type="submit" class="submit" onclick="cleanForm"
                 aria-label="{{ $.Site.Params.form.SubmitValue }}">
-                {{ $.Site.Params.form.SubmitValue }}
+                {{ if $.Site.Params.form.submitValue }}
+                {{ $.Site.Params.form.submitValue }}
+                {{ else }}
+                <i class="fas fa-paper-plane"></i>
+                {{ end }}
             </button>
         </div>
 
diff --git a/layouts/partials/fontawesome.html b/layouts/partials/fontawesome.html
index 9c08eff..cc963bb 100644
--- a/layouts/partials/fontawesome.html
+++ b/layouts/partials/fontawesome.html
@@ -1,5 +1,5 @@
 {{ $version := "5.8.1" }}
-{{ $integrity := "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" }}
+{{ $integrity := "sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" }}
 
 {{ if and $.Site.Params.fa.version $.Site.Params.fa.integrity }}
 {{ $version = $.Site.Params.fa.version }}