finally got myself a real contact form 📬

assets/sass/abstracts/_responsive.scss

@@ -11,6 +11,7 @@
 @use "../pages/videos";
 @use "../pages/etc";
 @use "../pages/projects";
+@use "../pages/contact";
 @use "../pages/fourOhFour";
 
 // Responsive Awesomeness
@@ -26,5 +27,6 @@
   @include videos.responsive();
   @include etc.responsive();
   @include projects.responsive();
+  @include contact.responsive();
   @include fourOhFour.responsive();
 }

assets/sass/abstracts/_themes.scss

@@ -61,6 +61,8 @@ $themes: (
     super-light: #f4f4f4,
     super-duper-light: #fbfbfb,
     links: #0e6dc2,
+    success: #0b890f,
+    error: #ff1b1b,
   ),
   dark: (
     background-inner: #1e1e1e,
@@ -74,6 +76,8 @@ $themes: (
     super-light: #272727,
     super-duper-light: #1f1f1f,
     links: #88c7ff,
+    success: #78df55,
+    error: #f54545,
   ),
 );
 

assets/sass/main.scss

@@ -16,6 +16,7 @@
 @use "pages/videos";
 @use "pages/etc";
 @use "pages/projects";
+@use "pages/contact";
 @use "pages/fourOhFour";
 
 // Miscellaneous

assets/sass/pages/_contact.scss

@@ -0,0 +1,111 @@
+@use "../abstracts/themes";
+
+// Contact Styles
+div.layout-contact {
+  max-width: 600px;
+  padding: 1.5em 0;
+
+  h1 {
+    margin-bottom: 0.4em;
+    text-align: center;
+  }
+
+  p {
+    font-size: 0.9em;
+    margin-bottom: 0.5em;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  select,
+  textarea {
+    width: 100%;
+    padding: 0.8em;
+    margin: 0.6em 0;
+    border: 1px solid;
+    border-radius: 0.3em;
+    font-size: 0.9em;
+
+    @include themes.themed(color, "text");
+    @include themes.themed(background-color, "super-duper-light");
+    @include themes.themed(border-color, "light");
+  }
+
+  textarea {
+    height: 10em;
+    margin-bottom: 0;
+
+    // allow vertical resizing & disable horizontal
+    resize: vertical; // stylelint-disable-line plugin/no-unsupported-browser-features
+  }
+
+  div#contact-form-action-row {
+    display: flex;
+    align-items: center;
+
+    button {
+      padding: 0.8em 1.2em;
+      margin-right: 1.5em;
+      border: 0;
+      border-radius: 0.3em;
+      cursor: pointer;
+      line-height: 1.5;
+      user-select: none;
+
+      @include themes.themed(color, "text");
+      @include themes.themed(background-color, "kinda-light");
+
+      &:hover,
+      &:focus {
+        @include themes.themed(color, "super-duper-light");
+        @include themes.themed(background-color, "links");
+      }
+
+      img.emoji {
+        margin-right: 0.4em;
+        cursor: inherit;
+      }
+    }
+
+    span {
+      font-size: 0.9em;
+      font-weight: 600;
+
+      &#contact-form-result-success {
+        @include themes.themed(color, "success");
+      }
+
+      &#contact-form-result-error {
+        @include themes.themed(color, "error");
+      }
+    }
+  }
+
+  // hcaptcha widget
+  #contact-form-captcha {
+    display: block;
+    margin: 1.2em 0;
+  }
+
+  span#contact-form-md-info {
+    display: block;
+    font-size: 0.75em;
+    margin-top: 0.25em;
+    margin-left: 0.75em;
+
+    a {
+      // disable fancy underline without `.no-underline`
+      background: none !important;
+      padding: 0;
+
+      &:first-of-type {
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+// Responsive
+// stylelint-disable-next-line block-no-empty
+@mixin responsive() {
+}