Skip to content

Commit 56e7161

Browse files
webstackdevwebstackdev
committed
Make email footer responsive
1 parent 8b3336c commit 56e7161

10 files changed

Lines changed: 243 additions & 23 deletions

File tree

‎src/actions/contact/email/message.mjml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
<mjml>
44
<mj-head>
5+
{% include '../../utils/email/footer/styles.mjml' %}
56
<mj-attributes>
67
<mj-all font-family="Arial, sans-serif" />
78
<mj-text

‎src/actions/gdpr/email/verification.mjml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
<mjml>
44
<mj-head>
5+
{% include '../../utils/email/footer/styles.mjml' %}
56
<mj-title>{{ subject }}</mj-title>
67
<mj-preview>
78
{{ subject }} from Webstack Builders

‎src/actions/newsletter/email/confirmation.mjml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<mjml>
66
<mj-head>
7+
{% include '../../utils/email/footer/styles.mjml' %}
78
<mj-title>
89
Confirm Your Newsletter Subscription
910
</mj-title>

‎src/actions/newsletter/email/welcome.mjml‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<mjml>
55
<mj-head>
6+
{% include '../../utils/email/footer/styles.mjml' %}
67
<mj-title>
78
Welcome to Webstack Builders
89
</mj-title>
@@ -79,16 +80,14 @@
7980
<mj-section mj-class="content-section">
8081
<mj-column>
8182
<mj-text mj-class="heading">
82-
🎉 Welcome to Webstack Builders!
83+
🎉 Welcome to Webstack Weekly!
8384
</mj-text>
8485
<mj-text mj-class="body-text">{{ greeting }},</mj-text>
8586
<mj-text mj-class="body-text">
86-
Your subscription is now confirmed! Thank you for joining our community of developers, designers, and tech
87-
enthusiasts.
87+
Your subscription is now confirmed! Thanks for joining our community of platform engineers, SREs, and cloud architects dedicated to building resilient, scalable systems.
8888
</mj-text>
8989
<mj-text mj-class="body-text">
90-
You'll now receive our latest articles, tutorials, and insights directly in your inbox. We're committed to
91-
delivering high-quality content that helps you build better web experiences.
90+
Get ready for deep dives into infrastructure-as-code, kubernetes patterns, and reliability best practices. I've gathered these resources to help you tackle the complexities of building and scaling mission-critical systems.
9291
</mj-text>
9392
<mj-button mj-class="button" href="https://www.webstackbuilders.com/articles">
9493
Browse Our Articles

‎src/actions/utils/email/footer/partials/layout.mjml‎

