use maizzle for email templating, starting with reset password email

mailers/custom/postmark/buttons.css

@@ -0,0 +1,32 @@
+.button {
+	@apply inline-block text-white no-underline;
+	background-color: #3869d4;
+	border-top: 10px solid #3869d4;
+	border-right: 18px solid #3869d4;
+	border-bottom: 10px solid #3869d4;
+	border-left: 18px solid #3869d4;
+	border-radius: 3px;
+	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
+}
+
+.button--green {
+	background-color: #22bc66;
+	border-top: 10px solid #22bc66;
+	border-right: 18px solid #22bc66;
+	border-bottom: 10px solid #22bc66;
+	border-left: 18px solid #22bc66;
+}
+
+.button--red {
+	background-color: #ff6136;
+	border-top: 10px solid #ff6136;
+	border-right: 18px solid #ff6136;
+	border-bottom: 10px solid #ff6136;
+	border-left: 18px solid #ff6136;
+}
+
+@screen sm {
+	.button {
+		@apply w-full text-center !important;
+	}
+}

mailers/custom/postmark/index.css

@@ -0,0 +1,65 @@
+@import "buttons";
+
+.purchase_heading {
+	border-bottom-width: 1px;
+	border-bottom-color: #eaeaec;
+	border-bottom-style: solid;
+}
+
+.purchase_heading p {
+	@apply text-xxs leading-24 m-0;
+	color: #85878e;
+}
+
+.purchase_footer {
+	@apply pt-16 text-base align-middle;
+	border-top-width: 1px;
+	border-top-color: #eaeaec;
+	border-top-style: solid;
+}
+
+.body-sub {
+	@apply mt-25 pt-25 border-t;
+	border-top-color: #eaeaec;
+	border-top-style: solid;
+}
+
+.discount {
+	@apply w-full p-24 bg-gray-postmark-lightest;
+	border: 2px dashed #cbcccf;
+}
+
+.email-masthead {
+	@apply py-24 text-base text-center;
+}
+
+@screen dark {
+	body,
+	.email-body,
+	.email-body_inner,
+	.email-content,
+	.email-wrapper,
+	.email-masthead,
+	.email-footer {
+		@apply bg-gray-postmark-darker text-white !important;
+	}
+
+	p,
+	ul,
+	ol,
+	blockquote,
+	h1,
+	h2,
+	h3 {
+		@apply text-white !important;
+	}
+
+	.attributes_content,
+	.discount {
+		@apply bg-gray-postmark-darkest !important;
+	}
+
+	.email-masthead_name {
+		text-shadow: none !important;
+	}
+}

mailers/custom/reset.css

@@ -0,0 +1,10 @@
+body {
+	@apply m-0 p-0 w-full;
+	word-break: break-word;
+	-webkit-font-smoothing: antialiased;
+}
+
+img {
+	border: 0;
+	@apply max-w-full leading-full align-middle;
+}

mailers/custom/utilities.css

@@ -0,0 +1,3 @@
+.mso-leading-exactly {
+	mso-line-height-rule: exactly;
+}