jarv.is/assets/sass/pages/_contact.scss

@use "../abstracts/themes";

// Contact Styles
div.layout-contact {
  max-width: 600px;
  padding: 1.5em 0;

  h1 {
    margin-bottom: 0.4em;
    text-align: center;
  }

  code {
    background: none !important;
    border: 0;
    padding: 0;
    word-spacing: -0.175em;
    white-space: normal; // re-enable "word" wrapping
  }

  input[type="text"],
  input[type="email"],
  select,
  textarea {
    width: 100%;
    padding: 0.8em;
    margin: 0.6em 0;
    border: 2px solid;
    border-radius: 0.3em;
    font-size: 0.9em;

    @include themes.themed(
      (
        color: "text",
        background-color: "super-duper-light",
        border-color: "light",
      )
    );

    &:focus {
      outline: none; // disable browsers' outer border

      @include themes.themed(
        (
          border-color: "links",
        )
      );
    }
  }

  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;
    min-height: 3.75em;

    button {
      flex-shrink: 0;
      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",
          background-color: "kinda-light",
        )
      );

      &:hover {
        @include themes.themed(
          (
            color: "super-duper-light",
            background-color: "links",
          )
        );
      }

      svg.emoji {
        margin-left: 0;
        margin-right: 0.4em;
        cursor: inherit;
      }
    }

    span.contact-form-result {
      font-size: 0.925em;
      font-weight: 600;

      &#contact-form-result-success {
        @include themes.themed(
          (
            color: "success",
          )
        );
      }

      &#contact-form-result-error {
        @include themes.themed(
          (
            color: "error",
          )
        );
      }
    }
  }

  // hcaptcha widget
  div#contact-form-captcha {
    margin: 1em 0;
  }

  div#contact-form-md-info {
    font-size: 0.75em;
    line-height: 1.75;
    margin: 0.2em 0 0.6em 0;

    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() {
}