Lines changed: 124 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,117 @@
1-
<mj-section padding="24px 24px 0">
2-
<mj-column
3-
width="50%"
4-
background-color="#001A39"
5-
padding="0"
6-
vertical-align="middle"
7-
>
8-
<mj-text align="center" padding="34px 24px 8px">
1+
<mj-section css-class="footer-desktop" padding="24px 24px 0">
2+
<mj-column padding="0">
3+
<mj-table padding="0">
4+
<tr>
5+
<td
6+
width="50%"
7+
style="width:50%;background-color:#001A39;padding:24px;vertical-align:middle;text-align:center;"
8+
>
9+
<table
10+
align="center"
11+
border="0"
12+
cellpadding="0"
13+
cellspacing="0"
14+
role="presentation"
15+
style="margin:0 auto;"
16+
>
17+
<tr>
18+
<td align="center" style="padding:0 0 12px;">
19+
<a
20+
href="{{ common.company.url }}"
21+
style="color:#19304c;text-decoration:none;display:inline-block"
22+
>
23+
{% include './logo-table.mjml' %}
24+
</a>
25+
</td>
26+
</tr>
27+
<tr>
28+
<td
29+
align="center"
30+
style="font-family:Arial, sans-serif;font-size:24px;font-weight:700;line-height:32px;"
31+
>
32+
<a
33+
href="{{ common.company.url }}"
34+
style="color:#ffffff;text-decoration:none;display:inline-block"
35+
>
36+
Webstack<br>
37+
Builders, Inc.
38+
</a>
39+
</td>
40+
</tr>
41+
</table>
42+
</td>
43+
<td
44+
width="50%"
45+
style="width:50%;background-color:#ffffff;padding:24px 24px 24px 20px;vertical-align:top;"
46+
>
47+
<table
48+
border="0"
49+
cellpadding="0"
50+
cellspacing="0"
51+
role="presentation"
52+
style="width:100%;"
53+
>
54+
<tr>
55+
<td
56+
style="font-family:Arial, sans-serif;font-size:16px;line-height:26px;color:#19304c;padding:0 0 16px;"
57+
>
58+
<strong style="color:#001A39;">Phone:</strong>
59+
<a href="{{ common.company.telephoneTollFreeHref }}" style="color:#19304c;text-decoration:none;">
60+
{{ common.company.telephoneTollFree }}
61+
</a>
62+
<br>
63+
<span style="display:inline-block;padding-left:56px;">
64+
<a href="{{ common.company.telephoneLocalHref }}" style="color:#19304c;text-decoration:none;">
65+
{{ common.company.telephoneLocal }}
66+
</a>
67+
</span>
68+
</td>
69+
</tr>
70+
<tr>
71+
<td
72+
style="font-family:Arial, sans-serif;font-size:16px;line-height:26px;color:#19304c;padding:0 0 16px;"
73+
>
74+
<strong style="color:#001A39;">Email:</strong>
75+
<a href="{{ footerEmailHref }}" style="color:#19304c;text-decoration:none;">
76+
{{ footerEmailLabel }}
77+
</a>
78+
</td>
79+
</tr>
80+
<tr>
81+
<td
82+
style="font-family:Arial, sans-serif;font-size:16px;line-height:26px;color:#19304c;padding:0 0 16px;"
83+
>
84+
<strong style="color:#001A39;">Website:</strong>
85+
<a href="{{ common.company.url }}" style="color:#19304c;text-decoration:none;">
86+
{{ common.company.websiteLabel }}
87+
</a>
88+
</td>
89+
</tr>
90+
<tr>
91+
<td
92+
style="font-family:Arial, sans-serif;font-size:16px;line-height:26px;color:#19304c;padding:0;"
93+
>
94+
<strong style="color:#001A39;">Address:</strong>
95+
<a href="{{ common.company.mapLink }}" style="color:#19304c;text-decoration:none;">
96+
{{ common.company.address }}<br>
97+
{{ common.company.cityStatePostal }}
98+
</a>
99+
</td>
100+
</tr>
101+
</table>
102+
</td>
103+
</tr>
104+
</mj-table>
105+
</mj-column>
106+
</mj-section>
107+
108+
<mj-section
109+
css-class="footer-mobile"
110+
background-color="#001A39"
111+
padding="24px 24px 0"
112+
>
113+
<mj-column vertical-align="middle">
114+
<mj-text align="center" padding="0 0 12px">
9115
<a
10116
href="{{ common.company.url }}"
11117
style="color:#19304c;text-decoration:none;display:inline-block"
@@ -19,22 +125,25 @@
19125
font-size="24px"
20126
font-weight="700"
21127
line-height="32px"
22-
padding="0 24px 34px"
128+
padding="0 0 20px"
23129
>
24130
<a
25131
href="{{ common.company.url }}"
26132
style="color:#ffffff;text-decoration:none;display:inline-block"
27133
>
28-
{{ common.company.name }}
134+
Webstack<br>
135+
Builders, Inc.
29136
</a>
30137
</mj-text>
31138
</mj-column>
139+
</mj-section>
32140

33-
<mj-column
34-
width="50%"
35-
padding="0 0 0 20px"
36-
vertical-align="top"
37-
>
141+
<mj-section
142+
css-class="footer-mobile"
143+
background-color="#ffffff"
144+
padding="24px 24px 0"
145+
>
146+
<mj-column padding="0">
38147
{% include './contact-info.mjml' %}
39148
</mj-column>
40149
</mj-section>

‎src/actions/utils/email/footer/partials/logo-table.mjml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Webstack Builders Logo as HTML Table -->
2-
<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="width:88px;height:85px;background-color:white;border:0;">
2+
<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="width:88px;height:85px;background-color:white;border:4px solid #ffffff;">
33
<tr>
44
<td style="height:29px;">
55
<!-- Top Row: 3 dark blue blocks with gaps -->

