:lipstick: Add outline to form inputs, extract scss

- extracted relevant rules to _form.scss
- added outline in accent color
- only allow vertical text area resizing to prevent horizontal overflow

2 files changed, 70 insertions, 66 deletions

diff --git a/assets/sass/_form.scss b/assets/sass/_form.scss
new file mode 100644
index 0000000..5682e5e
--- /dev/null
+++ b/assets/sass/_form.scss
@@ -0,0 +1,69 @@
+.contact {
+  width: 100%;
+  padding-bottom: $vertical-rhythm * 2;
+  background-color: $smoke;
+
+  form {
+    margin-top: $vertical-rhythm;
+  }
+
+  .contact-submit {
+    position: relative;
+  }
+
+  #form-submit {
+    display: block;
+    width: 50%;
+    margin: 0 auto;
+  }
+
+  #form-thankyou, #form-sending, #form-error {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+input, button, select {
+  width: 100%;
+  margin: 8px 0;
+  padding: 10px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  border-color: $smoke;
+  background-color: $white;
+  color: $black;
+
+  &[type="submit"] {
+    transition: .4s ease-out;
+    background-color: $storm;
+    color: $white;
+
+    &:hover {
+      background-color: $accent;
+      color: $white;
+      cursor: pointer;
+    }
+  }
+  
+  .icon {
+    color: $white
+  }
+
+  &:focus {
+    outline: $accent solid 2px;
+  }
+}
+
+button {
+  white-space: nowrap;
+}
+
+textarea {
+  @extend input;
+  min-height: $vertical-rhythm * 4;
+  overflow: auto;
+  resize: vertical;
+}
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 755476a..0ce8aa0 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -228,75 +228,10 @@ a > .icon {
   height: 100vh;
 }
 
-.contact {
-  width: 100%;
-  padding-bottom: $vertical-rhythm * 2;
-  // TODO(kdevo): Maybe consider to change this to white if blog is not enabled:
-  background-color: $smoke;
-
-  form {
-    margin-top: $vertical-rhythm;
-  }
-
-  .contact-submit {
-    position: relative;
-  }
-
-  #form-submit {
-    display: block;
-    width: 50%;
-    margin: 0 auto;
-  }
-
-  #form-thankyou, #form-sending, #form-error {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-input, button, select {
-  width: 100%;
-  margin: 8px 0;
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  border-color: $smoke;
-  background-color: $white;
-  color: $black;
-
-  &[type="submit"] {
-    transition: .4s ease-out;
-    background-color: $storm;
-    color: $white;
-
-    &:hover {
-      background-color: $accent;
-      color: $white;
-      cursor: pointer;
-    }
-  }
-  
-  .icon {
-    color: $white
-  }
-}
-
-button {
-  white-space: nowrap;
-}
-
-textarea {
-  @extend input;
-  min-height: $vertical-rhythm * 4;
-  overflow: auto;
-}
-
 small {
   font-size: 0.8em;
   color: $grey;
 }
 
+@import "form";
 @import "custom";
\ No newline at end of file