Skip to content

Commit d299282

Browse files
juniorescjunioresc
authored
BA-1404 BaseApp Email Template (#126)
* BA-1404: updating logo resolution and streamlined base email * BA-1404: version bump
1 parent 8e092e2 commit d299282

File tree

3 files changed

+213
-118
lines changed

3 files changed

+213
-118
lines changed

‎baseapp-core/baseapp_core/static/emails/logo.png

6.37 KB
Loading

‎baseapp-core/baseapp_core/templates/emails/base.html.j2

+212-117
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,213 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2-
<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
3-
<head>
4-
<meta name="viewport" content="width=device-width" />
5-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6-
<style type="text/css">
7-
:root {
8-
--primary-main: #5852F2;
9-
--grey-900: #161C24;
10-
--grey-600: #637381;
11-
}
12-
img {
13-
max-width: 100%;
14-
}
15-
body {
16-
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em;
17-
}
18-
body {
19-
background-color: #f6f6f6;
20-
}
21-
.heading-h5 {
22-
font-size: 20px;
23-
font-weight: 700;
24-
color: #161C24;
25-
}
26-
.paragraph {
27-
font-size: 14px;
28-
font-weight: 400;
29-
color: #161C24;
30-
}
31-
.caption {
32-
color: #637381;
33-
font-size: 12px;
34-
font-weight: 400;
35-
text-align: center;
36-
}
37-
@media only screen and (max-width: 640px) {
38-
body {
39-
padding: 0 !important;
40-
}
41-
h1 {
42-
font-weight: 800 !important; margin: 20px 0 5px !important;
43-
}
44-
h2 {
45-
font-weight: 800 !important; margin: 20px 0 5px !important;
46-
}
47-
h3 {
48-
font-weight: 800 !important; margin: 20px 0 5px !important;
49-
}
50-
h4 {
51-
font-weight: 800 !important; margin: 20px 0 5px !important;
52-
}
53-
h1 {
54-
font-size: 22px !important;
55-
}
56-
h2 {
57-
font-size: 18px !important;
58-
}
59-
h3 {
60-
font-size: 16px !important;
61-
}
62-
.container {
63-
padding: 0 !important; width: 100% !important;
64-
}
65-
.content {
66-
padding: 0 !important;
67-
}
68-
.content-wrap {
69-
padding: 10px !important;
70-
}
71-
}
72-
</style>
73-
</head>
74-
75-
<body itemscope itemtype="http://schema.org/EmailMessage" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: white; margin: 0;" bgcolor="white">
76-
<table class="body-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: lightgray; margin: 0;" bgcolor="#f6f6f6"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
77-
<td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
78-
<div style="background-color: #5852F2;border-radius: 10px;border-bottom: #161C24;border-bottom-style: solid;border-top: #5852F2;border-top-style: solid;border-width: 9px; box-shadow: 1px 1px 48px 0px #888888;">
79-
<div style="background-color: #5852F2;padding: 28px;">
80-
<img src="{{ static('emails/logo.png') }}" alt="logo" />
81-
</div>
82-
<div class="content" style="background-color: white;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 8px;">
83-
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction" style="background-size: 330px 150px, 330px 150px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; background-color: #fff; margin: 0;" bgcolor="#fff">
84-
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
85-
<td class="content-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;" valign="top">
86-
<table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
87-
{% block content %}
88-
{% endblock %}
89-
{% block footer %}
90-
{% endblock %}
91-
</table>
92-
</td>
93-
</tr>
94-
</table>
95-
</div>
96-
<div style="background-color: #161C24;padding: 28px;color:white;text-align:center;">
97-
<img src="{{ static('logos/white.png') }}" alt="logo" />
98-
<p class="caption">
99-
Streamlining development with a versatile modular template for all people. Innovate, integrate, and launch faster.
100-
</p>
101-
<p style="text-align: center;">
102-
<a href="https://www.x.com/"><img src="{{ static('social/flat-x.png') }}" alt="x" /></a>
103-
<a href="https://www.youtube.com/"><img src="{{ static('social/flat-youtube.png') }}" alt="youtube" /></a>
104-
<a href="https://www.instagram.com/"><img src="{{ static('social/flat-instagram.png') }}" alt="instagram" /></a>
105-
<a href="https://www.linkedin.com/"><img src="{{ static('social/flat-linkedin.png') }}" alt="linkedin" /></a>
106-
<a href="https://www.facebook.com/"><img src="{{ static('social/flat-facebook.png') }}" alt="facebook" /></a>
107-
</p>
108-
<p class="caption">
109-
123 Sample Street, Floor 1<br />
110-
Boca Raton, FL, 12345
111-
</p>
112-
</div>
113-
</div>
114-
</td>
115-
</tr>
116-
</table>
117-
</body>
118-
</html>
2+
<html>
3+
<head xmlns="http://www.w3.org/1999/xhtml">
4+
<meta name="viewport" content="width=device-width" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6+
<style type="text/css">
7+
/* Globals */
8+
:root {
9+
--font-family: 'Public Sans', 'Roboto', sans-serif;
10+
11+
--surface-a50: #ffffff;
12+
--surface-50: #F7F7F7;
13+
--surface-300: #B7BBBF;
14+
--surface-500: #5D6770;
15+
--surface-700: #363D43;
16+
--surface-900: #15171A;
17+
18+
--primary-main: #5852F2;
19+
--primary-contrast: var(--surface-a50);
20+
21+
--elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.20), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
22+
}
23+
24+
body {
25+
margin: 0px;
26+
color: var(--surface-900);
27+
}
28+
29+
p {
30+
margin: 0px;
31+
}
32+
33+
34+
/* Containers */
35+
.wrapper {
36+
background-color: var(--surface-50);
37+
display: flex;
38+
align-items: flex-start;
39+
justify-content: center;
40+
margin: 16px;
41+
}
42+
43+
.container {
44+
background-color: var(--surface-a50);
45+
border-radius: 12px;
46+
max-width: 512px;
47+
width: 100%;
48+
overflow: auto;
49+
display: grid;
50+
}
51+
52+
.header {
53+
padding: 32px;
54+
display: flex;
55+
background-color: var(--primary-main);
56+
align-items: center;
57+
justify-content: flex-start;
58+
}
59+
60+
.content {
61+
display: grid;
62+
gap: 24px;
63+
align-items: center;
64+
justify-items: center;
65+
padding: 32px 48px;
66+
}
67+
68+
.footer {
69+
background-color: var(--surface-700);
70+
color: var(--primary-contrast);
71+
display: grid;
72+
gap: 32px;
73+
padding: 48px;
74+
justify-items: center;
75+
}
76+
77+
.social-media-container {
78+
display: grid;
79+
gap: 24px;
80+
justify-items: center;
81+
align-items: center;
82+
grid-template-columns: repeat(1, max-content)
83+
}
84+
85+
86+
/* Typography */
87+
.t-body2 {
88+
font-family: var(--font-family);
89+
font-size: 14px;
90+
font-style: normal;
91+
font-weight: 400;
92+
line-height: 143%;
93+
letter-spacing: 0.17px;
94+
}
95+
96+
.t-h6 {
97+
font-family: var(--font-family);
98+
font-size: 20px;
99+
font-style: normal;
100+
font-weight: 500;
101+
line-height: 160%;
102+
letter-spacing: 0.15px;
103+
}
104+
105+
.t-button {
106+
font-family: var(--font-family);
107+
font-size: 15px;
108+
font-style: normal;
109+
font-weight: 600;
110+
line-height: 26px;
111+
letter-spacing: 0.17px;
112+
}
113+
114+
.t-caption {
115+
font-family: var(--font-family);
116+
font-size: 12px;
117+
font-style: normal;
118+
font-weight: 400;
119+
line-height: 166%;
120+
letter-spacing: 0.4px;
121+
}
122+
123+
124+
/* Components */
125+
.heading {
126+
width: 100%;
127+
}
128+
129+
.button {
130+
display: flex;
131+
padding: 8px 22px;
132+
flex-direction: column;
133+
justify-content: center;
134+
align-items: center;
135+
border-radius: 8px;
136+
background: var(--primary-main);
137+
box-shadow: var(--elevation-2);
138+
cursor: pointer;
139+
width: fit-content;
140+
color: var(--primary-contrast);
141+
text-decoration: none;
142+
}
143+
144+
.anchor {
145+
cursor: pointer;
146+
text-decoration: none;
147+
}
148+
149+
.image {
150+
max-width: 512px;
151+
width: 100%;
152+
}
153+
154+
.overflowing-image {
155+
max-width: 512px;
156+
width: calc(100% + 92px);
157+
}
158+
159+
.logo {
160+
width: 100%;
161+
}
162+
163+
.social-logo {
164+
height: 24px;
165+
width: 24px;
166+
}
167+
168+
.footer-caption {
169+
color: var(--surface-500);
170+
text-align: center;
171+
white-space: pre-line;
172+
}
173+
</style>
174+
</head>
175+
<body itemscope itemtype="http://schema.org/EmailMessage">
176+
<div class="wrapper">
177+
<div class="container">
178+
<header class="header">
179+
<img class="logo" src="{{ static('emails/logo.png') }}" alt="Logo" />
180+
</header>
181+
<div class="content">
182+
{% block content %}{% endblock %}
183+
{{ template_content|safe }}
184+
</div>
185+
<footer class="footer">
186+
<img src="{{ static('emails/logo.png') }}" alt="Logo" />
187+
<p class="footer-caption t-caption">Streamlining development with a versatile modular template for all people. Innovate, integrate, and launch faster. </p>
188+
<div class="social-media-container">
189+
<a class="anchor" target="_blank" rel="noopener noreferrer" href="https://www.x.com/">
190+
<img class="social-logo" alt="X Logo" src="{{ static('social/flat-x.png') }}" />
191+
</a>
192+
<a class="anchor" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/">
193+
<img class="social-logo" alt="Youtube Logo" src="{{ static('social/flat-youtube.png') }}" />
194+
</a>
195+
<a class="anchor" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/">
196+
<img class="social-logo" alt="Instagram Logo" src="{{ static('social/flat-instagram.png') }}" />
197+
</a>
198+
<a class="anchor" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/">
199+
<img class="social-logo" alt="LinkedIn Logo" src="{{ static('social/flat-linkedin.png') }}" />
200+
</a>
201+
<a class="anchor" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/">
202+
<img class="social-logo" alt="Facebook Logo" src="{{ static('social/flat-facebook.png') }}" />
203+
</a>
204+
</div>
205+
<p class="footer-caption t-caption">
206+
123 Sample Street, Floor 1 <br />
207+
Boca Raton, FL, 12345
208+
</p>
209+
</footer>
210+
</div>
211+
</div>
212+
</body>
213+
</html>

‎baseapp-core/setup.cfg

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[metadata]
22
name = baseapp-core
3-
version = 0.3.0
3+
version = 0.3.1
44
description = BaseApp Core
55
long_description = file: README.md
66
url = https://github.com/silverlogic/baseapp-backend

0 commit comments

Comments
 (0)