‎src/actions/utils/email/footer/styles.mjml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<mj-style>
2+
.footer-mobile {
3+
display: none !important;
4+
mso-hide: all !important;
5+
max-height: 0 !important;
6+
overflow: hidden !important;
7+
}
8+
9+
.footer-desktop {
10+
display: block !important;
11+
max-height: none !important;
12+
overflow: visible !important;
13+
}
14+
15+
@media only screen and (max-width: 480px) {
16+
div.footer-desktop,
17+
table.footer-desktop,
18+
tbody.footer-desktop,
19+
tr.footer-desktop,
20+
td.footer-desktop {
21+
display: none !important;
22+
mso-hide: all !important;
23+
max-height: 0 !important;
24+
overflow: hidden !important;
25+
}
26+
27+
div.footer-mobile,
28+
table.footer-mobile,
29+
tbody.footer-mobile,
30+
tr.footer-mobile,
31+
td.footer-mobile {
32+
display: block !important;
33+
width: 100% !important;
34+
max-height: none !important;
35+
overflow: visible !important;
36+
}
37+
38+
td.footer-mobile {
39+
box-sizing: border-box !important;
40+
}
41+
}
42+
</mj-style>

‎src/actions/utils/email/header/default/index.mjml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mj-column width="25%" vertical-align="middle">
33
<mj-text align="left" padding="0">
44
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:inline-block">
5-
{% include '../../footer/partials/logo-table.mjml' %}
5+
{% include '../partials/logo-table.mjml' %}
66
</a>
77
</mj-text>
88
</mj-column>

‎src/actions/utils/email/header/newsletter/index.mjml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mj-column width="25%" vertical-align="middle">
33
<mj-text align="left" padding="0">
44
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:inline-block">
5-
{% include '../../footer/partials/logo-table.mjml' %}
5+
{% include '../partials/logo-table.mjml' %}
66
</a>
77
</mj-text>
88
</mj-column>

‎src/actions/utils/email/header/partials/logo-table.mjml‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!-- Webstack Builders Logo as HTML Table for email headers -->
2+
<table
3+
align="center"
4+
cellpadding="0"
5+
cellspacing="0"
6+
role="presentation"
7+
style="width:74px;height:72px;background-color:#ffffff;border:4px solid #ffffff;"
8+
>
9+
<tr>
10+
<td style="height:25px;">
11+
<table
12+
cellpadding="0"
13+
cellspacing="0"
14+
role="presentation"
15+
style="width:100%;height:100%;background-color:#ffffff;border:0;"
16+
>
17+
<tr>
18+
<td style="width:15px;height:25px;background-color:#001A39;"></td>
19+
<td style="width:5px;height:25px;background-color:#ffffff;"></td>
20+
<td style="width:34px;height:25px;background-color:#001A39;"></td>
21+
<td style="width:5px;height:25px;background-color:#ffffff;"></td>
22+
<td style="width:15px;height:25px;background-color:#001A39;"></td>
23+
</tr>
24+
</table>
25+
</td>
26+
</tr>
27+
<tr>
28+
<td style="height:4px;background-color:#ffffff;line-height:4px;font-size:4px;">&nbsp;</td>
29+
</tr>
30+
<tr>
31+
<td style="height:14px;">
32+
<table
33+
cellpadding="0"
34+
cellspacing="0"
35+
role="presentation"
36+
style="width:100%;height:100%;background-color:#ffffff;border:0;"
37+
>
38+
<tr>
39+
<td style="width:35px;height:14px;background-color:#006DCA;"></td>
40+
<td style="width:4px;height:14px;background-color:#ffffff;"></td>
41+
<td style="width:35px;height:14px;background-color:#006DCA;"></td>
42+
</tr>
43+
</table>
44+
</td>
45+
</tr>
46+
<tr>
47+
<td style="height:4px;background-color:#ffffff;line-height:4px;font-size:4px;">&nbsp;</td>
48+
</tr>
49+
<tr>
50+
<td style="height:25px;">
51+
<table
52+
cellpadding="0"
53+
cellspacing="0"
54+
role="presentation"
55+
style="width:100%;height:100%;background-color:#ffffff;border:0;"
56+
>
57+
<tr>
58+
<td style="width:15px;height:25px;background-color:#001A39;"></td>
59+
<td style="width:5px;height:25px;background-color:#ffffff;"></td>
60+
<td style="width:34px;height:25px;background-color:#001A39;"></td>
61+
<td style="width:5px;height:25px;background-color:#ffffff;"></td>
62+
<td style="width:15px;height:25px;background-color:#001A39;"></td>
63+
</tr>
64+
</table>
65+
</td>
66+
</tr>
67+
</table>

0 commit comments

Comments
 (0)