growstuff/app/views/layouts/mailer.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f4f2ef;
        font-family: "Raleway", "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        color: #212121;
        -webkit-font-smoothing: antialiased;
      }
      table {
        border-collapse: collapse;
      }
      a {
        color: #57803c;
        text-decoration: underline;
      }
      a:hover {
        color: #3e5d2b;
      }
      h1, h2, h3, h4, h5, h6 {
        color: #413f3b;
        margin-top: 0;
      }
      img.img-icon {
        width: 1.2em;
      }
      .email-header {
        background-color: #413f3b;
        padding: 16px 24px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
      }
      .email-header a {
        color: #ffffff !important;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        font-family: "Raleway", "Fira Sans", Helvetica, Arial, sans-serif;
      }
      .email-body {
        background-color: #ffffff;
        padding: 24px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid #e0dcd5;
        border-top: none;
      }
      .email-footer {
        padding: 20px 24px;
        text-align: center;
        font-size: 13px;
        color: #666666;
        font-family: "Raleway", "Fira Sans", Helvetica, Arial, sans-serif;
      }
      .email-footer a {
        color: #57803c;
        text-decoration: underline;
      }
      blockquote {
        margin: 1em 0;
        padding: 10px 16px;
        background-color: #f8f7f5;
        border-left: 4px solid #57803c;
        color: #413f3b;
      }
      .btn {
        display: inline-block;
        background-color: #57803c;
        color: #ffffff !important;
        padding: 10px 18px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: bold;
        margin: 10px 0;
        text-align: center;
      }
      ul {
        padding-left: 20px;
      }
      li {
        margin-bottom: 6px;
      }
      section {
        margin: 1em 0;
        padding: 0 0 1em;
      }
      section h2 {
        background-color: #57803c;
        color: #ffffff;
        padding: 6px 12px;
        font-size: 16px;
        border-radius: 4px;
      }
    </style>
  </head>
  <body style="margin: 0; padding: 0; background-color: #f4f2ef; font-family: 'Raleway', 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #212121;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f4f2ef; width: 100%; padding: 20px 0;">
      <tr>
        <td align="center">
          <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; text-align: left;">
            <!-- Header -->
            <tr>
              <td class="email-header" style="background-color: #413f3b; padding: 16px 24px; border-top-left-radius: 6px; border-top-right-radius: 6px;">
                <a href="<%= root_url %>" style="color: #ffffff; text-decoration: none; font-size: 20px; font-weight: bold; font-family: 'Raleway', 'Fira Sans', Helvetica, Arial, sans-serif;">
                  🌱 <%= ENV['GROWSTUFF_SITE_NAME'].presence || 'Growstuff' %>
                </a>
              </td>
            </tr>
            <!-- Body Content -->
            <tr>
              <td class="email-body" style="background-color: #ffffff; padding: 24px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #e0dcd5; border-top: none;">
                <%= yield %>
              </td>
            </tr>
            <!-- Footer -->
            <tr>
              <td class="email-footer" style="padding: 20px 24px; text-align: center; font-size: 13px; color: #666666; font-family: 'Raleway', 'Fira Sans', Helvetica, Arial, sans-serif;">
                <p style="margin: 0 0 8px 0;">
                  This email was sent by <strong><%= ENV['GROWSTUFF_SITE_NAME'].presence || 'Growstuff' %></strong> (<a href="<%= root_url %>" style="color: #57803c; text-decoration: underline;">growstuff.org</a>) &mdash; an open source community for food growers.
                </p>
                <p style="margin: 0;">
                  <a href="<%= root_url %>" style="color: #57803c; text-decoration: underline;">Home</a> &middot;
                  <a href="<%= policy_community_url %>" style="color: #57803c; text-decoration: underline;">Community Guidelines</a> &middot;
                  <a href="<%= contact_url %>" style="color: #57803c; text-decoration: underline;">Contact</a>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>